码迷,mamicode.com
首页 > Web开发 > 详细

js onclick与addEventListener 区别及用法

时间:2018-04-19 14:57:51      阅读:194      评论:0      收藏:0      [点我收藏+]

标签:代码   UNC   nbsp   ice   事件   listen   scala   很多   区别   

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>

js onclick与addEventListener 区别及用法

标签:代码   UNC   nbsp   ice   事件   listen   scala   很多   区别   

原文地址:https://www.cnblogs.com/l-520/p/8882399.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!