事件模型 · Web前端(打印用)

## 事件模型事件是一種異步編程的實現方式。本質上程序各個組成部分之間的通信。DOM支持大量的事件。 ### 1. EventTarget接口 DOM的事件操作（監聽和觸發），都定義在EventTarget接口上。Element節點、document節點和window對象，都部署了這個接口。該接口有三個重要的方法： * addEventListener：綁定事件的監聽函數 * removeEventListener：移除事件的監聽函數 * dispatchEvent：觸發事件 1. addEventListener 該方法用于在當前節點或對象上，定義一個特定時間的監聽函數示例 ~~~javascript // 語法：target.addEventListener(type,listenerFunc,false); window.addEventListener("load", function(){ alert("hello listener"); }); document.getElementById("btn2").addEventListener("click",function(){ alert("hello, button"); }); ~~~ > type：事件的名稱，大小寫敏感 > listenerFunc：監聽函數，事件發生時，會調用這個函數 2. removeEventListener() 移除addEventListener方法添加的事件監聽函數 ~~~javascript var btn2Click = function() { alert("hello, button"); }; document.getElementById("btn2").addEventListener("click", btn2Click); document.getElementById("btn3").addEventListener("click",function(){ document.getElementById("btn2").removeEventListener("click",btn2Click); }); ~~~ 3. dispatchEvent()：一般不怎么使用 ### 2.監聽函數監聽函數是事件發生時，程序所要執行的函數。它是事件驅動編程模式的主要編程方式。在DOM中提供三種方法為事件綁定監聽函數。 1. HTML標簽的on-屬性 HTML語言允許在元素標簽的屬性中，直接定義某些事件的監聽代碼。 ~~~ <body onload="alert('hello');alert('world');"> </body> ~~~ 2. Element節點的事件屬性 Element節點對象有事件屬性，同樣可以指定監聽函數。 ~~~javascript var btn4Func = function() { alert("hello"); }; document.getElementById("btn4").onclick = btn4Func; ~~~ 3. addEventListener方法 ### 3.事件的種類 **鼠標事件** 鼠標事件是指與鼠標操作相關的事件 click事件、dblclick事件 mouseup事件（釋放按下鼠標時觸發）、mousedown事件（按下鼠標鍵時觸發）、mousemove事件（鼠標在某個節點內部移動時觸發） mouseover事件、mouseenter事件都是鼠標進入一個節點時觸發，區別是mouseenter只執行一次，而mouseover會在子節點上觸發多次。 ~~~javascript document.getElementById("ul1").addEventListener("mouseenter", function(event){ event.target.style.color = "red"; }); ~~~ mouseout事件、mouseleave事件都是鼠標離開節點時觸發，mouseout事件會冒泡，mouseleave事件不會。 contextmenu事件（節點上點擊鼠標右鍵時觸發或者按下上下文菜單鍵時觸發） **事件冒泡和捕獲** 事件流包含三個階段：事件捕獲階段，處于目標階段和事件冒泡階段。首先發生的是事件捕獲，然后是實際的目標接收到事件，最后階段是冒泡階段。 ![](https://box.kancloud.cn/b80d7800bf4876cf0344dadaac283030_329x173.png) ~~~ <div id="myDiv"></div> var div=document.getElementById("myDiv"); console.log(div); div.onclick=function(event){ alert("div"); }; document.body.addEventListener("click",function(event){ alert("event bubble"); },false); document.body.addEventListener("click",function(event){ alert("event catch"); },true); ~~~