Dom对象事件注册和取消(addEventListener/attachEvent)_attachevent 取消注册-优快云博客

本文详细介绍了addEventListener方法的使用，包括其三个参数的含义与作用，特别是第三个参数useCapture的解释。通过示例展示了不同浏览器下事件注册及触发顺序的区别，并提供了事件队列注册与取消的具体实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

addEventListener的参数一共有三个，语法为：

element.addEventListener(type,listener,useCapture)

下面是详解

其中element是要绑定函数的对象。
type是事件名称，要注意的是"onclick"要改为"click","onblur"要改为"blur",也就是说事件名不要带"on"。
listener当然就是绑定的函数了，记住不要跟括号
最后一个参数是个布尔值，表示该事件的响应顺序,下面重点介绍一下addEventListener的第3个参数(useCapture)。

userCapture若为true,则浏览器采用Capture,若为false则采用bubbing方式。建议用false,看个例子吧。

1.兼容性判断和简单事件注册实例：

     

     

  

  

     

//对于IE浏览器不支持addEventListener if (window.addEventListener) { alert("支持addEventListener"); } else { alert("不支持addEventListener"); } //对于Google浏览器不支持attachEvent if (window.attachEvent) { alert("支持attachEvent"); } else { alert("不支持attachEvent"); }     //IE下注册onLoad事件(先注册后触发) window.attachEvent("onload", funcOne); window.attachEvent("onload", funcTwo);        //Google浏览器下注册onload事件（先注册先触发） window.addEventListener('load', funcOne, false); window.addEventListener('load', funcTwo, false); function funcOne() { alert("funcOne"); } function funcTwo() { alert("funcTwo"); }

2.事件队列注册和取消：

    <script type="text/javascript">
        window.onload = function () {
            var btnOne = document.getElementById("btnOne");
            //IE下注册事件，先注册后触发
            //btnOne.attachEvent("onclick", funcOne);
            //btnOne.attachEvent("onclick", funcTwo);

            //Goole下注册事件,(先注册先触发)
            btnOne.addEventListener('click', funcOne, false);
            btnOne.addEventListener('click', funcTwo, false);
        }
        function revmoeClick() {
            var btnOne = document.getElementById("btnOne");
            //IE下取消注册
            //btnOne.detachEvent("onclick", funcOne);
            //btnOne.detachEvent("onclick", funcTwo);

            //Goole下取消注册事件
            btnOne.removeEventListener('click', funcOne, false);
            btnOne.removeEventListener('click', funcTwo, false);
        }

        function funcOne() {
            alert("funcOne");
        }
        function funcTwo() {
            alert("funcTwo");
        }
    </script>
</head>
<body>
    <input  type="button" id="btnTwo" value="取消注册事件" onclick="revmoeClick()"/>
    <hr />
    <input  type="button" id="btnOne" value="事件按钮"/>
</body>
</html>