JavaScript的事件机制详解
作者:熊仔其人 时间:2024-05-03 15:58:45
事件是将JavaScript脚本与网页联系在一起的主要方式,是JavaScript中最重要的主题之一,深入理解事件的工作机制以及它们对性能的影响至关重要。本文将详细探讨JavaScript的事件机制,并对比分析了浏览器之间的不同,具体内容包括事件流、事件处理程序绑定方式、事件对象等。
如何理解事件?
JavaScript与HTML之间的交互就是通过事件实现的。
事件:用户或浏览器自身执行的某种动作,换言之,文档或浏览器发生的一些特定的交互瞬间。
事件处理程序:又称事件 * ,事件发生时执行的代码段。
事件流:事件流描述的是从页面中接收事件的顺序。
两种基本事件模型
事件冒泡:事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发。
事件捕获:事件从最不精确的对象(document 对象)开始触发,然后到最精确。
IE9、Safari、Chrome、Opera、Firefox都是从window对象开始捕获,冒泡到window对象
DOM事件流
同时支持 两种基本事件模型,规定事件流包括三个阶段:事件捕获阶段、处于目标阶段、事件冒泡阶段。
DOM事件处理程序绑定时,程序员可以自己选择绑定事件时采用事件捕获还是事件冒泡。
IE事件流
IE只支持事件冒泡,不支持事件捕获。
事件处理程序绑定方式
DOM事件处理程序
DOM事件处理程序属性名为“on”+事件名,程序作用域为元素的作用域,this指向元素本身。
方法一:将函数值赋给一个事件处理程序属性。如下:
var btn= document.getElementById("myBtn");
btn.onclick = function{ //具体代码段 }
注意:此种方法只能添加一个事件处理程序
方法二:通过addEventListener方法。如下:
addEventListener("事件名",事件处理程序,ture/false:在事件捕获/冒泡阶段调用模型)
对应的事件处理程序移除方法:removeEventListener,参数必须相同。
注意:此种方法,以匿名函数添加的事件处理程序无法被移除
此方法可以添加多个事件处理程序
IE事件处理程序
IE+Oprea浏览器
程序作用域为全局作用域,this指向window对象
添加方法:attachEvent("on+事件名",事件处理程序)
移除方法:detachEvent("on+事件名",事件处理程序)
事件对象
在触发某个事件时,会产生一个相应的事件对象,这个对象包含所有与事件相关的信息。如:导致事件的元素、事件的类型等
DOM中的事件对象
对象名:event
常用属性:
type:被触发事件的类型
target:事件的目标
常用方法:
event.preventDefault:取消事件默认行为(前提:cancelable属性值为true)
event.stopPropagation:取消事件的进一步冒泡或捕获
IE中的事件对象
对象名:window.event
常用属性:
type:被触发事件的类型
scrElement:事件的目标
常用方法:
event.cancelBubble(true/false):true->取消事件默认行为
event.returnValue(true/false):false->取消事件的进一步冒泡或捕获
综合以上所述,整理代码写可跨浏览器的事件处理程序(构造EventUtil对象,为其添加可兼容各浏览器的事件处理方法),如下:
/*可跨浏览器的事件处理程序
构造EventUtil对象,为其添加可兼容各浏览器的事件处理方法
*/
var EventUtil = {
/*添加事件处理程序*/
addHandler: function (element, type, handler) {
if (element.addEventListener) {
addEventListener(type, handler, false);
} else if (element.attachEvent) {
attachEvent("on" + type, handler);
} else {
element["on" + type] = handler;
}
},
/*移除事件处理程序*/
removeHandler: function (element, type, handler) {
if (element.removeEventListener) {
removeEventListener(type, handler, false);
} else if (element.detachEvent) {
detachEvent("on" + type, handler);
} else {
element["on" + type] = null;
}
},
/*获得事件对象*/
getEvent: function (event) {
return event ? event : window.event;
},
/*获得事件的目标*/
getTarget: function (event) {
return event.target || event.scrElement;
},
/*取消事件的默认行为*/
preventDefault: function (event) {
if (event.preventDefault) {
event.preventDefault;
} else {
event.returValue = false;
}
},
/*阻止事件进一步冒泡*/
stopPropagation: function (event) {
if (event.stopPropagation) {
event.stopPropagation;
} else {
event.cancelBubble = true;
}
}
};
来源:http://www.cnblogs.com/xiongzaiqiren/p/6289499.html
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
关于python 的legend图例,参数使用说明
![](https://img.aspxhome.com/file/2023/1/78661_0s.jpg)
Python ORM框架SQLAlchemy学习笔记之安装和简单查询实例
Java字符串 正则表达式详解
vue2/vue3路由权限管理的方法实例
JS中把函数作为另一函数的参数传递方法(总结)
微信小程序学习笔记之文件上传、下载操作图文详解
![](https://img.aspxhome.com/file/2023/6/56236_0s.gif)
javaScript让文本框内的最后一个文字的后面获得焦点实现代码
![](https://img.aspxhome.com/file/2023/4/136734_0s.jpg)
解决Python图形界面中设置尺寸的问题
![](https://img.aspxhome.com/file/2023/7/100787_0s.jpg)
PHP中非常有用却鲜有人知的函数集锦
pandas创建series的三种方法小结
python实现字符串完美拆分split()的方法
用PyInstaller把Python代码打包成单个独立的exe可执行文件
![](https://img.aspxhome.com/file/2023/9/120269_0s.png)
Go语言题解LeetCode下一个更大元素示例详解
python根据照片获取地理位置及泄露防御
![](https://img.aspxhome.com/file/2023/8/112408_0s.png)
创建SparkSession和sparkSQL的详细过程
![](https://img.aspxhome.com/file/2023/3/77863_0s.jpg)
Python selenium键盘鼠标事件实现过程详解
Mysql数据库之索引优化
![](https://img.aspxhome.com/file/2023/1/107891_0s.png)
js模拟类继承小例子
详解python3安装pillow后报错没有pillow模块以及没有PIL模块问题解决
![](https://img.aspxhome.com/file/2023/3/85043_0s.png)