zoukankan      html  css  js  c++  java
  • js onclick与addEventListener 区别及用法

    addEventListener(建议使用)好比一个监听容器,这个容器里面可以装很多个监听事件,而且每一个事件都会执行。

    onclick 在今天之前我使用这个(onclick)比较多(单纯的是因为看到的基本都是用这个,有个缺点就是同一个元素绑定两个不同的事件前一个事件会被后一个事件覆盖。

    今天在公司问了一下这两个的区别,印象很深刻,自己也验证了一下,我这里上一段我的验证代码(代码里面的‘222’会被覆盖不弹出),大家也可以试一下:

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>onclick and addEventListener</title>
            <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" />
        </head>
        <body>
            <div id="btnOk1">111</div>
            <script>
                document.getElementById('btnOk1').addEventListener('click',function(){
                    alert('111');
                });
                document.getElementById('btnOk1').addEventListener('click',function(){
                    alert('333');
                });
                document.getElementById('btnOk1').onclick = function(){
                    alert('222');
                }
                document.getElementById('btnOk1').onclick = function(){
                    alert('444');
                }
            </script>
        </body>
    </html>

  • 相关阅读:
    P5047 [Ynoi2019 模拟赛] Yuno loves sqrt technology II
    P4887 【模板】莫队二次离线(第十四分块(前体))
    SP20644 ZQUERY
    企业战略管理【0612】
    管理经济学【0812】
    商务沟通[0664]
    国际企业管理【0813】
    社区管理【0272】
    战略管理【1059】
    管理沟通【1279】
  • 原文地址:https://www.cnblogs.com/l-520/p/8882399.html
Copyright © 2011-2022 走看看