彻底搞懂JS事件冒泡与捕获

Half 发布于2019-08-02 15:29 / 1387人阅读

摘要：事件冒泡与事件捕获事件冒泡和事件捕获分别由微软和网景公司提出，这两个概念都是为了解决页面中事件流事件发生顺序的问题。如下假设三层都有事件监听，这时我们点击的小的蓝方框，事件执行的顺序是怎么样的呢红黄蓝事件冒泡微软提出了名为事件冒泡的事件流。

事件冒泡与事件捕获

事件冒泡和事件捕获分别由微软和网景公司提出，这两个概念都是为了解决页面中事件流（事件发生顺序）的问题。

如下：假设三层div都有事件监听，这时我们点击的小的蓝方框，事件执行的顺序是怎么样的呢

事件冒泡

微软提出了名为事件冒泡(event bubbling)的事件流。事件冒泡可以形象地比喻为把一颗石头投入水中，泡泡会一直从水底冒出水面。也就是说，事件会从最内层的元素开始发生，一直向上传播，直到document对象。
因此在事件冒泡的概念下在div元素上发生click事件的顺序应该是div -> body -> html -> document

事件捕获

网景提出另一种事件流名为事件捕获(event capturing)。与事件冒泡相反，事件会从最外层开始发生，直到最具体的元素。
因此在事件捕获的概念下在div元素上发生click事件的顺序应该是document -> html -> body -> div -> div

w3c 采用折中的方式，制定了统一的标准——先捕获再冒泡。

addEventListener第三个参数默认值是false，表示在事件冒泡阶段调用事件处理函数;如果参数为true，则表示在事件捕获阶段调用处理函数。

测试事件冒泡-点击蓝色

    s1 = document.getElementById("s1")
    s2 = document.getElementById("s2")
    s3 = document.getElementById("s3")

    s1.addEventListener("click",function(e){
        console.log("红 冒泡事件");//从底层往上
    },false);//第三个参数默认值是false，表示在事件冒泡阶段调用事件处理函数;如果参数为true，则表示在事件捕获阶段调用处理函数。
    s2.addEventListener("click",function(e){
        console.log("黄 冒泡事件");
    },false);
    s3.addEventListener("click",function(e){
        console.log("蓝 冒泡事件");
    },false);

测试事件捕获-点击蓝色

s1.addEventListener("click",function(e){
        console.log("红 捕获事件");
    },true);

    s2.addEventListener("click",function(e){
        console.log("黄 捕获事件");

    },true);
    s3.addEventListener("click",function(e){
        console.log("蓝 捕获事件");
    },true);

事件捕获与事件冒泡同时存在-先捕获后冒泡

这里记被点击的DOM节点为target节点,document 往 target节点，捕获前进，遇到注册的捕获事件立即触发执行

到达target节点，触发事件

对于target节点上，是先捕获还是先冒泡则捕获事件和冒泡事件的注册顺序，先注册先执行

arget节点往 document 方向，冒泡前进，遇到注册的冒泡事件立即触发

    s1.addEventListener("click",function(e){
        console.log("红 冒泡事件");
    },false);
    s2.addEventListener("click",function(e){
        console.log("黄 冒泡事件");
    },false);
    s3.addEventListener("click",function(e){
        console.log("蓝 冒泡事件");
    },false);

    s1.addEventListener("click",function(e){
        console.log("红 捕获事件");
    },true);

    s2.addEventListener("click",function(e){
        console.log("黄 捕获事件");

    },true);
    s3.addEventListener("click",function(e){
        console.log("蓝 捕获事件");
    },true);

应用：事件委托（也叫事件代理）

比如我想点击ul标签里面的li获取它的值,有点人就会遍历去给每个li加一个事件监听
其实我们可以在li的父级加一个事件监听，这就相当于把事件监听委托给了ul
我们点击li的时候是会打出值的

ul = document.getElementById("ur")

    ul.addEventListener("click",function(e){
        console.log(e.target.innerText);
    },false);

onclick事件分析

onclick不能像addEventListener那样指定是事件类型，它只能是事件冒泡

    s1.onclick=function(){
        console.log("红")
    }
    s2.onclick=function(){
        console.log("黄")
    }
    s3.onclick=function(){
        console.log("蓝")
        return true
    }

阻止事件冒泡和事件默认行为

但某一些时候我们不想触发事件冒泡怎么办或者是不想触发默认的一些方法

e.stopPropagation()

这是W3C的标准方法，stopPropagation是事件对象(Event)的一个方法，作用是阻止目标元素的冒泡事件，但是会不阻止默认行为。
IE使用的是IE则是使用e.cancelBubble = true

function stopBubble(e) { 
//如果提供了事件对象，则这是一个非IE浏览器 
if ( e && e.stopPropagation ) 
    //因此它支持W3C的stopPropagation()方法 
    e.stopPropagation(); 
else 
    //否则，我们需要使用IE的方式来取消事件冒泡 
    window.event.cancelBubble = true; 
}

e.preventDefault()

preventDefault它是事件对象(Event)的一个方法，作用是取消一个目标元素的默认行为。既然是说默认行为，当然是元素必须有默认行为才能被取消，如果元素本身就没有默认行为，调用当然就无效了。什么元素有默认行为呢？如链接，提交按钮等。当Event 对象的 cancelable为false时，表示没有默认行为，这时即使有默认行为，调用preventDefault也是不会起作用的。

return false

javascript的return false只会阻止默认行为，而是用jQuery的话则既阻止默认行为又防止对象冒泡。

//阻止浏览器的默认行为 总结
function stopDefault( e ) { 
    //阻止默认浏览器动作(W3C) 
    if ( e && e.preventDefault ) 
        e.preventDefault(); 
    //IE中阻止函数器默认动作的方式 
    else 
        window.event.returnValue = false; 
    return false; 
}

GPU云服务器云服务器 js阻止冒泡事件冒泡事件事件冒泡事件冒泡机制

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/54160.html

彻底搞懂JS事件冒泡与捕获

摘要：事件冒泡与事件捕获事件冒泡和事件捕获分别由微软和网景公司提出，这两个概念都是为了解决页面中事件流事件发生顺序的问题。如下假设三层都有事件监听，这时我们点击的小的蓝方框，事件执行的顺序是怎么样的呢红黄蓝事件冒泡微软提出了名为事件冒泡的事件流。事件冒泡与事件捕获事件冒泡和事件捕获分别由微软和网景公司提出，这两个概念都是为了解决页面中事件流（事件发生顺序）的问题。如下：假设三层div都...

zhangxiangliang 2019-08-23 18:36 评论0 收藏0
彻底搞懂JS事件冒泡与捕获

摘要：事件冒泡与事件捕获事件冒泡和事件捕获分别由微软和网景公司提出，这两个概念都是为了解决页面中事件流事件发生顺序的问题。如下假设三层都有事件监听，这时我们点击的小的蓝方框，事件执行的顺序是怎么样的呢红黄蓝事件冒泡微软提出了名为事件冒泡的事件流。事件冒泡与事件捕获事件冒泡和事件捕获分别由微软和网景公司提出，这两个概念都是为了解决页面中事件流（事件发生顺序）的问题。如下：假设三层div都...

周国辉 2019-08-30 11:22 评论0 收藏0
白话解释 Javascript事件preventDefault,stopPropagation及re

摘要：如图使用事件捕获模式注册事件监听对最外层，中间层，最内层分别用捕获模式注册事件监听，我们上面说了，如果使用捕获模式，那么第三个参数应该是，否则则是冒泡模式，如果不声明，默认为冒泡模式。来源: 个人博客想必好多童鞋都有直接复制粘贴event.preventDefault() 或者event.stopPropagation() 的经历，但是为什么这样做不甚了解，今天我们的目的就是要彻...

chanjarster 2019-08-21 15:09 评论0 收藏0
又被事件冒泡坑了一把，这次要彻底弄懂浏览器的事件流

摘要：事件冒泡一个简单，但是坑了我无数回的知识点与的交互通过事件来实现。而浏览器的事件流是一个非常重要的概念。不去讨论那些古老的浏览器有事件捕获与事件冒泡的争议，只需要知道在中规定的事件流包括了三个部分，事件捕获阶段处于目标阶段事件冒泡阶段。打算封装一个弹窗组件，做的时候忘记了考虑事件冒泡的因素，结果被坑得不要不要的。为了解决自己的问题，去查阅了不少资料，把事件流相关的知识都给总结一下。 ...

Ocean 2019-08-19 18:33 评论0 收藏0