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

简介: 浅浅的说下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元素的点击事件。这样既简化了代码结构,又提高了性能。

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

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

相关文章
|
6月前
|
JavaScript 前端开发
JavaScript DOM 操作:什么是事件委托(Event Delegation)?有什么优势?
JavaScript DOM 操作:什么是事件委托(Event Delegation)?有什么优势?
120 1
|
9天前
|
JavaScript 前端开发 UED
JS DOM 事件流与事件冒泡
【10月更文挑战第16天】理解 DOM 事件流和事件冒泡是掌握 JavaScript 事件处理的关键。通过合理利用事件冒泡,可以实现更高效、灵活的事件处理机制,提升用户体验和开发效率。在实际开发中,要根据具体情况灵活运用这些概念,以达到最佳的效果。
|
JavaScript 前端开发 开发者
JavaScript DOM 事件委托 ★
JavaScript DOM 事件委托 ★
119 0
|
6月前
|
JavaScript 前端开发
JavaScript DOM操作:如何实现事件委托?
JavaScript DOM操作:如何实现事件委托?
31 2
|
前端开发 JavaScript 开发者
前端祖传三件套JavaScript的DOM之事件的事件委托
在前端开发中,事件处理是非常重要的一部分。JavaScript 中的 DOM 事件机制提供了丰富的功能和灵活的方式来处理各种事件,并且事件委托是其中不可或缺的一部分。本文将介绍 JavaScript 中的事件委托。
118 1
|
前端开发 JavaScript 开发者
前端祖传三件套JavaScript的DOM之事件的事件流
在前端开发中,事件流是一种非常重要的概念。通过了解事件流的原理,我们可以更加深入地理解 JavaScript 的 DOM 事件机制,并实现更加复杂的交互效果。本文将介绍 JavaScript 中的事件流。
110 0
|
JavaScript 程序员
DOM事件模型和事件委托
DOM事件模型和事件委托
115 0
DOM事件模型和事件委托
|
XML 移动开发 JavaScript
【JavaScript-DOM重点核心】事件绑定,解除事件,DOM事件流
【JavaScript-DOM重点核心】事件绑定,解除事件,DOM事件流
156 0
【JavaScript-DOM重点核心】事件绑定,解除事件,DOM事件流
|
Web App开发 JavaScript
IE和DOM事件流的区别
事件 HTML元素事件是浏览器内在自动产生的,当有事件发生的时候html元素会向外界(这里主要指元素事件的订阅者)发出各种事件,如click、onmouseover,onmouseout等等 DOM事件流 DOM(文档对象模型)结构是一个树形结构,当一...
1561 0