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); }
如对本文有疑问, 点击进行留言回复!!
使用纯前端JavaScript实现Excel导入导出方法过程详解
微信小程序完美解决scroll-view高度自适应问题的方法
网友评论