addEventListener() 方法
document.getElementById("myBtn").addEventListener("click", displayDate);
addEventListener() 方法将事件处理程序附加到指定的元素。
addEventListener() 方法将事件处理程序的元素而不覆盖现有的事件处理程序。
可以将多个事件处理程序添加到一个元素中。
可以将同一类型的许多事件处理程序添加到一个元素中, 例如,两个 "click" 事件.
You can add event listeners to any DOM object not only HTML elements. i.e the window object.
你可以添加事件侦听器到任何的DOM对象,不仅有DOM HTML元素。例如,window窗口对象。
addEventListener() 方法更容易控制事件对冒泡的响应。
当你使用addEventListener()方法的时候, JavaScript是从HTML标记分离,更好的可读性和允许你添加事件侦听器即使你不控制HTML标记。
你可以很容易地通过使用removeEventListener()方法移除事件侦听器。
语法
element.addEventListener(event, function, useCapture);
第一个参数是事件的类型(像 "click" 或者 "mousedown").
第二个参数是当事件发生时我们要调用的函数.
第三个参数是一个布尔值,指定是否使用事件冒泡或事件捕获。此参数是可选的.
请注意,你不使用“on”前缀在事件上; 使用 "click" 代替 "onclick".
将事件处理程序添加到元素
element.addEventListener("click", function(){ alert("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);
将事件处理程序添加到窗口对象
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两事件传播的方式,冒泡和捕获.
事件传播是在事件发生时定义元素顺序的一种方法. 如果在
元素, 用户点击
元素, 那个元素的 "click" 事件将首先被处理?
在冒泡事件中内部元素的事件首先处理,然后是外部:
元素点击事件首先被处理, 然后是
在捕获事件中,外部元素的事件是先处理,然后内部:
元素.
使用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
注意:本addEventListener()和removeEventListener()方法不能在IE 8和更早的版本,以及Opera 6和较早版本的支持。然而,这些特定的浏览器版本,你可以使用attachEvent()方法附加事件处理程序的元素,和detachEvent()方法删除它:
element.attachEvent(event, function);
element.detachEvent(event, function);
var x = document.getElementById("myBtn");
if (x.addEventListener) { // For all major browsers, except IE 8 and earlier
x.addEventListener("click", myFunction);
} else if (x.attachEvent) { // For IE 8 and earlier versions
x.attachEvent("onclick", myFunction);
}