JavaScript对HTML DOM使用EventListener进行操作

JavaScript中的事件监听：深入了解addEventListener()方法的使用

你是否想在用户与你的网页互动时做出响应？比如，当用户点击一个按钮或者移动鼠标到一个元素上时，你是否希望执行某些动作？这时，就需要使用JavaScript的事件监听。而addEventListener()方法就是实现这一功能的关键。

什么是addEventListener()方法？这是一个允许你指定当特定事件发生时，应该调用哪个函数的方法。换句话说，你可以使用它来“监听”事件，并在事件发生时执行相应的操作。

以下是一些基本示例：

当用户点击一个元素时，弹出一个提示框显示“Hello World!”：

```javascript

var element = document.getElementById("myBtn");

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

```

如果你想引用外部函数，可以这样做：

```javascript

element.addEventListener("click", myFunction);

function myFunction() {

alert ("Hello World!");

}

```

addEventListener()方法的优点在于，你可以向同一个元素添加多个事件，或者向同一个元素添加同一类型（如两次点击事件）的多个事件。你还可以向任何HTML DOM对象添加事件监听，不仅仅是HTML元素，还包括window对象等。

使用addEventListener()方法还可以更方便地控制事件传递的方向——冒泡或捕获。冒泡是事件从最深的地方（也就是触发事件的元素）开始，然后逐级向上传播到最外层。而捕获则是事件从最外层开始，然后逐级向下传播到触发事件的元素。这对于处理复杂的事件交互非常有用。

以下是一个向window对象添加事件监听的例子，当用户调整窗口大小时，会更新页面内容：

```javascript

window.addEventListener("resize", function(){

document.getElementById("demo")nerHTML = "窗口大小已更改";

});

```

如果你想传递参数给处理事件的函数，你可以使用一个匿名函数来调用带参数的函数：

```javascript

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

```

在事件冒泡过程中，最内部的元素事件会首先被触发，然后逐级向外传递，直到最外层的元素。也就是说，如果用户在 `

` 元素上点击，那么首先是 `

` 元素的 "click" 事件被触发，然后才会触发 `