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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。