JavaScript HTML DOM EventListener


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").

第二个参数是事情触发后调用的函数。

第三个参数是个布尔值用于描绘事情是冒泡仍是捕获。该参数是可选的。

Note 留意:不要运用 "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 DOM 目标如: HTML 元素, HTML 文档, window 目标。或许其他支出的事情目标如: xmlHttpRequest 目标。

实例

当用户重置窗口大小时增加事情监听:

window.addEventListener("resize", function(){
    document.getElementById("demo").innerHTML = sometext;
});

测验一下 »


传递参数

当传递参数值时,运用"匿名函数"调用带参数的函数:

实例

element.addEventListener("click", function(){ myFunction(p1, p2); });

测验一下 »


事情冒泡或事情捕获?

事情传递有两种办法:冒泡与捕获。

事情传递界说了元素事情触发的次序。 假如你将 <p> 元素刺进到 <div> 元素中,用户点击 <p> 元素, 哪个元素的 "click" 事情先被触发呢?

冒泡 中,内部元素的事情会先被触发,然后再触发外部元素,即: <p> 元素的点击事情先触发,然后会触发 <div> 元素的点击事情。

捕获 中,外部元素的事情会先被触发,然后才会触发内部元素的事情,即: <div> 元素的点击事情先触发 ,然后再触发 <p> 元素的点击事情。

addEventListener() 办法能够指定 "useCapture" 参数来设置传递类型:

addEventListener(event, function, useCapture);

默认值为 false, 即冒泡传递,当值为 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 及更早 IE 版别,Opera 7.0及其更早版别不支撑 addEventListener() 和 removeEventListener() 办法。可是,关于这类浏览器版别能够运用 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);
}

测验一下 »


HTML DOM 事情目标参考手册

一切 HTML DOM 事情,能够检查咱们完好的 HTML DOM Event 目标参考手册