事件委托和排他思想

一、事件委派

1.理解DOM事件流

• 事件流描述的是从页面中接收事件的顺序。事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程即DOM事件流。

• DOM事件流分为三个阶段：

  • 捕获阶段：从上往下
  • 当前目标阶段
  • 冒泡阶段：从下往上

• 事件流如下图所示：

  

• 注意事项：

  • JavaScript代码中只能执行捕获或者冒泡其中的一个阶段。
  • addEventListener(type, listener[, useCapture])第三个参数如果是true，表示在事件捕获阶段调用事件处理程序；如果是false(不写默认就是false)，表示在事件冒泡阶段调用事件处理程序。
  • 其中有些事件是没有冒泡的，比如onblur、onfocus、onmouseenter、onmouseleave。

2.掌握事件委托

• 概念：事件委托也称为事件代理，在jQuery中称为事件委派。
• 事件委托的作用：只操作了一次DOM，提高了程序的性能。
• 事件委托的优点包括：可以大量节省内存占用，减少事件注册，比如在ul上代理所有li的click事件；实现动态绑定事件。
• 事件委托的原理：不是每个子节点单独设置事件监听器，而是事件监听器设置在其父节点上，然后利用冒泡原理影响设置每个子节点。

二、排他思想

• 应用：如果有同一组元素，我们想要某一个元素实现某种样式，需要用到循环的排他思想。

• 排他思想原理：(1)先所有元素全部清除样式，即干掉其他人；(2)再给当前元素设置样式，即留下自己。

• 场景一：

  // 需求：点击哪个按钮，让当前按钮变为粉色，其余不变色 <button>按钮1</button> <button>按钮2</button> <button>按钮3</button> <button>按钮4</button> <button>按钮5</button> <script> 	// 获取所有按钮元素     let btns = document.querySelectorAll('button') 	for (let i = 0; i < btns.length; i++) {         // 绑定点击事件         btns[i].addaddEventListener('click', function () {             for (let j = 0; j < btns.length; j++) {                 // 干掉其他人                 btns[j].style.backgroundColor = ''             }             // 留下自己             this.style.backgroundColor = 'pink'         })     } </script> 

• 场景二：

  // 需求：Tab栏切换时，只有选中项的背景颜色为粉色。默认第一项被选中其背景颜色为粉色，其余项无背景颜色。 // 被选中的tab栏样式 <style type="text/css"> 	.active {         background-color: pink;     }     <style> <ul>     <li class="active">Tab1</li>     <li>Tab2</li>     <li>Tab3</li>     <li>Tab4</li> </ul> <script> 	// 获取所有的li标签元素     let lis = document.querySelectorAll('li') 	for (let i = 0; i < lis.length; i++) {         // 绑定点击事件         lis[i].addaddEventListener('click', function () {             // 移除当前类             document.querySelector('ul .active').classList.remove('active')             // 为点击的添加类             this.classList.add('active')         })     } </script>