理解javascript中DOM事件

理解JavaScript中DOM事件的完整攻略

DOM处理事件的机制是基于事件传播（Event propagation）的，事件传播是指从页面最外层开始逐级向内层传递事件的过程。而JavaScript为开发者提供了两种方式来实现事件处理：事件监听器和事件委托。

事件监听器

事件监听器是在事件触发时执行的代码块，可以使用addEventListener方法添加到HTML元素上。addEventListener期望接收两个参数，第一个参数是事件的名称，第二个参数是事件触发时需要执行的函数，如下图所示：

let button = document.querySelector('#button')
button.addEventListener('click', function() {
  console.log('Hello World')
})

在上面的代码中，我们为一个button元素添加了一个click事件监听器。当用户点击button按钮时，将会触发这个事件监听器，然后执行内部的函数。

除此之外，addEventListener还有第三个参数。这个参数是一个boolean值，通常被称为useCapture。它决定了事件按照捕获还是冒泡的方式处理，默认值为false，即采用冒泡传播方式。如果设置为true，则会使用捕获传播方式。

let parent = document.querySelector('#parent')
let child = document.querySelector('#child')

parent.addEventListener('click', function() {
  console.log('parent clicked')
}, true)

child.addEventListener('click', function() {
  console.log('child clicked')
}, true)

在这个例子中，我们为parent元素和child元素都添加了一个click事件监听器，并使用了捕获传播方式。因此当点击child元素时，会按照以下顺序执行两个函数：

1. parent的监听器函数
2. child的监听器函数

事件委托

事件委托允许我们使用父元素来捕捉子元素上的事件。在这种情况下，监听器会被绑定到父元素身上，然后通过事件冒泡的方式来检查是否实际发生在了子元素上。这种方式可以有效地避免添加过多事件监听器的问题，从而提高了性能。

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
</ul>

现在，我们为整个ul元素添加一个click事件监听器，而不是为每个li元素添加一个：

let ul = document.querySelector('ul')
ul.addEventListener('click', function(event) {
  console.log(event.target.innerHTML)
})

在监听器中，我们使用了事件对象（event），并输出了用户点击的子元素的文本内容。

示例

假设我们有以下HTML代码：

<div id="outer">
  <div id="inner">Click me!</div>
</div>

我们可以用以下代码为inner元素添加一个点击事件监听器：

let inner = document.querySelector('#inner')
inner.addEventListener('click', function(event) {
  console.log('Inner element clicked!')
})

我们还可以使用事件委托来完成同样的任务，如下所示：

let outer = document.querySelector('#outer')
outer.addEventListener('click', function(event) {
  if (event.target.id === 'inner') {
    console.log('Inner element clicked!')
  }
})

在这个例子中，我们为outer元素添加了一个click事件监听器，并检查事件发生的目标元素是否是inner元素。如果是，那么就执行我们的函数。

let list = document.querySelector('ul')
list.addEventListener('click', function(event) {
  if (event.target.nodeName === 'LI') {
    console.log('List item clicked!')
  }
})

在这个例子中，我们为ul元素添加了一个click事件监听器，并检查点击的目标元素是否是LI元素。如果是，就执行我们的函数。

结论

DOM事件是Web开发中非常重要的一部分，因为事件是Web页面的核心交互方式。我们需要深入了解事件传播的机制，以及如何使用事件监听器和事件委托来管理事件，并提高性能。