js之事件冒泡和事件捕获

参考链接:https://segmentfault.com/a/1190000006667581
当在点击一个按钮时,实际上点击了按钮区域、body区域和html区域。

js的dom事件流

三个阶段
1、捕获
2、处于目标阶段
3、冒泡

事件冒泡

  • 认为事件触发的最深层元素首先接收事件,然后是它的父元素,一次向上。最后到达body、html、document.

  • 即事件冒泡就是事件触发时,会从目标DOM元素向上传播,直到文档根节点,一般情况下,会是如下形式传播:
    targetDOM → parentNode → ... → body → document → window

  • 如果想使用冒泡机制,就在addEventListener('click',function(evt){
    alert('button clicked');
    },false);这种监听函数里设置第三个参数为false。
    此时点击这个元素,会依次触发各级的click。

  • 但当我们想要让事件独立触发时,必须阻止冒泡,要使用event的stopPropagation()方法

    <button id="btn">ClickMe</button>
    /* js */
    // 给按钮增加click监听
    document.getElementById('btn').addEventListener('click',function(evt){
      alert('button clicked');
      evt.stopPropagation(); //阻止事件冒泡
    },false);
    // 给body增加click监听
    document.body.addEventListener('click',function(evt){
      alert('body clicked');
    },false);

    点击按钮后,只会触发按钮本身的click事件,得到一个alert效果;该按钮的点击事件,不会向上传播,body节点就接收不到此次事件命令。

  • 注意注意!
    不是所有的事件都能冒泡,如blur、focus、load、unload就不能
    在ie中要使用event.cancelBubble=true来阻止冒泡

事件捕获

与事件冒泡相反,由外向内触发事件

全部评论

相关推荐

05-07 13:29
已编辑
门头沟学院 Java
北斗导航Compass低仿版:能不能先搞清楚优先级啊,怎么可能是项目问题,项目很重要吗?又没学历 又没实习大厂凭啥约面?那玩具项目 没应用在真实生产环境下的 就算做上天又有什么用?早点找个小公司实习 拿小公司实习去投大厂实习,这才是你现在该做的
投递美团等公司10个岗位 简历被挂麻了,求建议
点赞 评论 收藏
分享
评论
1
1
分享

创作者周榜

更多
牛客网
牛客企业服务