JS 给指定元素添加事件 及 移除 - addEventListener()
一、语法:
element.addEventListener(event, function, useCapture)
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)",要移除的函数);