句柄式监听document.getElementById("btn").addEventListener("click",function(){})
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <p id="div">hello</p> <button onclick="demo()">按钮1</button> <button id="btn">按钮2</button> <button id="btn_many">添加多个句柄事件</button> <script> // 以前的监听 function demo(){ document.getElementById("div").innerHTML = "改变" } // 句柄式监听 document.getElementById("btn").addEventListener("click", function(){ alert("句柄监听事件"); } ); // 声明多个句柄 var x = document.getElementById("btn_many"); x.addEventListener("click",hello); x.addEventListener("click",world); // 移出句柄 x.removeEventListener("click",hello); function hello(){ alert("hello") } function world(){ alert("world") } </script> </body> </html>
免责声明！
本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系本站邮箱yoyou2525@163.com删除。
猜您在找
document.getElementById(...) is null
react开发——document.getElementById(...) is null 问题
document.getElementById("id").value与$("#id").val()之间的区别
jq中的$("#id")与js中的document.getElementById("id")的区别
[已经完美解决]IE下 'document.getElementById(...)' is null
在vue里面无法通过document.getElementById来修改ElementUI自带的标签
【转】document.getElementById("xx").style.xxx中的全部属性
jQuery的区别：$().click()和$(document).on('click','要选择的元素',function(){})的不同
常见报错——Uncaught TypeError: document.getElementsByClassName(...).addEventListener is not a function
addEventListener的click和onclick的区别