浅浅的说下dom的事件流和事件委托

前言：当我们在网页上进行开发时，经常需要对各种元素进行操作和添加事件处理程序。比如，我们可能需要为按钮添加点击事件，为输入框添加输入事件，为链接添加跳转事件等等。传统的方式是为每个元素单独绑定事件处理程序，这样会导致代码冗余和性能问题。

一、dom事件流的概念

                  DOM事件流描述了事件在页面中传播的过程。当一个元素触发了某个事件，比如点击事件，该事件会从触发元素开始，然后向上冒泡到父元素，再冒泡到更高层的祖先元素。这个过程称为事件冒泡。

        事件冒泡的机制使得我们可以利用事件委托来简化代码。事件委托是一种利用事件冒泡机制的技术，将事件处理程序绑定在父元素上，通过判断事件的目标元素来执行相应的操作。

让我们通过一个具体的例子来说明。假设我们有一个ul元素，其中包含多个li元素，我们希望点击每个li元素时，控制台输出相应的文本内容。

传统的方式是为每个li元素单独绑定点击事件处理程序，代码如下

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

<script>
const lis = document.querySelectorAll('li');
lis.forEach(li => {
  li.addEventListener('click', function() {
    console.log(this.textContent);
  });
});
</script>

上述代码中，我们使用querySelectorAll方法获取到所有的li元素，然后使用forEach方法为每个li元素绑定点击事件处理程序。当点击每个li元素时，控制台会输出相应的文本内容。

使用事件委托的方式，我们只需要在ul元素上绑定一个点击事件处理程序，然后通过判断事件的目标元素来执行相应的操作，代码如下：

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

<script>
document.getElementById('myList').addEventListener('click', function(event) {
  if (event.target.tagName === 'LI') {
    console.log(event.target.textContent);
  }
});
</script>

上述代码中，我们给ul元素添加了一个id属性，然后通过getElementById方法获取到ul元素。接着，我们在ul元素上绑定了一个点击事件处理程序。当点击ul元素中的任意li元素时，事件会冒泡到ul元素，然后执行事件处理程序。在事件处理程序中，我们通过判断事件的目标元素的tagName属性是否为'LI'，来确定是否需要执行相应的操作。如果是li元素，就输出相应的文本内容到控制台。

通过上述代码，无论我们有多少个li元素，只需要在ul元素上绑定一个事件处理程序，就可以处理所有li元素的点击事件。这样既简化了代码结构，又提高了性能。

总结来说，事件委托是一种利用事件冒泡机制的技术，通过将事件处理程序绑定在父元素上，来处理子元素的事件。它可以减少事件处理程序的数量，提高性能和代码的可维护性。在开发中，我们可以根据具体的场景和需求，合理运用事件委托来简化代码和提升性能。

最后这篇文章希望能帮助到大家，可以一起讨论下！