js事件深入学习

JavaScript的事件机制包含，事件绑定、事件监听、事件委托（事件代理）等

js中的事件流

• ① .冒泡：当下级节点触发某个事件的时候，该事件会逐级向上触发上级节点的同类事件。

• ② .捕获：和冒泡类似，只不过事件的顺序相反。即是从上级节点传递到下级节点

事件绑定

• 在DOM元素中直接绑定；
• 在JavaScript代码中绑定；
• 绑定事件监听函数addEventListener()。

事件监听

• 关于事件监听，W3C规范中定义了3个事件阶段，依次是捕获阶段、目标阶段、冒泡阶段。
• 优点：1.可以绑定多个事件；2.可以解除相应的绑定

事件委托

• 定义：给父元素绑定事件，用来监听子元素的冒泡事件，并找到是哪个子元素的事件。

• 好处：可以避免对每个子元素添加监听器，减少操作DOM节点的次数，从而减少浏览器的重绘和重排，提高代码的性能。使用事件委托，只有父元素与DOM存在交互，其他的操作都是在JS虚拟内存中完成的，这样就大大提高了性能。

• 使用场景：当子元素有很多，需要对子元素的事件进行监听的时候。

• 步骤：

  • 第一步：给父元素绑定事件
    给元素ul添加绑定事件，通过addEventListener为点击事件click添加绑定
  • 第二步：监听子元素的冒泡事件
    这里默认是冒泡，点击子元素li会向上冒泡
  • 第三步：找到是哪个子元素的事件
    通过匿名回调函数的参数e用来接收事件对象，通过target获取触发事件的目标