JS onclick和addEventListener区别：事件绑定、顺序与移除

摘要

在Web开发中，为DOM元素绑定事件处理程序时，最直观的方式通常是通过“on”加事件名称的属性（如onclick）。然而，根据W3C DOM Level 2规范，推荐使用更灵活的方法来处理事件的指定与移除操作。

这些方法包括addEventListener()和removeEventListener()。

这两个方法均接收三个参数：第一个参数指定要处理的事件类型名称；第二个参数是作为事件处理程序的函数；第三个参数是一个布尔值，用于控制事件触发的阶段。

当第三个参数为false时，事件处理函数将在冒泡阶段执行；若设置为true，则事件处理程序将在捕获阶段被调用。

区别

同时绑定多个事件

这里需要探讨一个问题：使用onclick属性是否允许为同一个按钮绑定多个独立的事件处理逻辑？

下面通过具体示例进行验证：

    <button id="btn">点击</button>
    <script>
        btn.onclick = function(){
            console.log('第一次点击');
        }
        btn.onclick = function(){
            console.log('第二次点击');
        }
    </script>

观察运行结果，查看两次点击日志是否都会打印：

结果显示仅第二次绑定的逻辑生效。这表明，通过onclick属性重复赋值会覆盖前一次绑定的事件处理程序，导致之前的绑定失效。

接下来，我们使用addEventListener方法进行同样的操作：

    <button id="btn">点击</button>
    <script>
        btn.addEventListener('click',()=>{console.log('第一次点击');},false);
        btn.addEventListener('click',()=>{console.log('第二次点击'),false});
    </script>

查看此时的运行结果：

可以看到，通过addEventListener方法，我们能够成功为同一元素绑定多个事件处理程序，且所有绑定的事件都会依次执行。

决定事件触发顺序

首先分析以下代码逻辑：

    <div id="div1">
        <button id="btn">点击</button>
    </div>
    <script>
        div1.onclick = function(){
            console.log('div1的事件');
        }
        btn.onclick = function(){
            console.log('btn的事件');
        }
    </script>

假设点击按钮，我们需要预判打印输出的顺序是怎样的？

从结果可以看出，执行顺序是从内层元素向外层元素传播，即遵循事件冒泡机制。

如果换用另一种绑定方式：

    <div id="div1">
        <button id="btn">点击</button>
    </div>
    <script>
        btn.onclick = function(){
            console.log('btn的事件');
        }
        div1.addEventListener('click',()=>{console.log('div1的事件');},true);
    </script>

此时我们将div1的事件通过addEventListener方式绑定，并将第三个参数设置为true。

最终得到的运行结果如下：

由此可见，使用第二种方法（addEventListener）允许开发者精确控制DOM事件流的触发方式，既可以选择事件冒泡，也可以选择事件捕获。

removeEventListener的使用方法

该方法用于移除DOM元素上指定的事件处理程序。如果目标是移除onclick绑定的事件，只需将该属性值设为null即可。

那么，如何正确移除通过addEventListener绑定的事件呢？请看以下代码示例：

        div1.addEventListener('click',()=>{console.log('div1的事件');},true);
        div1.removeEventListener('click',()=>{console.log('div1的事件');},true);

执行上述代码后，事件是否会被成功移除？答案是否定的。尽管两个回调函数的代码内容相同，但在JavaScript中它们是两个完全不同的函数实例。因此，若想正确移除某个事件，必须确保移除时引用的处理程序与绑定时完全一致：

        var fn = function(){
            console.log('div1的事件');
        }
        div1.addEventListener('click',fn,true);
        div1.removeEventListener('click',fn,true);

只有采用这种方式，确保add与remove使用的是同一个函数引用，才能有效删除绑定的事件。

至此，关于JavaScript中onclick与addEventListener使用区别的介绍已完成。如需了解更多JS onclick与addEventListener的区别内容，请搜索本站历史文章或继续浏览后续相关文章，感谢大家的支持！

JavaScript中onclick与addEventListener的区别详解

摘要

区别

同时绑定多个事件

决定事件触发顺序

removeEventListener的使用方法

实用工具推荐