【DOM】浏览器事件——JS事件传播与事件委派

最新推荐文章于 2022-05-11 16:41:30 发布

Dark Horse

最新推荐文章于 2022-05-11 16:41:30 发布

阅读量261

点赞数

分类专栏： DOM 文章标签： dom javascript js event

本文链接：https://blog.csdn.net/weixin_48989252/article/details/109706948

版权

DOM 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

一、事件传播

1、是什么

当事件发生在DOM元素上时，该事件并不完全发生在这个元素上。

事件传播是客观存在，无论是否给元素某个事件添加回调函数，这只会影响当事件触发时，是否会给用户反馈。无论元素是否添加回调函数，事件依旧正常传播。

关于事件传播，IE和网景公司有不同的理解，IE认为，事件应该是捕获阶段，网景公司认为事件应该是捕获阶段，随后W3C综合了两个公司的方案，将事件传播分为了三个阶段。

2、事件传播的三个阶段

（1）捕获阶段
事件从window开始，由外向内，直到到达目标事件或event.target。
捕获过程不会触发事件，只是看看谁有。
（2）目标阶段
事件到达目标元素，触发监听事件。
（3）冒泡阶段
事件从目标元素开始冒泡，从内向外，直到到达 window。
在这里插入图片描述

3、阻止事件冒泡

（1）谷歌火狐
event.stopPropagation();
（2）ie
window.event.cancelBubble = true;

<body>
<div class="wai">
    <div class="zhong">
        <div class="nei"></div>
    </div>
</div>
<script>
  window.onload =function () {
     var wai = document.querySelector('.wai');
     var zhong = document.querySelector('.zhong');
     var nei = document.querySelector('.nei');
   wai.onclick = function () {
	   console.log('我是最外层');
   };
   zhong.onclick = function (event) {
	   console.log('我是中间层');
	   // 阻止事件冒泡 最外层不会触发了 不包括当前
	   // 谷歌火狐		
	   // event.stopPropagation();  
	   
	   // ie特有  
	   // window.event.cancelBubble = true;
   };
   nei.onclick = function () {
	   console.log('我是最里层');
   }//里 中 触发

二、事件委托

1、应用场景

当子元素有很多，且子元素的事件监听逻辑都相同

2、原理

（1）利用事件冒泡 ——> 子元素触发，父元素也会执行回调函数
子元素身上没有，一层一层往外冒，有了。
（2）将事件监听绑定到元素共有的祖先元素上
注：父元素一定要存在页面上不能是新增的

3、好处

（1）减少事件的绑定次数
（2）新增元素不需要单独绑定

4、案例

Event.target 发生事件的那个元素

<body>
 <ul>
   <li>我是列表项1</li>
   <li>我是列表项2</li>
   <li>我是列表项3</li>
   <li>我是列表项4</li>
 </ul>
<script>
  window.onload = function () {
    var ulNode = document.querySelector('ul');
    ulNode.onmouseover = function (event) {
    // 绑定给祖先元素 四个li都有了
    event = event || window.event		
    // 事件对象上有一个属性叫做target  （事件源）
    // 要保证我的逻辑都是有li触发的
    if(event.target.nodeName == 'LI'){		
       event.target.style.backgroundColor = 'pink';
         }
     };
    ulNode.onmouseout = function (event) {
       if(event.target.nodeName == 'LI'){
           event.target.style.background = '#fff';
       }
    }
  }
</script>

Dark Horse

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【DOM】浏览器事件——JS事件传播与事件委派

一、事件传播1、是什么当事件发生在DOM元素上时，该事件并不完全发生在这个元素上。事件流是客观存在，无论是否给元素某个事件添加回调函数，这只会影响当事件触发时，是否会给用户反馈。无论元素是否添加回调函数，事件依旧正常传播。关于事件传播，IE和网景公司有不同的理解，IE认为，事件应该是捕获阶段，网景公司认为事件应该是捕获阶段，随后W3C综合了两个公司的方案，将事件传播分为了三个阶段。2、事件传播的三个阶段（1）捕获阶段事件从window开始，由外向内，直到到达目标事件或event.target。
复制链接

扫一扫