JavaScript事件冒泡和事件代理（委托）

最新推荐文章于 2024-01-25 16:34:59 发布

小丁冲鸭！

最新推荐文章于 2024-01-25 16:34:59 发布

阅读量393

点赞数

分类专栏： JavaScript 文章标签： JavaScript

本文链接：https://blog.csdn.net/DZY_12/article/details/102846097

版权

JavaScript 专栏收录该内容

30 篇文章 1 订阅

订阅专栏

一、什么是事件冒泡？

冒泡型事件：事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发。、

看了之后可能你还不理解，那么请看下面代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <div id="parentID" onclick="parentfunc()">
      <div id="childID" onclick="childfunc()">你好</div>
    </div>

    <script>
      function parentfunc() {
        alert("父级事件触发了！");
      }

      function childfunc() {
        alert("子级事件触发了！");
      }
    </script>
  </body>
</html>

本来在上面的代码中，点击你好只想触发childID元素的onclick事件，然而parentID元素也同时触发了，这就是事件冒泡。

二、如何阻止冒泡事件？

event.stopPropagation()

    <script>
      function parentfunc() {
        alert("父级事件触发了！");
      }

      function childfunc() {
        alert("子级事件触发了！");
        event.stopPropagation();
      }
    </script>

三、事件代理（委托）

1、意义

在JavaScript中，添加到页面上的事件处理程序的数量，将直接关系到页面的整体运行性能，因为需要不断的与dom节点进行交互，访问dom的次数越多，引起浏览器重绘与重排的次数也就越多，就会延长整个页面的交互就绪时间，这就是为什么性能优化的主要思想之一就是减少DOM操作的原因。

每个函数都是一个对象，是对象就会占用内存，对象越多，内存占用率越大，100个li就要占用100个内存空间。如果用事件委托，就会将所有的操作放到js程序里面，就只对它的父级(如果只有一个父级)这一个对象进行操作，与dom的操作就只需要交互一次，这样就能大大的减少与dom的交互次数，提高性能。

2、原理

事件委托是利用事件的冒泡原理来实现的，使用案例请见下面代码。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <ul id="ul">
	    <li>1</li>
        <li>2</li>
	    <li>3</li>
	    <li>4</li>
	    <li>5</li>
    </ul>
    <script>
	    let ul = document.querySelector('#ul')
	    ul.addEventListener('click', (event) => {
	    	console.log(event.target);
	    })
    </script>
  </body>
</html>

3、优点

节省内存
使页面性能更好

小丁冲鸭！

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript事件冒泡和事件代理（委托）

一、什么是事件冒泡？冒泡型事件：事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发。、看了之后可能你还不理解，那么请看下面代码：<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="...
复制链接

扫一扫

专栏目录