浅尝DOM事件

什么是DOM事件？

简单来说，我在网页中点击了一下鼠标，就触发了点击事件；在网页中按键盘就会触发键盘事件，就是这么简单。

chatGPT:DOM事件是指在网页中发生的各种交互事件，如鼠标点击、键盘敲击、页面加载、表单提交等。当用户在网页上进行交互操作时，网页中的元素会触发相应的DOM事件。我们可以使用JavaScript监听这些事件，来对网页的行为进行控制和响应。在JavaScript中，我们可以使用addEventListener()方法来给DOM元素添加事件监听器，从而在事件发生时执行相应的处理函数。

DOM 事件机制

chatGPT:DOM 事件模型（DOM Event Model）是一种用于处理 Web 前端开发中的事件的机制。它定义了在 Web 页面中发生事件时，浏览器会如何处理和传递事件的方式。

DOM 事件模型基于三个主要的概念：事件、事件目标和事件处理程序。事件是在 Web 页面中发生的行为，例如用户单击鼠标或按下键盘。事件目标是触发事件的元素，例如按钮或链接。事件处理程序是在事件发生时执行的代码，用于响应事件。

在 DOM 事件模型中，事件会在发生时从事件目标开始向上传播，直到文档根节点。这个过程被称为事件冒泡（event bubbling）。事件处理程序可以在任何级别捕获这些事件，并在事件冒泡到它们所在的元素时触发。

除了事件冒泡之外，DOM 事件模型还支持事件捕获（event capturing）。事件捕获是一个从文档根节点开始的过程，用于在事件到达事件目标之前截获事件并在根节点开始处理它。捕获过程可以用来在事件到达目标之前拦截和处理事件，但它并不是 DOM 事件模型的必需部分，因此在实践中不太常用。

DOM 事件模型提供了一种灵活的机制来处理 Web 页面中的各种事件，可以帮助开发人员实现复杂的用户交互和动态效果。

案例+代码

假设我们有一个 HTML 页面，其中有一个按钮，当用户点击该按钮时，页面上的某个元素会变为蓝色。我们可以使用 DOM 事件机制来实现这一功能。

首先，我们需要获取到该按钮的引用，可以使用以下代码：

let btn = document.getElementById('myButton');

接下来，我们需要注册一个事件监听器，当按钮被点击时触发，可以使用以下代码：

btn.addEventListener('click', function() {
  let element = document.getElementById('myElement');
  element.style.color = 'blue';
});

这段代码使用 addEventListener 方法在按钮上注册一个 'click' 事件监听器。当按钮被点击时，该监听器中的代码将执行，将具有 id 为 'myElement' 的元素的文本颜色设置为蓝色。

这个例子展示了 DOM 事件机制的基本使用方式，它允许我们在页面上注册事件监听器，并在事件发生时执行指定的代码。通过这种方式，我们可以为用户交互提供动态的、具有响应性的体验。

捕获与冒泡

用到的知识：文档的根节点：document 上面，但不利于维护

捕获

事件捕获是指事件从顶层容器开始，逐级向下传递到最具体的元素的过程。理论上可以把所有的事件写在文档的根节点：document 上面，但不利于维护，还可能导致性能问题。事件捕获先于事件冒泡。、

我的猜测：事件捕获就是事件先在根元素上面发生，再向下一级级的传递到具体发生事件的元素上面

但现在能力有限无法证明。

冒泡

事件从目标元素开始向上层元素逐级传递，直到传递到最顶层的元素（一般是window对象）为止，这个过程就是事件冒泡。

事件委托

把事件监听写在父元素上的方式叫事件委托。好处是：

节约监听数量（不需要在每个具体元素上写事件监听
可以监听动态生成的元素（虽然可以在动态生成元素的同时添加事件监听，但遇到需要经常操作动态生成元素的时候，会十分的麻烦，且影响性能

案例+代码

假设我们有一个 ul 元素，其中包含多个 li 元素，我们想要给每个 li 元素添加点击事件的监听器，而不是给每个 li 元素分别添加监听器。这时候可以使用事件委托，将监听器添加到父元素 ul 上，然后通过 event.target 获取到触发事件的具体元素，从而实现对所有 li 元素的监听。

代码示例：

HTML：

<ul id="myList">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

JavaScript：

const myList = document.getElementById('myList')

myList.addEventListener('click', (event) => {
  if (event.target.tagName.toLowerCase() === 'li') {
    console.log(`Clicked ${event.target.textContent}`)
  }
})

在上面的代码中，我们给 ul 元素添加了一个点击事件的监听器，然后在回调函数中判断触发事件的元素是否为 li 元素，如果是，则打印该元素的文本内容。这样就实现了对所有 li 元素的点击事件的监听，而不需要给每个 li 元素分别添加监听器。

浅尝DOM事件

什么是DOM事件？

DOM 事件机制

案例+代码

捕获与冒泡

捕获

我的猜测：事件捕获就是事件先在根元素上面发生 ，再向下一级级的传递到具体发生事件的元素上面

冒泡

事件委托

案例+代码

我的猜测：事件捕获就是事件先在根元素上面发生，再向下一级级的传递到具体发生事件的元素上面