JavaScript HTML DOM 事件监听器

addEventListener() 方法

!DOCTYPE html>



JavaScript addEventListener()

This example uses the addEventListener() method to attach a click event to a button.

Try it






 

addEventListener() 方法将事件处理程序附加到指定的元素。

addEventListener() 方法在不覆盖现有事件处理程序的情况下将事件处理程序附加到元素。

可以向一个元素添加多个事件处理程序。

可以将许多相同类型的事件处理程序添加到一个元素，即两个“点击”事件。

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

addEventListener() 方法可以更轻松地控制事件对冒泡的反应。

使用 addEventListener() 方法时，JavaScript 与 HTML 标记分开，以提高可读性，并允许您添加事件侦听器，即使您不控制 HTML 标记也是如此。

可以使用 removeEventListener() 方法轻松删除事件侦听器。

语法

element.addEventListener(event, function, useCapture);

第一个参数是事件的类型（如“ click ”或“ mousedown ”或任何其他 HTML DOM 事件。）

第二个参数是事件发生时我们要调用的函数。

第三个参数是一个布尔值，指定是使用事件冒泡还是事件捕获。此参数是可选的。

注意

没有为事件使用“on”前缀；使用“ click ”代替“ onclick ”

向元素添加事件处理程序

element.addEventListener("click", function(){ alert("Hello World!"); });

JavaScript addEventListener()

This example uses the addEventListener() method to attach a click event to a button.

Try it

还可以引用外部“命名”函数：

element.addEventListener("click", myFunction);

function myFunction() {
  alert ("Hello World!");
}

!DOCTYPE html>



JavaScript addEventListener()

This example uses the addEventListener() method to execute a function when a user clicks on a button.

Try it

向同一元素添加多个事件处理程序

addEventListener() 方法允许您向同一元素添加多个事件，而不会覆盖现有事件：

element.addEventListener("click", myFunction);
element.addEventListener("click", mySecondFunction);

JavaScript addEventListener()

This example uses the addEventListener() method to add two click events to the same button.

Try it

可以将不同类型的事件添加到同一元素：

element.addEventListener("mouseover", myFunction);
element.addEventListener("click", mySecondFunction);
element.addEventListener("mouseout", myThirdFunction);

!DOCTYPE html>



JavaScript addEventListener()

This example uses the addEventListener() method to add many events on the same button.

Try it

向窗口对象添加事件处理程序

 addEventListener() 方法允许您在任何 HTML DOM 对象（例如 HTML 元素、HTML 文档、窗口对象或其他支持事件的对象，如 xmlHttpRequest 对象）上添加事件侦听器。

添加一个在用户调整窗口大小时触发的事件监听器：

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

JavaScript addEventListener()

This example uses the addEventListener() method on the window object.

Try resizing this browser window to trigger the "resize" event handler.

传递参数

传递参数值时，使用“匿名函数”调用带有参数的指定函数：

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

JavaScript addEventListener()

This example demonstrates how to pass parameter values when using the addEventListener() method.

Click the button to perform a calculation.

Try it

事件冒泡还是事件捕获？

HTML DOM 中有两种事件传播方式，冒泡和捕获。

事件传播是一种在事件发生时定义元素顺序的方法。如果在

元素中有一个

元素，并且用户点击了

元素，应该首先处理哪个元素的“点击”事件？

在冒泡中，首先处理最内层元素的事件，然后再处理外层元素：首先处理

元素的点击事件，然后是

元素的点击事件。

在捕获最外层元素的事件时，首先处理然后是内部：将首先处理

元素的点击事件，然后是

元素的点击事件。

使用 addEventListener() 方法，您可以使用“useCapture”参数指定传播类型：

addEventListener(event, function, useCapture);

默认值为 false，即会使用冒泡传播，当该值设置为 true 时，事件使用捕获传播。

document.getElementById("myP").addEventListener("click", myFunction, true);
document.getElementById("myDiv").addEventListener("click", myFunction, true);

JavaScript addEventListener()


  
Bubbling:
  
Click me!




  
Capturing:
  
Click me!

removeEventListener() 方法

removeEventListener() 方法删除已附加到 addEventListener() 方法的事件处理程序：

element.removeEventListener("mousemove", myFunction);

JavaScript removeEventListener()


  
This div element has an onmousemove event handler that displays a random number every time you move your mouse inside this orange field.
  
Click the button to remove the div's event handler.
  Remove

参考地址:JavaScript DOM EventListener