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

最新推荐文章于 2023-12-28 22:21:48 发布

郑敬儒~

最新推荐文章于 2023-12-28 22:21:48 发布

阅读量634

点赞数 3

分类专栏： Javascript 文章标签： js

本文链接：https://blog.csdn.net/qq_45830543/article/details/114681084

版权

Javascript 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>事件绑定与监听的区别</title>
  </head>

  <body>
    <button id="btnA">按钮A</button>
    <button id="btnB">按钮B</button>
    <script type="text/javascript">
      var btnA = document.getElementById("btnA");
      var btnB = document.getElementById("btnB");
      btnA.onclick = function () {
        alert("点第一下");
      };
      btnA.onclick = function () {
        alert("点第二下");
      };

      btnB.addEventListener(
        "click",
        function (event) {
          alert("点第一下");
        },
        false
      );

      btnB.addEventListener(
        "click",
        function (event) {
          alert("点第二下");
        },
        false
      );
    </script>
  </body>
</html>

根据上述代码，我们首选给按钮A 依次绑定了两个 onclick 事件，然后给按钮B 依次监听了两个 onclick 事件；
但是结果我们发现，当我们点击按钮A时，无论是第几次点击，永远只会弹出 ‘点第二下’；当我们点击按钮B时，不论是第几次点击，每次点击都会
依次弹出 ‘点第一下’和‘点第二下’

使用on事件名的形式绑定事件后绑定会覆盖前面绑定的事件，也就是最后一个绑定的事件会生效；

使用addEventListener绑定事件则不会覆盖，可同时在一个元素上绑定多个相同的事件。

郑敬儒~

关注

3
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
事件绑定和事件监听的区别

<!DOCTYPE html><html> <head> <meta charset="UTF-8" /> <title>事件绑定与监听的区别</title> </head> <body> <button id="btnA">按钮A</button> <button id="btnB">按钮B</button>
复制链接

扫一扫

专栏目录