JS 给指定元素添加事件 及 移除 - addEventListener()

一、语法:

element.addEventListener(eventfunctionuseCapture)

event:指定事件名, 不要使用 "on" 前缀。 eg:使用 "click" ,而不是使用 "onclick"

function 指定要事件触发时执行的函数

useCapture :可选。布尔值,指定事件是否在捕获或冒泡阶段执行

  • true - 事件句柄在捕获阶段执行
  • false- false- 默认。事件句柄在冒泡阶段执行

二、使用:

 1 // 给 button 添加 click 事件
 2 <body>
 3   <button id="btn">点击</button>
 4 </body>
 5 
 6 <script>
 7   var btn = document.getElementById('btn');
 8   btn.addEventListener('click',function(){
 9     alert(0);
10   })
11   btn.addEventListener('click',function(){
12     alert(1);
13     })
14   btn.addEventListener('click',function(){
15     alert(2);
16   })
17 </script>

效果图:

三、区别于.onclick = function(){}

.onclick = function() {} 只会执行 最后一个 alert();

四、移除 addEventListener() 方法添加的事件

document.getElementById("myDIV").romoveEventListener("要移除的事件名称(不带on)",要移除的函数);

posted @ 2020-08-16 01:48  九鹤  阅读(1377)  评论(0编辑  收藏  举报