简介 “DOM2级事件”定义了两个方法,用于处理指定和删除事件处理程序的操作:addEventListener() 和 removeEventListener()。 public override function addEventListener(type:String, listener:Function, useCapture:Boolean = false):void 他们都接受3个参数:要处理的事件名、作为事件处理程序的函数和一个布尔值。最后一个布尔值参数如果是true,表示在事件捕获阶段调用事件处理程序;如果是false,表示在事件冒泡阶段调用事件处理程序。 使用 1.事件添加 addEventListener 可以在一个元素上多次添加事件。 var oDiv = document.getElementById("div1"); oDiv.addEventListener("click", function() { alert(this.id); }, false); oDiv.addEventListener("click", function() { alert("clicked me"); }, false); 点击oDiv节点后,先输出节点id“div1”,再输出“clicked me”。 2.事件移除 addEventListener() 添加的事件处理程序只能使用 removeEventListener() 来移除;移除时传入的参数与添加处理程序时使用的参数相同。这也就意味着通过 addEventListener() 添加的匿名函数将无法移除。 var oDiv = document.getElementById("div1"); oDiv.addEventListener("click", function() { alert(this.id); }, false); oDiv.removeEventListener("click", function() { alert(this.id); }, false); // 无效 虽然 removeEventListener() 看似使用了相同的参数,但是实际上传入的那个是另一个完全不同的函数。所以如果想正确的移除事件,写法如下所示。 var oDiv = document.getElementById("div1"); var handler = function() { alert(this.id); } oDiv.addEventListener("click", handler, false); oDiv.removeEventListener("click", handler, false); // 有效 讨论 这里我们主要讨论 useCapture 参数的用法。首先看一段代码。 <!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(){ //蓝 alert("blue"); } function showRed(){ //红 alert("red"); } function showYellow(){//黄 alert("yellow"); } </script> </body> </html> 点击div3之后,过程分为三个阶段: 捕获阶段: 外-->里 在div1处检测useCapture属性为true,即事件捕获阶段会触发事件,所以会执行程序,输出“blue”。在div2处检测useCapture属性为false,即事件冒泡阶段才会触发,所以不会执行程序。 程序的运行结果为:“blue”,“yellow”,“red”。 绿色通道:好文要顶 |
|
来自: 昵称10504424 > 《工作》