0

0

event对象及各种事件总结

零下一度

零下一度

发布时间:2018-05-24 10:00:06

|

2269人浏览过

|

来源于php中文网

原创

事件(event)

event对象

(1)什么是event对象?

  Event 对象代表事件的状态,比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。事件通常与函数结合使用,函数不会在事件发生前被执行!

(2)Event相关方法与属性

  1、谷歌 event.stopPropagation()、IE event.CancelBubble=true:终止事件在传播过程的捕获、目标处理或起泡阶段进一步传播。调用该方法后,该节点上处理该事件的处理程序将被调用,事件不再被分派到其他节点

  2、谷歌 event.preventDefault()、IE event.returnvalue=false :取消事件的默认动作(a标签的href)。

  3、event.clientX、event.clientY:鼠标相对于浏览器窗口可视区域的X,Y坐标(窗口坐标),可视区域不包括工具栏和滚动条。IE事件和标准事件都定义了这2个属性

  4、event.offsetX、event.offsetY:鼠标相对于事件源元素(触发事件的元素)的X,Y坐标,只有IE事件有这2个属性,标准事件没有对应的属性。 与event.offsetLeft、event.offsettop一样。

  5、event.screenX、event.screenY:鼠标相对于用户显示器屏幕左上角的X,Y坐标。标准事件和IE事件都定义了这2个属性。

  6、event.keyCode:获得按键的code值。例:我们在程序里是怎么知道我们是按得哪个键呢,我们可以通过keyCode获得,程序员早在一开始就把键盘上的每一个键定义了一个code,在程序里我们可以判断值来知道我们点击了哪个键。

1.鼠标事件,页面所有元素都可触发

click:当用户单击鼠标按钮或按下回车键时触发。

input.onclick = function () {
  alert('Lee');
};

dblclick:当用户双击主鼠标按钮时触发。

input.ondblclick = function () {
  alert('Lee');
};

mousedown:当用户按下了鼠标还未弹起时触发。

input.onmousedown = function () {
  alert('Lee');
};

mouseup:当用户释放鼠标按钮时触发。

input.onmouseup = function () {
  alert('Lee');
};

mouseover(mouseenter 这种方法不冒泡):当鼠标移到某个元素上方时触发。

input.onmouseover = function () {
  alert('Lee');
};

mouseout(mouseleaver 这种方法不冒泡):当鼠标移出某个元素上方时触发。

input.onmouseout = function () {
  alert('Lee');
};

mousemove:当鼠标指针在元素上移动时触发。

input.onmousemove = function () {
  alert('Lee');
};

2.键盘事件

Android编程之虚拟机Dalvik教程 pdf版
Android编程之虚拟机Dalvik教程 pdf版

Android编程之虚拟机Dalvik教程 pdf,介绍Dalvik与标准Java虚拟机的差别以及运行环境的区别、以及Dalvik的形势前景分析、Android中各种Java包的功能描述、相关文件类型、应用程序结构分析、Android Adb工具介绍等,这些知识对即将从事Android编程的初级朋友来说,是一个完美的前奏曲。

下载

keydown:当用户按下键盘上任意键触发,如果按住不放,会重复触发。

onkeydown = function () {
  alert('Lee');
};

keypress:当用户按下键盘上的字符键触发,如果按住不放,会重复触发。

onkeypress = function () {
  alert('Lee');
};

keyup:当用户释放键盘上的键触发。

onkeyup = function () {
  alert('Lee');
};

3.HTML事件

load:当页面完全加载后在window上面触发,或当框架集加载完毕后在框架集上触发。

window.onload = function () {
  alert('Lee');
};

 

unload:当页面完全卸载后在window上面触发,或当框架集卸载后在框架集上触发。

window.onunload = function () {
  alert('Lee');
};

select:当用户选择文本框(inputtextarea)中的一个或多个字符触发。

input.onselect = function () {
  alert('Lee');
};

change:当文本框(inputtextarea)内容改变且失去焦点后触发。

input.onchange = function () {
  alert('Lee');
};

focus:当页面或者元素获得焦点时在window及相关元素上面触发。

input.onfocus = function () {
  alert('Lee');
};

blur:当页面或元素失去焦点时在window及相关元素上触发。

input.onblur = function () {
  alert('Lee');
};

submit:当用户点击提交按钮在

元素上触发。

form.onsubmit = function () {
  alert('Lee');
};

reset:当用户点击重置按钮在

元素上触发。

form.onreset= function () {
  alert('Lee');
};

resize:当窗口或框架的大小变化时在window或框架上触发。

window.onresize = function () {
  alert('Lee');
};

scroll:当用户滚动带滚动条的元素时触发。

window.onscroll = function () {
  alert('Lee');
};

相关专题

更多
Java 桌面应用开发(JavaFX 实战)
Java 桌面应用开发(JavaFX 实战)

本专题系统讲解 Java 在桌面应用开发领域的实战应用,重点围绕 JavaFX 框架,涵盖界面布局、控件使用、事件处理、FXML、样式美化(CSS)、多线程与UI响应优化,以及桌面应用的打包与发布。通过完整示例项目,帮助学习者掌握 使用 Java 构建现代化、跨平台桌面应用程序的核心能力。

36

2026.01.14

php与html混编教程大全
php与html混编教程大全

本专题整合了php和html混编相关教程,阅读专题下面的文章了解更多详细内容。

18

2026.01.13

PHP 高性能
PHP 高性能

本专题整合了PHP高性能相关教程大全,阅读专题下面的文章了解更多详细内容。

37

2026.01.13

MySQL数据库报错常见问题及解决方法大全
MySQL数据库报错常见问题及解决方法大全

本专题整合了MySQL数据库报错常见问题及解决方法,阅读专题下面的文章了解更多详细内容。

19

2026.01.13

PHP 文件上传
PHP 文件上传

本专题整合了PHP实现文件上传相关教程,阅读专题下面的文章了解更多详细内容。

16

2026.01.13

PHP缓存策略教程大全
PHP缓存策略教程大全

本专题整合了PHP缓存相关教程,阅读专题下面的文章了解更多详细内容。

6

2026.01.13

jQuery 正则表达式相关教程
jQuery 正则表达式相关教程

本专题整合了jQuery正则表达式相关教程大全,阅读专题下面的文章了解更多详细内容。

3

2026.01.13

交互式图表和动态图表教程汇总
交互式图表和动态图表教程汇总

本专题整合了交互式图表和动态图表的相关内容,阅读专题下面的文章了解更多详细内容。

45

2026.01.13

nginx配置文件详细教程
nginx配置文件详细教程

本专题整合了nginx配置文件相关教程详细汇总,阅读专题下面的文章了解更多详细内容。

5

2026.01.13

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
ASP 教程
ASP 教程

共34课时 | 3.5万人学习

国外Web开发全栈课程全集
国外Web开发全栈课程全集

共12课时 | 1.0万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号