JavaScript事件模型详解:冒泡、捕获与兼容处理
本文深入解析JavaScript事件模型,涵盖冒泡与捕获机制。重点介绍如何在IE与DOM标准中获取兼容的event对象,包括srcElement与target的使用。详细对比attachEvent与addEventListener在监听器注册及执行顺序上的差异,并提供取消事件传递与默认行为的兼容代码示例。
本文通过具体实例解析JavaScript事件模型的应用方式,旨在为读者提供参考。
事件模型:冒泡与捕获机制
一、事件模型
冒泡型事件(Bubbling)指事件从叶子节点沿祖先节点向上传递至根节点。捕获型事件(Capturing)则相反,从DOM树最顶层元素传递至最精确的目标元素。DOM标准事件模型结合了两者:先经历捕获阶段,随后进行冒泡传递。
事件对象:IE与DOM标准的兼容处理
二、事件对象
在IE浏览器中,事件对象作为window对象的属性存在;而在DOM标准中,event必须作为唯一参数传递给事件处理函数。
获取兼容的event对象的方法如下:
function(event){
//event 是作为DOM标准的参数传入处理函数
event = event ?event : window.event;
}
在IE环境中,事件对象存储于event.srcElement属性中;而在DOM标准中,则位于event.target属性内。获取兼容指向元素的代码如下:
var target =event.srcElement ? event.srcElement : event.target ;
上述操作的前提是event对象已被正确获取。
事件监听器:注册与执行顺序
三、事件监听器
在IE环境下,注册的监听器按逆序执行,即后注册的监听器会先执行。
element.attachEvent('onclick',observer); //注册监听器
element.detachEvent('onclick',observer) //移除监听器
注册监听时,第一个参数为事件名称,第二个参数为回调处理函数。
在DOM标准下:
element.addEventListener('click',observer,useCapture)
element.removeEventListener('click',observer,useCapture)
第一个参数为事件名称,无需添加“on”前缀;第二个参数为回调处理函数;第三个参数指定回调函数在捕获阶段还是冒泡阶段调用,默认值为true,表示在捕获阶段调用。
事件传递:取消冒泡与默认行为
四、事件传递
以下是兼容地取消浏览器事件传递的方法:
function someHandler(event){
event = event || window.event;
if(event.stopPropagation) //DOM标准
event.stopPropagation();
else
event.cancelBubble = true; //IE标准
}
若要取消事件传递后的默认处理行为,可参考以下兼容写法:
function someHandler(event){
event = event || window.event;
if(event.preventDefault) //DOM标准
event. preventDefault ();
else
event.returnValue = true; //IE标准
}
希望本文所述对大家的javascript程序设计有所帮助。
anime.js 快速入门:怎么引入库并编写第一个 DOM 动画
2026-11-05 14:22:43
在线JS解密后变量名仍乱码?结合浏览器DevTools调试还原
2026-11-04 20:26:01
怎么在浏览器中运行JavaScript代码并查看输出结果
2026-11-04 09:07:33
JS 获取屏幕分辨率:window.screen.width 与 height 用法
2026-11-04 08:52:48
为什么推荐用DOMContentLoaded代替window.onload初始化JS
2026-11-04 08:42:33
