JS 事件的本质和具体实例，你掌握了吗？

在 JavaScript 中，事件是当用户或系统与网页交互时发生的行为。它可以是点击、鼠标悬停、键盘输入等。事件允许我们对用户的操作做出响应，从而使网页更加动态和交互性。

事件监听函数

要响应事件，我们需要使用事件监听函数。事件监听函数是一个函数，当事件发生时被调用。我们可以使用 addEventListener() 方法将事件监听函数添加到元素上。例如：

element.addEventListener("click", function() {
  // 当元素被点击时，这个函数就会被调用
});

事件对象

当事件发生时，一个事件对象会被创建并传递给事件监听函数。事件对象包含有关事件的信息，例如事件类型、事件目标和事件数据。我们可以使用事件对象来获取有关事件的更多信息。例如：

element.addEventListener("click", function(event) {
  console.log(event.type); // "click"
  console.log(event.target); // 元素本身
  console.log(event.data); // 鼠标点击的位置
});

事件冒泡

事件冒泡是指当事件发生时，它会从目标元素开始向上冒泡到父元素，依次触发父元素的事件监听函数。例如：

<div id="parent">
  <button id="child">Click Me</button>
</div>

如果我们给父元素和子元素都添加了点击事件监听函数，那么当我们点击子元素时，子元素的点击事件监听函数和父元素的点击事件监听函数都会被调用。这是因为事件从子元素冒泡到了父元素。

事件委托

事件委托是一种优化事件处理的技巧。它通过在父元素上添加事件监听函数来代替在子元素上添加事件监听函数，从而减少了事件处理器的数量。例如：

parent.addEventListener("click", function(event) {
  if (event.target.id === "child") {
    // 当子元素被点击时，这个函数就会被调用
  }
});

这样，当我们点击子元素时，只有父元素的点击事件监听函数会被调用。

无限下拉的图片列表

在无限下拉的图片列表中，我们需要监听每个图片的点击。我们可以使用事件委托来实现这一点。例如：

container.addEventListener("click", function(event) {
  if (event.target.tagName === "IMG") {
    // 当图片被点击时，这个函数就会被调用
  }
});

这样，当我们点击图片时，只有容器的点击事件监听函数会被调用。

结语

在 JavaScript 中，事件是用户与网页交互时发生的事件，我们可以使用事件监听函数来响应事件。事件冒泡是指当事件发生时，它会从目标元素开始向上冒泡到父元素，依次触发父元素的事件监听函数。事件委托是一种优化事件处理的技巧，它通过在父元素上添加事件监听函数来代替在子元素上添加事件监听函数，从而减少了事件处理器的数量。