本文深入解析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程序设计有所帮助。