js事件冒泡和事件委托

简介: 事件冒泡是指事件从最内层元素开始逐级向上传播至祖先元素的过程,默认情况下,点击子元素时会先触发自身的事件处理程序,再依次向上触发父元素的处理程序。事件委托则是在父元素上设置事件处理程序,利用事件冒泡机制处理子元素的事件,以此减少内存消耗和提高性能,特别适用于处理大量动态子元素的情况。其区别在于事件冒泡是事件传播机制的一部分,而事件委托是编程技巧,通过在父元素上绑定事件处理程序来简化子元素的事件处理。

事件冒泡是指当一个元素上的事件被触发时,事件会从最内层的目标元素开始,逐级向上传播到父级元素,直到到达最顶层的祖先元素(通常是 document 对象)。这是一种默认的事件传播方式。

示例

html复制代码<div id="parent">

   <button id="child">Click me</button>

</div>

javascript复制代码const parent = document.getElementById('parent');

const child = document.getElementById('child');

parent.addEventListener('click', () => {

   console.log('Parent clicked');

});

child.addEventListener('click', () => {

   console.log('Child clicked');

});

执行结果

  1. 点击 child 按钮时,会先输出 "Child clicked",然后输出 "Parent clicked"。这就是事件冒泡的效果。

事件委托(Event Delegation)

事件委托是利用事件冒泡的特性,将一个事件处理程序添加到父元素上,而不是给每个子元素分别添加事件处理程序。当事件发生时,事件处理程序会检查事件的目标元素,并对特定的子元素进行处理。事件委托可以有效减少内存消耗,提高性能,尤其是在处理大量动态子元素时。

示例

html复制代码<ul id="list">

   <li>Item 1</li>

   <li>Item 2</li>

   <li>Item 3</li>

</ul>

javascript复制代码const list = document.getElementById('list');

list.addEventListener('click', (event) => {

   if (event.target.tagName === 'LI') {

       console.log(`Clicked on ${event.target.textContent}`);

   }

});

执行结果

  1. 无论点击 list 内的哪个 li 元素,都会触发 list 上的点击事件处理程序,并且只对点击的 li 元素进行处理。

主要区别

  1. 定义
  • 事件冒泡:是事件传播的一种方式,事件从目标元素向上传播到祖先元素。
  • 事件委托:是一种编程技巧,通过事件冒泡机制,将事件处理程序添加到父元素上,利用事件目标来处理特定的子元素。
  1. 目的
  • 事件冒泡:描述事件传播的机制。
  • 事件委托:优化事件处理,减少内存消耗,尤其适用于处理大量动态生成的子元素。
  1. 用法
  • 事件冒泡:是浏览器事件模型的一部分,自动发生。
  • 事件委托:是开发者通过编程实现的技巧,利用事件冒泡机制来简化事件处理。

事件委托的优点

  • 性能优化:减少需要绑定的事件处理程序的数量,降低内存消耗。
  • 动态元素处理:方便处理动态添加或删除的子元素的事件。
  • 简化代码:减少重复代码,使代码更加简洁和易于维护。

事件委托的缺点

  • 限制:不适用于不支持冒泡的事件(如 blurfocus 事件)。
  • 复杂度:需要手动检查事件目标,增加了代码的复杂度。

总结

  • 事件冒泡是事件传播机制的一部分,描述了事件从目标元素向上传播的过程。
  • 事件委托是一种编程技巧,利用事件冒泡机制,通过在父元素上绑定事件处理程序来处理子元素的事件。

用链表实现两数相加

在链表中实现两数相加的一个经典问题就是在两个链表中,每个节点代表一个数字的位,两个链表代表两个非负整数。数字以逆序存储,每个节点包含一个数字。将两个数相加并返回一个新的链表表示结果。

javascript复制代码class ListNode {

   constructor(val = 0, next = null) {

       this.val = val;

       this.next = next;

   }

}

function addTwoNumbers(l1, l2) {

   let dummy = new ListNode();

   let current = dummy;

   let carry = 0;

   while (l1 !== null || l2 !== null) {

       let sum = carry;

       if (l1 !== null) {

           sum += l1.val;

           l1 = l1.next;

       }

       if (l2 !== null) {

           sum += l2.val;

           l2 = l2.next;

       }

       carry = Math.floor(sum / 10);

       current.next = new ListNode(sum % 10);

       current = current.next;

   }

   if (carry > 0) {

       current.next = new ListNode(carry);

   }

   return dummy.next;

}

项目中的难点问题

  1. 状态管理:在使用 Redux 时,如何高效地管理复杂的状态树,并确保组件间状态的一致性和数据流的合理性。
  2. 实时数据更新:实现 WebSocket 来进行实时数据传输,确保数据能够及时、准确地反映在前端页面上。
  3. 组件复用:设计可复用的组件,以减少重复代码,提高开发效率和维护性。
  4. 性能优化:对 React/Vue 组件进行性能优化,如避免不必要的重新渲染、懒加载等。
  5. 跨组件通信:在 Vue 和 React 中,如何优雅地进行跨组件通信,比如在深层嵌套的组件中传递数据。


相关文章
|
5月前
|
JavaScript 前端开发
js开发:请解释事件冒泡和事件捕获。
JavaScript中的事件处理有冒泡和捕获两种方式。事件冒泡是从子元素向上级元素传递,而事件捕获则从外层元素向内层传递。`addEventListener`的第三个参数可设定事件模式,`false`或不设为冒泡,`true`为捕获。示例代码展示了如何设置。
42 2
|
4月前
|
JavaScript 前端开发
事件委托是JS技巧,通过绑定事件到父元素利用事件冒泡,减少事件处理器数量,提高性能和节省内存。
【6月更文挑战第27天】事件委托是JS技巧,通过绑定事件到父元素利用事件冒泡,减少事件处理器数量,提高性能和节省内存。例如,动态列表可共享一个`click`事件处理器,通过`event.target`识别触发事件的子元素,简化管理和响应动态内容变化。
39 0
|
3天前
|
JavaScript 前端开发 UED
JavaScript中的事件冒泡
JavaScript中的事件冒泡
|
1月前
|
JavaScript 前端开发
理解js事件委托
【9月更文挑战第5天】理解js事件委托
38 4
|
17天前
|
JavaScript 前端开发
JS事件委托
本文介绍了JavaScript中的事件委托概念,并通过Vue.js的示例代码展示了如何利用事件委托技术来处理多个子元素的事件,从而避免为每个子元素单独绑定事件,提高性能和减少代码量。
31 0
|
2月前
|
JavaScript 前端开发 UED
JavaScript中的事件冒泡
JavaScript中的事件冒泡
19 1
|
3月前
|
JavaScript
js 事件流、事件冒泡、事件捕获、阻止事件的传播
js 事件流、事件冒泡、事件捕获、阻止事件的传播
51 1
|
4月前
|
JavaScript
Vue.js中使用.self修饰符来处理事件冒泡
Vue.js中使用.self修饰符来处理事件冒泡
|
5月前
|
JavaScript 前端开发
js的事件冒泡
js的事件冒泡
25 1
|
Web App开发 JavaScript 前端开发
JavaScript 从入门到放弃(一)事件委托和使用innerHTML添加元素
一、使用事件委托 一个简单的需求,比如想给ul下面的li加上点击事件,点击哪个li,就显示那个li的innerHTML。这个貌似很简单!代码如下! DOCTYPE html> 0 1 2 3 4 5 6 7 8 9 var $ul = document.
1338 0