松软科技web教程:iJavaScript HTML DOM 事件监听器
addeventlistener() 方法
实例
添加当用户点击按钮时触发的事件监听器:
document.getelementbyid("mybtn").addeventlistener("click", displaydate);
addeventlistener() 方法为指定元素指定事件处理程序。
addeventlistener() 方法为元素附加事件处理程序而不会覆盖已有的事件处理程序。
您能够向一个元素添加多个事件处理程序。
您能够向一个元素添加多个相同类型的事件处理程序,例如两个 "click" 事件。
您能够向任何 dom 对象添加事件处理程序而非仅仅 html 元素,例如 window 对象。
addeventlistener() 方法使我们更容易控制事件如何对冒泡作出反应。
当使用 addeventlistener() 方法时,javascript 与 html 标记是分隔的,已达到更佳的可读性;即使在不控制 html 标记时也允许您添加事件监听器。
您能够通过使用 removeeventlistener() 方法轻松地删除事件监听器。
语法
element.addeventlistener(event, function, usecapture);
第一个参数是事件的类型(比如 "click" 或 "mousedown")。
第二个参数是当事件发生时我们需要调用的函数。
第三个参数是布尔值,指定使用事件冒泡还是事件捕获。此参数是可选的。
注意:请勿对事件使用 "on" 前缀;请使用 "click" 代替 "onclick"。
向元素添加事件处理程序
实例
当用户点击某个元素时提示 "hello world!":
element.addeventlistener("click", function(){ alert("hello world!"); });
您也可以引用外部“命名”函数:
实例
当用户点击某个元素时提示 "hello world!":
element.addeventlistener("click", myfunction); function myfunction() { alert ("hello world!"); }
向相同元素添加多个事件处理程序
addeventlistener() 方法允许您向相同元素添加多个事件,同时不覆盖已有事件:
实例
element.addeventlistener("click", myfunction); element.addeventlistener("click", mysecondfunction);
您能够向相同元素添加不同类型的事件:
实例
element.addeventlistener("mouseover", myfunction); element.addeventlistener("click", mysecondfunction); element.addeventlistener("mouseout", mythirdfunction);
向 window 对象添加事件处理程序
addeventlistener() 允许您将事件监听器添加到任何 html dom 对象上,比如 html 元素、html 对象、window 对象或其他支持事件的对象,比如 xmlhttprequest 对象。
实例
添加当用户调整窗口大小时触发的事件监听器:
window.addeventlistener("resize", function(){ document.getelementbyid("demo").innerhtml = sometext; });
传递参数
当传递参数值时,请以参数形式使用调用指定函数的“匿名函数”:
实例
element.addeventlistener("click", function(){ myfunction(p1, p2); });
事件冒泡还是事件捕获?
在 html dom 中有两种事件传播的方法:冒泡和捕获。
事件传播是一种定义当发生事件时元素次序的方法。假如 <div> 元素内有一个 <p>,然后用户点击了这个 <p> 元素,应该首先处理哪个元素“click”事件?
在冒泡中,最内侧元素的事件会首先被处理,然后是更外侧的:首先处理 <p> 元素的点击事件,然后是 <div> 元素的点击事件。
在捕获中,最外侧元素的事件会首先被处理,然后是更内侧的:首先处理 <div> 元素的点击事件,然后是 <p> 元素的点击事件。
在 addeventlistener() 方法中,你能够通过使用“usecapture”参数来规定传播类型:
addeventlistener(event, function, usecapture);
默认值是 false,将使用冒泡传播,如果该值设置为 true,则事件使用捕获传播。
实例
document.getelementbyid("myp").addeventlistener("click", myfunction, true); document.getelementbyid("mydiv").addeventlistener("click", myfunction, true);
removeeventlistener() 方法
removeeventlistener() 方法会删除已通过 addeventlistener() 方法附加的事件处理程序:
实例
element.removeeventlistener("mousemove", myfunction);
浏览器支持
表格中的数字规定了完全支持这些方法的首个浏览器版本。
方法 | |||||
addeventlistener() | 1.0 | 9.0 | 1.0 | 1.0 | 7.0 |
removeeventlistener() | 1.0 | 9.0 | 1.0 | 1.0 | 7.0 |
注释:ie 8、opera 6.0 及其更早版本不支持 addeventlistener() 和 removeeventlistener() 方法。不过,对于这些特殊的浏览器版本,您可以使用 attachevent() 方法向元素添加事件处理程序,并由 detachevent() 方法删除:
element.attachevent(event, function); element.detachevent(event, function);
实例
跨浏览器解决方案:
var x = document.getelementbyid("mybtn"); if (x.addeventlistener) { // 针对主流浏览器,除了 ie 8 及更正版本 x.addeventlistener("click", myfunction); } else if (x.attachevent) { // 针对 ie 8 及更早版本 x.attachevent("onclick", myfunction); }
上一篇: 设计模式学习笔记 ———— 简单工厂模式
下一篇: Python—一行代码究竟能实现多少功能