前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >javascript入门到进阶 - 事件冒泡和事件委托详解

javascript入门到进阶 - 事件冒泡和事件委托详解

作者头像
公众号---人生代码
发布2020-07-14 11:04:19
6020
发布2020-07-14 11:04:19
举报
文章被收录于专栏:人生代码

事件冒泡

❝当一个子元素的事件被触发的时候(例如onclick事件), 该事件会从事件(被电击的元素) 开始逐个向上传播,触发父级元素的点击事件 ❞

上图吧

HTML代码

代码语言:javascript
复制
<html>
<head></head>
<body>
 <ul>
  <li>111</li>
  <li>222</li>
  <li>333</li>
 </ul>
</body>
</html>

JAVASCRIPT代码

代码语言:javascript
复制
var oLis = document.querySelectorAll('li');
var length = oLis,length;
for(let i=0;i<length;i++){
 oLis[i].onclick = function(){
  alert(this.innerHTML);
 }
}

如果你点击了页面中的 li 标签,那么这个click事件会按照如下 (1)li (2)ul (3)body (4)html (5)document 也就是说click事件首先在 li 元素上触发, 而这个元素就是我们点击的元素,然后点击事件沿着DOM树向上传播 在每一个节点上触发,直到传播到document对象 我自己画了一个事件冒泡的示意图如下

这里写图片描述

事件委托

❝什么是事件委托: ❞

❝事件委托——给父元素绑定事件,用来监听子元素的冒泡事件,并找到是哪个子元素的事件。(不理解冒泡的可以去百度下) ❞

❝定义:利用事件冒泡处理动态元素事件绑定的方法,专业术语叫事件委托。使用事件委托技术可以避免对特定的每个节点添加事件监听器,相反,事件监听器是被添加到它们的父元素上。事件监听器会分析从子元素冒泡上来的事件,找到是哪个子元素的事件。 ❞

❝事件委托的好处: ❞

❝事件委托技术可以避免对每个字元素添加事件监听器,减少操作DOM节点的次数,从而减少浏览器的重绘和重排,提高代码的性能。 ❞

❝使用事件委托,只有父元素与DOM存在交互,其他的操作都是在JS虚拟内存中完成的,这样就大大提高了性能。 ❞

❝什么时候用事件委托: ❞

❝当子元素有很多,需要对子元素的时间进行监听的时候 ❞

代码语言:javascript
复制
1. var ul = document.getElementById('parentUl');  

2.     ul.onclick=function (event) {  

3.       var e = event||window.event,  

4.               source = e.target || e.srcElement;
5. //target表示在事件冒泡中触发事件的源元素,在IE中是srcElement  

6.         if(source.nodeName.toLowerCase() == "li"){   
7.              //判断只有li触发的才会输出内容  

8.             alert(source.innerHTML);  

9.         }  

10.         stopPropagation(e);      //阻止继续冒泡  

11.     };  

这里写图片描述

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2020-07-07,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 CryptoCode 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 事件冒泡
  • 事件委托
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档