欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

web中的事件委托

程序员文章站 2022-05-06 09:45:50
...

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

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

相关标签： JavaScript 事件监听 事件委托

上一篇： C语言---实现单链表的插入和删除操作

下一篇： poshytip实现页面记录未展示的部分通过提示框展示

推荐阅读