web中的事件委托

在前端开发中，我们经常碰到这样的应用场景，用列表（ul和li）展示许多条相似的数据，而且每条数据（dom）上都有类似的事件操作，例如线上商城购物车、招聘网站中招聘信息的展示等等，点击每条信息展示详细内容。如下图所示：

其代码如下：
招聘信息源码
如果在ul中的每个li都添加一个点击事件，不仅不方便，而且会影响网页性能。解决方法就是使用事件委托来定义点击事件。
事件委托的根本是根据浏览器事件的冒泡原理，简单复习一下这个概念。
1、事件捕获和冒泡的历史由来
浏览器发展到第四代，出现了一个有意思的事情，浏览器的哪一部分会拥有特定事件。例如：有如下代码，

<div id="main">
   <button id="btn1">按钮1</button>
</div>

当点击按钮1时，是div先接收到事件，还是button先接收到事件？
当时出现两种设计方案，即事件捕获和冒泡。
2、事件捕获
最外层最先接收事件，以上面代码为例，接收事件顺序即document->html->body->div->button.
3、事件冒泡
事件冒泡和事件捕获相反，最内层最先接收事件，接收事件顺序即button->div->body->html->document。
几乎所有浏览器都支持事件冒泡，早期版本的浏览器可能不支持事件捕获，所以在应用中，如需兼容早期版本浏览器，尽量使用事件冒泡。或使用DOM0级事件处理程序方法监听事件。
所以，用ul和li展示许多条数据时，li上的事件最终会冒泡到ul，我们只需要监听ul的点击事件，最后判断点击的是哪个li，即可完成事件监听。不啰嗦，上代码：


<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>test</title>
  </head>
  <body>
    <ul id="main">
      <li>NO.1</li>
      <li>NO.2</li>
      <li>NO.3</li>
      <li>NO.4</li>
      <li>NO.5</li>
      <li>NO.6</li>
      <li>NO.7</li>
    </ul>
    <script>
       let main = document.querySelector('#main');
       console.log(main);
       //ul处理函数，
       function handler(e){
         let event = e||window.event;
         //可以获取到具体是哪个li被点击，target是li的dom对象
         let target = event.target;
         //被点击的li背景设为红色
         target.style.background = 'red';
         console.log(target);
       }
       main.addEventListener('click',handler,false);
    </script>
  </body>
</html>

结果如下：
NO.2和NO.4被点击，背景色变红。
事件委托就介绍到这，欢迎大家批评指正。

猜你喜欢