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两事件传播的方式，冒泡和捕获.

事件传播是在事件发生时定义元素顺序的一种方法. 如果在<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()和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);
}

让我试试