文章链接:https://www.cnblogs.com/jc2182/p/11307165.html
addEventListener()方法将事件处理程序附加到指定的元素。
addEventListener()方法将事件处理程序附加到元素,而不覆盖现有的事件处理程序。
您可以向一个元素添加许多事件处理程序。您可以向一个元素添加许多相同类型的事件处理程序,即两个“单击”事件。
您可以将事件侦听器添加到任何DOM对象,而不仅仅是HTML元素。即window对象。
addEventListener()方法可以更容易地控制事件对冒泡的反应。
使用addEventListener()方法时,JavaScript与HTML标记分离,以提高可读性,
并允许您添加事件侦听器,即使您不控制HTML标记也是如此。
您可以使用removeEventListener()方法轻松删除事件侦听器。
请注意,您不要为事件使用“on”前缀; 用“ click”而不是“ onclick”。
document.getElementById("myBtn").addEventListener("click", displayDate);
element.addEventListener("click", function(){ alert("Hello World!"); });
您还可以在外部定义函数,然后把函数名当参数传:
element.addEventListener("click", myFunction); function myFunction() { alert ("Hello World!"); }
element.addEventListener("click", myFunction); element.addEventListener("click", mySecondFunction); element.addEventListener("mouseover", myFunction); element.addEventListener("mouseout", myThirdFunction);
window.addEventListener("resize", function(){ document.getElementById("demo").innerHTML = sometext; });
传递参数值时,使用“匿名函数”,使用以下参数调用指定的函数:
element.addEventListener("click", function(){ myFunction(p1, p2); });
document.getElementById("myP").addEventListener("click", myFunction, true); document.getElementById("myDiv").addEventListener("click", myFunction, true);
element.removeEventListener("mousemove", myFunction);
注:该addEventListener()和removeEventListener()方法并不在IE 8和更早版本的支持。
但是,对于这些特定的浏览器版本,您可以使用attachEvent()方法将事件处理程序附加到元素,以及detachEvent()删除它的方法,解决方案
var x = document.getElementById("myBtn"); if (x.addEventListener) { // 对于所有主流浏览器,IE 8及更早版本除外 x.addEventListener("click", myFunction); } else if (x.attachEvent) { // 适用于IE 8及更早版本 x.attachEvent("onclick", myFunction); }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> window.onload = function () { var btn = document.getElementById(‘btn‘); btn.addEventListener(‘click‘, function () { alert(‘你好‘); }) btn.addEventListener(‘click‘, function () { alert(‘明天‘); }) } </script> </head> <body> <input type="button" value="点击" id="btn"> </body> </html>
JavaScript addEventListener()事件监听方法
原文:https://www.cnblogs.com/ella-li/p/14553405.html