|
簡介 “DOM2級事件”定義了兩個(gè)方法，用于處理指定和刪除事件處理程序的操作：addEventListener() 和 removeEventListener()。 public override function addEventListener(type:String, listener:Function, useCapture:Boolean = false):void 他們都接受3個(gè)參數(shù)：要處理的事件名、作為事件處理程序的函數(shù)和一個(gè)布爾值。最后一個(gè)布爾值參數(shù)如果是true，表示在事件捕獲階段調(diào)用事件處理程序；如果是false，表示在事件冒泡階段調(diào)用事件處理程序。 使用 1.事件添加 addEventListener 可以在一個(gè)元素上多次添加事件。  var oDiv = document.getElementById("div1"); oDiv.addEventListener("click", function() { alert(this.id); }, false); oDiv.addEventListener("click", function() { alert("clicked me"); }, false); 點(diǎn)擊oDiv節(jié)點(diǎn)后，先輸出節(jié)點(diǎn)id“div1”，再輸出“clicked me”。 2.事件移除 addEventListener() 添加的事件處理程序只能使用 removeEventListener() 來移除；移除時(shí)傳入的參數(shù)與添加處理程序時(shí)使用的參數(shù)相同。這也就意味著通過 addEventListener() 添加的匿名函數(shù)將無法移除。 var oDiv = document.getElementById("div1"); oDiv.addEventListener("click", function() { alert(this.id); }, false); oDiv.removeEventListener("click", function() { alert(this.id); }, false); // 無效 雖然 removeEventListener() 看似使用了相同的參數(shù)，但是實(shí)際上傳入的那個(gè)是另一個(gè)完全不同的函數(shù)。所以如果想正確的移除事件，寫法如下所示。 var oDiv = document.getElementById("div1"); var handler = function() { alert(this.id); } oDiv.addEventListener("click", handler, false); oDiv.removeEventListener("click", handler, false); // 有效 討論 這里我們主要討論 useCapture 參數(shù)的用法。首先看一段代碼。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div id="div1" style="background: blue;width: 100px; height: 100px;"> <div id="div2" style="background: red;width: 70px; height: 70px;"> <div id="div3" style="background: yellow;width: 50px; height: 50px;"></div> </div> </div> <script type="text/javascript"> var oDiv1 = document.getElementById('div1'), oDiv2 = document.getElementById('div2'), oDiv3 = document.getElementById('div3'); oDiv1.addEventListener('click', showBlue, true); oDiv2.addEventListener('click', showRed, false); oDiv3.addEventListener('click', showYellow, true); function showBlue(){ //藍(lán) alert("blue"); } function showRed(){ //紅 alert("red"); } function showYellow(){//黃 alert("yellow"); } </script> </body> </html> 點(diǎn)擊div3之后，過程分為三個(gè)階段： 捕獲階段: 外-->里 在div1處檢測useCapture屬性為true，即事件捕獲階段會觸發(fā)事件，所以會執(zhí)行程序，輸出“blue”。在div2處檢測useCapture屬性為false，即事件冒泡階段才會觸發(fā)，所以不會執(zhí)行程序。 程序的運(yùn)行結(jié)果為：“blue”，“yellow”，“red”。 綠色通道：好文要頂 |
|
|
