【JavaScript高级程序设计】17、关于DOM2的事件捕获机制 

<!Doctype html>
<html lang="en">
    <head>
        <title>DOM Level 2 Event Handler Example</title>
    </head>
    <body>
        <input type="button" id="myBtn" value="Click Me" />
        <p>This example won't work in Internet Explorer.</p>
        <script type="text/javascript">
            var btn = document.getElementById("myBtn");

            var handler1 = function(){ alert("this is first function!!!"); }
            var handler2 = function(){ alert("this is second function!!!"); }

            //这里添加2个事件监听，但是取消一个，结果只有一个显示结果
            btn.addEventListener("click", handler1, false);    //false是从具体到抽象，就是冒泡机制
            btn.removeEventListener("click", handler1, false);    //true代表是事件捕获机制，由抽象到具体
            btn.addEventListener("click", handler2, true);
        </script>
    </body>
</html>

 

事件取消中，如果那个函数参数是匿名函数，那么就无法取消这个事件。只能通过函数变量名去取消函数

 

显示结果：

 

 

 不过注意，IE浏览器并不支持addEventListener和remove这两个方法，也就是没有这两个方法

 

 IE中使用attachEvent和detachEvent来代替以上的两个方法。

 

posted @ 2016-07-31 23:01  cutter_point  阅读(107)  评论(0)    收藏  举报