最新的Web开发教程
 

JavaScript HTML DOM事件监听

❮上一页 下一页章❯

在addEventListener()方法

例

添加事件侦听器，当用户点击一个按钮触发：

document.getElementById("myBtn").addEventListener("click", displayDate);
试一试»

在addEventListener()方法附加一个事件处理程序到指定元素。

在addEventListener()方法附加一个事件处理程序的元素，而不会覆盖现有的事件处理程序。

您可以添加许多事件处理的一个元素。

您可以添加许多同一类型的事件处理程序的一个元素，即2 "click"事件。

您可以事件侦听器添加到任何DOM对象不仅HTML元素。 即窗口对象。

所述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文件，窗口对象或其他对象xmlHttpRequest对象。

例

添加事件侦听器，当用户调整窗口触发：

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

传递参数

当传递的参数值，请使用“匿名函数”调用与参数中指定的功能：

例

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

事件冒泡或事件捕获？

有事件传播的两种方式中的HTML DOM，鼓泡和捕捉。

事件的传播是在事件发生时确定元素顺序的一种方式。 如果你有一个<p>一个元素中<div>元素，用户点击的<p>元素，元素的"click"事件应当首先处理？

在冒泡最内部元素的事件处理，然后再外：在<p>元素的单击事件首先处理，那么<div>元素的click事件。

在捕捉最外层的元素的事件处理，然后再内部：在<div>元素的click事件将被优先处理，那么<p>元素的click事件。

随着addEventListener()方法，你可以通过使用指定的传播类型， "useCapture"参数：

addEventListener( event , function , useCapture );

默认值是假的，这将使用发泡传播，当该值被设置为真，该事件使用捕获传播。

例

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.0及更早版本。 然而，对于这些具体的浏览器版本，您可以使用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);
}
试一试»

HTML DOM事件对象参考

对于所有的HTML DOM事件的列表，看看我们完整的HTML DOM事件对象参考 。


❮上一页 下一页章❯