之前對事件模型還是比較清楚的，許多概念都清楚地映射在腦海中。工作之後，一方面使用的
局限性，二是習慣於用框架中的各種事件監聽方式，簡單即方便，久而久之，事件的一些概念開
始淡出記憶中，就像我現在已經開始淡忘C語言的指針、麥克斯韋方程組、矩陣的變換、最小平方法
法等。知識就像五彩繽紛的鵝卵石鋪墊在你前行的道路上，從簡單到深刻，從深刻到領悟，一直
助你漸行漸遠。回頭看看事件模型唄。
一、事件簡簡介
事件包含:
滑鼠事件
鍵盤事件
框架事件onerror onresize onscroll等
表單事件的#過渡事件
其他事件等
事件被封裝成物件,包括
目標事件物件
事件監聽物件
滑鼠事件物件
鍵盤事件物件等
常用方法：
event. preventDefault()//阻止元素預設的行為，如連結的跳躍、表單的提交；
event. stopPropagation()//阻止事件冒泡
二、事件的三種模型
1、原始事件模型（DOM0級） 特點：原始事件模型中，事件發生後沒有傳播的概念，沒有事件流。事件發生，立即處理。 監聽函數只是元素的一個屬性值，透過指定元素的屬性值來綁定監聽器。書寫方式有兩種：
HTML: js : document.getElementsById('btn').onlickctn = func. ## 優點：所有瀏覽器都相容
缺點：
b、相同事件的監聽函式的會覆蓋掉前面的。
c、無法通過事件的冒泡、委託等機制等。
在當前web程式模組化開發以及更加複雜的邏輯狀況下，這種方式顯然已經落伍了，所以在真
正項目中不推薦使用，平時寫點demo倒是可以，速度比較快。
2、IE事件模型
了。
IE的事件模型只有兩步，先執行元素的監聽函數，然後事件沿著父節點一直冒泡到document。
attachEvent( "eventType","handler")，其中evetType為事件的類型，如onclick，注意要加#’on’。 解除事件監聽器的方法是 detachEvent("eventType","handler" )；
缺點：就是只能IE自己用，太高冷了。
3、 DOM2事件模型
在 W3C 2 級 DOM 事件中規範了事件模型，也就是 DOM2事件模型。現代瀏覽器(IE9以下不算)都遵照
循了這個規範。
特點：
a、事件擷取階段。事件被從document一直向下傳播到目標元素,在這過程中依次檢查經過的節 點是否註冊了該事件的監聽函數，若有則執行。 b、事件處理階段。事件到達目標元素,執行目標元素的事件處理函數.
c、事件冒泡階段。事件從目標元素上升一直到達document，同樣依序檢查經過的節點是否註冊
了該事件的監聽函數，有則執行。
注意：
所有的事件類型都會經歷事件捕獲階段，但是只有部分事件會經歷事件冒泡階段,例如
submit事件就不會被冒泡。
綁定解除監聽函數的方法：
不要加上'on'前綴，與IE下不同。 第二個參數是處理函數，第三個即用來指定是否在擷取階段進true擷取階段 false 只有冒泡階段
監聽器的解除也類似：removeEventListner("eventType", "handler","true!false");
相容IE和現代瀏覽器的事件註冊監聽寫法
var a = document.getElementById('XXX');
if(a.attachEvent){
a.attachEvent('onclick',func);
}
else{//IE9以上和主流浏览器
a.addEventListener('click',func,false);
}现有的框架和类库都会对适应各种浏览器做兼容性的封装，JQuery底层即使用了上面的兼容性写法。
三、事件的捕获-冒泡机制
DOM2标准中，一次事件的完整过程包括三步：捕获→执行目标元素的监听函数→冒泡，在捕获和
冒泡阶段，会依次检查途径的每个节点，如果该节点注册了相应的监听函数，则执行监听函数。
以如下HTML结构为例子，执行流程应该是这样的:
<div id="parent">
父元素
<div id="child">子元素</div>
</div>
运行一下一目了然。
var parent= document.getElementById('parent');
console.dir(parent);
var child = document.getElementById('child');
parent.addEventListener('click',function(){alert('父亲在捕获阶段被点
击');},true);//第三个参数为true
child.addEventListener('click',function(){alert('孩子被点击了');},false);
parent.addEventListener('click',function(){alert('父亲在冒泡阶段被点击
了');},false);//第三个参数为false
可以看到，第三个即用来指定是否在捕获阶段进 true捕获阶段，false没有捕获阶段 。
如果不想让事件向上冒泡，可以在监听函数中调用event.stopPrapagation()来完成，后面会有应
用的栗子。
四、事件委托机制
委托就是把事件监听函数绑定到父元素上，让它的父辈来完成事件的监听，这样就把事情“委托
”了过去。在父辈元素的监听函数中，可通过event.target属性拿到触发事件的原始元素，然后
再对其进行相关处理。
五、jQuery中的事件监听方式
jQuery中提供了四种事件监听方式，分别是bind、live、delegate、on，对应的解除监听的
函数分别是unbind、die、undelegate、off。这几个方法已经对各种浏览器的兼容性进行封装。
具体方法可以查看手册。
注意几点:
jQuery推荐事件的绑定都使使用on方法
jQuery默认事件不在捕获中进行
六、什么是自定义事件
张鑫旭的《js-dom自定义事件》
七、一个简单例子
点击弹窗之外任何地方，弹框关闭。
方法：给body绑定事件，在事件的执行函数里关闭弹框；
给弹框元素绑定点击事件，在事件的执行函数里面组织事件冒泡，即：
event.stopPrapagation()；
以上是JS中事件模型的實例詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！
