事件委托和排他思想

一、事件委派

1.理解DOM事件流

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

  

  创新互联长期为上千余家客户提供的网站建设服务，团队从业经验10年，关注不同地域、不同群体，并针对不同对象提供差异化的产品和服务；打造开放共赢平台，与合作伙伴共同营造健康的互联网生态环境。为贵定企业提供专业的成都网站设计、做网站，贵定网站改版等技术服务。拥有十载丰富建站经验和众多成功案例,为您定制开发。

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

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

• 事件流如下图所示：

• 注意事项：

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

2.掌握事件委托

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

二、排他思想

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

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

• 场景一：

  // 需求：点击哪个按钮，让当前按钮变为粉色，其余不变色
  按钮1
  按钮2
  按钮3
  按钮4
  按钮5
  
  

• 场景二：

  // 需求：Tab栏切换时，只有选中项的背景颜色为粉色。默认第一项被选中其背景颜色为粉色，其余项无背景颜色。
  // 被选中的tab栏样式