JS中事件模型的實例詳解

　　之前對事件模型還是比較清楚的，許多概念都清楚地映射在腦海中。工作之後，一方面使用的
局限性，二是習慣於用框架中的各種事件監聽方式，簡單即方便，久而久之，事件的一些概念開
始淡出記憶中，就像我現在已經開始淡忘C語言的指針、麥克斯韋方程組、矩陣的變換、最小平方法
法等。知識就像五彩繽紛的鵝卵石鋪墊在你前行的道路上，從簡單到深刻，從深刻到領悟，一直
助你漸行漸遠。回頭看看事件模型唄。

一、事件簡簡介
事件包含:
滑鼠事件
鍵盤事件
框架事件onerror onresize onscroll等
表單事件的#過渡事件
其他事件等

事件被封裝成物件,包括
目標事件物件
事件監聽物件
滑鼠事件物件
鍵盤事件物件等

他們包含了各自的屬性和方法，也繼承自Event這個物件。具體看你W3C就OK了。

常用方法：
event. preventDefault()//阻止元素預設的行為，如連結的跳躍、表單的提交；
event. stopPropagation()//阻止事件冒泡



二、事件的三種模型

1、原始事件模型（DOM0級）  　 特點：原始事件模型中，事件發生後沒有傳播的概念，沒有事件流。事件發生，立即處理。 監聽函數只是元素的一個屬性值，透過指定元素的屬性值來綁定監聽器。書寫方式有兩種：
　　HTML:      js  :  document.getElementsById('btn').onlickctn = func. ##　　優點：所有瀏覽器都相容

　　缺點：

       a、邏輯與顯示沒有分離；

       b、相同事件的監聽函式的會覆蓋掉前面的。
       c、無法通過事件的冒泡、委託等機制等。

　　在當前web程式模組化開發以及更加複雜的邏輯狀況下，這種方式顯然已經落伍了，所以在真

正項目中不推薦使用，平時寫點demo倒是可以，速度比較快。

 2、IE事件模型

  特點：IE是將event物件在處理函數中設為window的屬性，一旦函數執行結束，便被置為null

了。
  IE的事件模型只有兩步，先執行元素的監聽函數，然後事件沿著父節點一直冒泡到document。

  綁定解除監聽函數的方法：

  attachEvent( "eventType","handler")，其中evetType為事件的類型，如onclick，注意要加#’on’。   解除事件監聽器的方法是 detachEvent("eventType","handler" )；
  缺點：就是只能IE自己用，太高冷了。


 3、 DOM2事件模型

 在 W3C 2 級 DOM 事件中規範了事件模型，也就是 DOM2事件模型。現代瀏覽器(IE9以下不算)都遵照
循了這個規範。
 特點：

 W3C所製定的事件模型中，一次事件的發生包含三個過程：

　　a、事件擷取階段。事件被從document一直向下傳播到目標元素,在這過程中依次檢查經過的節          點是否註冊了該事件的監聽函數，若有則執行。  　　b、事件處理階段。事件到達目標元素,執行目標元素的事件處理函數.
 　　c、事件冒泡階段。事件從目標元素上升一直到達document，同樣依序檢查經過的節點是否註冊
了該事件的監聽函數，有則執行。

　
 注意：
所有的事件類型都會經歷事件捕獲階段，但是只有部分事件會經歷事件冒泡階段,例如
submit事件就不會被冒泡。

綁定解除監聽函數的方法：

 addEventListener("eventType","handler","true|false");其中eventType指事件類型，注意

不要加上'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中文網其他相關文章！