上一节:
下一节:

  JavaScript HTML DOM 事件监听器

  • addEventListener()方法

    addEventListener()方法将事件处理程序附加到指定的元素。addEventListener()方法将事件处理程序附加到元素，而不覆盖现有的事件处理程序。您可以向一个元素添加许多事件处理程序。您可以向一个元素添加许多相同类型的事件处理程序，即两个“单击”事件。您可以将事件侦听器添加到任何DOM对象，而不仅仅是HTML元素。即window对象。addEventListener()方法可以更容易地控制事件对冒泡的反应。使用addEventListener()方法时，JavaScript与HTML标记分离，以提高可读性，并允许您添加事件侦听器，即使您不控制HTML标记也是如此。您可以使用removeEventListener()方法轻松删除事件侦听器。
    语法： 
    element.addEventListener(event, function, useCapture);
    • 第一个参数是事件的类型（如“ click”或“ mousedown”）。
    • 第二个参数是我们想要在事件发生时调用的函数。
    • 第三个参数是一个布尔值，指定是使用事件冒泡还是事件捕获。此参数是可选的。
    请注意，您不要为事件使用“on”前缀; 用“ click”而不是“ onclick”。
    例子： 
    document.getElementById("myBtn").addEventListener("click", displayDate);
    尝试一下

  • 向元素添加事件处理程序

    当用户点击某个元素时提醒“Hello World！” ： 
    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);
    尝试一下

  • 将事件处理程序添加到window对象

    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>元素的click事件，然后处理<div>元素的click事件。在捕获最外层元素时，首先处理事件然后处理内部：首先处理<div>元素的click事件，然后处理<p>元素的click事件。使用addEventListener()方法，您可以使用“useCapture”参数指定传播类型： 
    addEventListener(event, function, useCapture);
    默认值为false，将使用冒泡传播，当值设置为true时，事件使用捕获传播。 
    document.getElementById("myP").addEventListener("click", myFunction, true);
document.getElementById("myDiv").addEventListener("click", myFunction, true);
    尝试一下

  • removeEventListener()方法

    element.removeEventListener("mousemove", myFunction); 
    element.removeEventListener("mousemove", myFunction);
    尝试一下

  • 浏览器支持

    表中的数字指定了完全支持这些方法的第一个浏览器版本。
    方法 Internet Explorer Chrome FireFox Safari Opera
    方法名称
    addEventListener()
    9.0+
    1.0+
    1.0+
    1.0+
    7.0+
    removeEventListener()
    9.0+
    1.0+
    1.0+
    1.0+
    7.0+
    注：该addEventListener()和removeEventListener()方法并不在IE 8和更早版本的支持。但是，对于这些特定的浏览器版本，您可以使用attachEvent()方法将事件处理程序附加到元素，以及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事件对象参考请查看我们参考手册
上一节:
下一节: