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>

版权声明：本文为l-520原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/l-520/articles/8882378.html