事件机制（问题解答）

最新推荐文章于 2021-05-09 23:11:58 发布

菜鸡前端进阶

最新推荐文章于 2021-05-09 23:11:58 发布

阅读量161

点赞数

分类专栏：浏览器基础文章标签： javascript css css3 es6 html

本文链接：https://blog.csdn.net/weixin_42370640/article/details/105216789

版权

浏览器基础专栏收录该内容

10 篇文章 2 订阅

订阅专栏

问题列表

是不是所有事件都会有冒泡阶段？
捕获阶段有什么用？
在有些情况下我们并不希望捕获和冒泡阶段中当前事件的进一步传播，那么如何阻止捕获和冒泡？
如何注销一个事件？
比如像a标签，当你点击后会有一个默认行为，那么我们怎么取消默认事件？

第一个问题：是不是所有事件都会有冒泡阶段？

答：并不是所有事件都会有冒泡阶段，请参考https://developer.mozilla.org/zh-CN/docs/Web/Events关于事件的说明。

第二个问题：捕获阶段有什么用？

答：捕获阶段的主要任务是建立传播路经，在冒泡阶段根据这个路经回溯到文档根节点。

第三个问题：如何阻止捕获和冒泡？

答：w3c的方法是stopPropagation() IE下是用的cancelBubble = true来阻止。

例子

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>阻止事件捕获与冒泡</title>
</head>
<body>
<div class="div">
  <li class="li">
    <a href="#" class="a">click</a>
  </li>
</div>
<script type="text/javascript" src="index.js"></script>
</body>
</html>

javascript

window.onload = () =>{
    //取消冒泡与捕获函数
    function stopBubble(e){
      let evt = e||window.event;
      //w3c的方法是stopPropagation() IE下是用的cancelBubble = true
      evt.stopPropagation?evt.stopPropagation():(evt.cancelBubble = true);//阻止冒泡
      evt.preventDefault()//阻止默认事件

    }
    let a = document.querySelector('.a');
    let li = document.querySelector('.li');
    let div = document.querySelector('.div');
    a.addEventListener('click',(e)=>{
      console.log('a');
      stopBubble(e);
    })
    li.addEventListener('click',(e)=>{
      console.log('li');
    })
    div.addEventListener('click',(e)=>{
      console.log('div');
    })
  }

控制台
在这里插入图片描述
我们可以看到此时当我们点击a标签时，阻止了它的捕获和冒泡，如果你也想阻止li标签的，那么你也应该调用stopBubble(e)函数。

第四个问题：如何注销一个事件？

答：使用removeEventListener（）具体大家可以参考https://developer.mozilla.org/zh-CN/docs/Web/API/EventTarget/removeEventListener。

第五个问题：我们怎么取消默认事件？

答：取消默认事件只需要调用一下preventDefault()函数就可以了。

最后我们可以提取出一个函数既可以阻止捕获和冒泡也可以取消默认事件。

    //取消冒泡与捕获函数
    function stopBubble(e){
      let evt = e||window.event;
      //w3c的方法是stopPropagation() IE下是用的cancelBubble = true
      evt.stopPropagation?evt.stopPropagation():(evt.cancelBubble = true);//阻止冒泡
      evt.preventDefault()//阻止默认事件
    }