js onclick与addEventListener 区别及用法

时间 2019-11-11

标签 onclick addeventlistener 区别用法栏目 JavaScript 繁體版

原文原文链接

addEventListener(建议使用)比如一个监听容器，这个容器里面能够装不少个监听事件，并且每个事件都会执行。html

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

今天在公司问了一下这两个的区别，印象很深入，本身也验证了一下，我这里上一段个人验证代码(代码里面的‘222’会被覆盖不弹出)，你们也能够试一下：htm

<!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>事件