让我来详细讲解一下“JavaScript DOM事件(笔记)”的完整攻略。

JavaScript DOM事件(笔记)

JavaScript DOM事件是处理网页中用户操作的重要方式。当用户与网页交互时，通常需要对用户事件进行响应，可以是通过点击按钮，拖拽元素，滚动滑动条等等。在这些情况下，处理函数将通过各种类型的事件被触发。在本文中，我们将讨论如何使用addEventListener函数来添加事件监听器、如何使用事件委托来处理动态内容，以及如何使用Event接口来访问和修改事件对象。

添加事件监听器

添加事件监听器的最佳方式是使用addEventListener函数。这个函数可以被添加到DOM元素上，并且在特定事件被触发时，将调用指定的函数。其语法如下：

element.addEventListener(type, listener, useCapture);

其中：
- type：表示该监听器要处理的事件类型。例如：'click'、'mousemove'等等。
- listener：是我们定义的事件处理函数，当事件被触发时，将会调用监听器。
- useCapture：也是一个布尔类型的参数，默认为false，表示事件是在冒泡阶段被处理。如果赋值为true，事件将在捕获阶段处理。

例如，以下代码段会在一个按钮上添加一个click事件监听器：

const button = document.querySelector('button');

button.addEventListener('click', function() {
  console.log('button clicked');
});

事件委托

事件委托是指将事件处理器添加到一个父元素上，而不是每个子元素上。当事件被触发时，事件被传播到父元素并调用相应的事件处理程序。使用事件委托的好处是，我们可以处理在页面上动态添加的元素而不需要为它们添加单独的事件监听器。

以下是一个例子，它在UL元素上添加事件监听器，以便当其下属的LI元素被单击时提供反馈：

<ul id="list">
  <li>Hello</li>
  <li>World</li>
</ul>

const list = document.querySelector('#list');

// 在父元素上添加事件监听器
list.addEventListener('click', function(event) {
  // 如果点击的是<li>元素
  if (event.target.tagName == 'LI') {
    console.log(`You clicked on ${event.target.textContent}!`);
  }
});

Event接口

在事件处理器中，我们可以使用事件对象来访问事件的相关数据。事件对象可以通过event参数访问，在事件处理器中，event行参总是位于第一个参数的位置。

例如，以下是一个事件处理程序，它将在元素被单击时更改其文本内容：

<button id='myButton'>Click me!</button>

const button = document.querySelector('#myButton');

button.addEventListener('click', function(event) {
  // 获取事件对象的目标元素
  const target = event.target;

  // 设置按钮文本
  target.textContent = 'Button was clicked';
});

以上就是关于JavaScript DOM事件的完整攻略。希望能够对你有所帮助。