html dom listener,JavaScript htmldom 事件监听器

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);

}