JavaScript事件绑定和事件监听的区别

最新推荐文章于 2025-07-03 09:56:07 发布

原创最新推荐文章于 2025-07-03 09:56:07 发布 · 8.6k 阅读

11 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #事件监听

JavaScript 专栏收录该内容

59 篇文章

订阅专栏

本文探讨了HTML中事件处理机制的区别，包括onclick事件的单次触发特性及其如何被覆盖，以及addEventListener方法支持的多事件监听功能。通过示例说明了不同事件处理方式的工作原理和执行顺序。

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

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
</head>
<body>
    <!--普通事件中的onclick事件只支持单个事件，会被其他onclick事件覆盖，(重点！！！)
        有两种写法:
        一是在标签内写onclick事件
　　　　 二是在JS里面写onlicke=function（）{}

        事件监听中的addEventListener可以添加多个事件而不用担心被覆盖
        只有一种写法：监听方法
    -->

    <!--第一种写法    不执行-->
    <input id="myButton" type="button" value="点我" onclick="alert('普通事件1');">  

    <script type="text/javascript">
        document.getElementById("myButton").onclick=function () {
            alert('普通事件2');       //第二种写法  会将上面的alert('普通事件1')覆盖  
        }

        //事件监听添加两个事件.  监听可以对同一件事情添加多个监听的事件
        document.getElementById("myButton").addEventListener('click', a);  
        document.getElementById("myButton").addEventListener('click', b);  //不能用onclick
        function  a() {
            alert('事件监听1');  //执行
        }
        function  b() {
            alert('事件监听2');//执行
        }
    </script>
</body>
</html>

这里顺便提一下addEventListener这个函数
函数原型：addEventListener(event, function, useCapture)，重点是第三个参数，这个参数设置了事件的传递类型，默认值为 false, 即冒泡传递，当值为 true 时, 事件使用捕获传递。
如下图：
这里写图片描述

再举一个栗子：


document.addEventListener('click',functiona(){ },false) ;
document.addEventListener('click',functionb(){ },false) ;
<div onclick="functionb">
    <div onclick = "functiona">
           点击先触发哪个事件？
    </div>
</div>
点击文本两个div事件同时响应，此时先后顺序是:
如果为false 则阻止捕获，先响应functiona,在响应functionb，否则，响应顺序相反。