js学习之事件的传播机制

最新推荐文章于 2023-07-06 20:15:18 发布

qq_32021429

最新推荐文章于 2023-07-06 20:15:18 发布

阅读量166

点赞数 1

分类专栏： javaScript学习文章标签： javascript js

本文链接：https://blog.csdn.net/qq_32021429/article/details/109514771

版权

javaScript学习专栏收录该内容

38 篇文章 0 订阅

订阅专栏

事件的传播机制

/* 
 * 事件的传播机制
      + 捕获阶段：从最外层的元素一直往里层逐级查找，直到找到事件源为止，目的就是为冒泡阶段的传播提供路径 =>ev.path存储的就是捕获阶段收集的传播路径
      + 目标阶段：把当前事件源相关事件行为触发
      + 冒泡阶段：按照捕获阶段收集的传播路径。不仅仅当前事件源的相关事件行为会被触发，而且从内向外，其祖先所有元素的相关事件行为也都会被触发（如果做了事件绑定，那么绑定的方法也会执行）
*/

/* 
 * DOM0事件绑定中给元素事件行为绑定的方法，会在目标阶段和冒泡阶段触发
 * DOM2事件绑定，可以控制绑定的办法在捕获阶段触发（不过没啥用）
 
 * 阻止事件的冒泡传播
    + ev.stopPropation();
    + ev.cancelBubble = true


 * 事件委托：利用事件的冒泡传播机制，只需要给最外层的元素进行事件绑定方法，在方法中通过事件源的判断，从而实现不同元素的的事件行为做不同的操作

*/

let box = document.querySelector('.box'),
      outer = document.querySelector('.outer'),
      inter = document.querySelector('.inner');

  box.onclick = function(){
    console.log('box');
  }
  outer.onclick = function(){
    console.log('outer');
  }
  inter.onclick = function(ev){
    ev.stopPropagation(); // 点击 inner只会输出 inter了
    console.log('inter');
  }


  // 利用事件委托来实现
 document.body.onclick = function(ev) {
    // console.log(ev);
    if(ev.target.className === 'box'){
      console.log('box');
      return;
    }
    if(ev.target.className === 'outer'){
      console.log('outer');
      return;
    }
    if(ev.target.className === 'inner'){
      console.log('inner');
      return;
    }
  }

<!-- 样式 -->
<style>
    .box {
      margin: 0 auto;
      padding-top: 60px;
      width: 400px;
      height: 300px;
      background: lightblue;
    }
    .outer {
      margin: 0 auto;
      padding-top: 50px;
      width: 200px;
      height: 200px;
      background: lightcoral;
    }
    .inner {
      margin: 0 auto;
      /* padding-top: 20px; */
      width: 100px;
      height: 100px;
      background: lightsalmon;
    }
  </style>

  <!-- 结构 -->
  <body>
  <div class="box">
    <div class="outer">
      <div class="inner"></div>
    </div>
  </div>
</body>

mouseover和mouseenter区别

  // 还是以上面的结构为例子
let box = document.querySelector('.box'),
      outer = document.querySelector('.outer');

 box.onmouseover = function(){
   console.log('box mouseover')
 }
 box.onmouseout = function(){
   console.log('box mouseout')
 }
// 从父元素滑入到子元素，属于离开父元素，滑入新的元素，会触发onmouseover/onmouseout
// onmouseover/onmouseout 是按照鼠标在谁上面来决定的


 box.onmouseenter = function(){
   console.log('box mouseenter')
 }
 box.onmouseleave = function(){
   console.log('box mouseleave')
 }
 // 从父元素滑入到子元素，任然属于在父元素内，并不会触发父元素的mouseleave
 // nonmouseleave/onmouseenter  是按照元素层级来决定的，且默认阻止了事件冒泡传播机制

qq_32021429

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
js学习之事件的传播机制

事件的传播机制/* * 事件的传播机制 + 捕获阶段：从最外层的元素一直往里层逐级查找，直到找到事件源为止，目的就是为冒泡阶段的传播提供路径 =>ev.path存储的就是捕获阶段收集的传播路径 + 目标阶段：把当前事件源相关事件行为触发 + 冒泡阶段：按照捕获阶段收集的传播路径。不仅仅当前事件源的相关事件行为会被触发，而且从内向外，其祖先所有元素的相关事件行为也都会被触发（如果做了事件绑定，那么绑定的方法也会执行）*//* * DOM0事件绑定中给元
复制链接

扫一扫