精华内容
下载资源
问答
  • 事件冒泡与事件捕获

    2021-01-20 13:31:38
    事件冒泡原理 从下至上 从最里面元素事件冒泡到最外层父级元素上 大哥 二哥 三弟 var a = document.getElementsByClassName('a')[0] var b = document.getElementsByClassName('b')[0] var c = document....
  • 本文主要介绍了JS中绑定事件顺序(事件冒泡与事件捕获区别)。具有很好的参考价值,下面跟着小编一起来看下吧
  • 本文实例讲述了JavaScript事件冒泡与事件捕获。分享给大家供大家参考,具体如下: 1、事件冒泡 在一个对象上触发某类事件,如onclick事件等,在其祖先节点上也会依次触发该事件。 <body onclick=alert('body...
  • 本文主要介绍了js事件冒泡与事件捕获的相关知识。具有很好的参考价值,下面跟着小编一起来看下吧
  • DOM事件标准定义了两种事件流,这两种事件流有着显著的不同并且可能对你的...和许多Web技术一样,在它们成为标准之前,Netscape和微软各自不同地实现了它们,下面介绍DOM事件阶段以及事件捕获与事件冒泡先后执行顺序
  • 事件流可分为冒泡事件流、捕获事件流。 (1)事件冒泡:微软公司提出的,事件由子元素传递到父元素的过程叫做冒泡(false)。 查找事件事件响应)的顺序:文本节点–>元素节点—>body—>html—>...

    事件流

    概念

    首先,我们来了解一下什么是事件流。

    事件流:当事件发生时,会在发生事件的元素节点与DOM树根节点之间按照特定的顺序进行传播, 这个过程称之为事件流。

    (当页面触发一个事件时,会按照一定的顺序来响应事件,事件的响应过程称为事件流。)

    分类

    事件流可分为冒泡型事件流、捕获型事件流。

    (1)事件冒泡:微软公司提出的,事件由子元素传递到父元素的过程叫做冒泡(false)。

    查找事件(事件响应)的顺序:文本节点–>元素节点—>body—>html—>document(例如点击事件)<向上响应>

    (2)捕获事件:网景公司提出的,事件由父元素传递到子元素的过程叫做事件捕获。(ture)

    查找事件(事件响应)的顺序:document–>html–>body–>元素节点–>文本节点 <向下响应>

    应用

    在使用"事件监听"的方式绑定事件时,可以设置事件的响应方式。

    DOM对象.addEventListener(事件,事件处理程序,事件冒泡方式)

    事件冒泡方式:

    (1)默认为false,表示冒泡阶段完成事件处理

    (2)true捕获阶段完成事件处理

    例如:

    <div class="father">father
            <div class="son">son</div>
        </div>
    
        <script>
            father=document.querySelector('.father')
            son=document.querySelector('.son')
            father.addEventListener('click',function(){
                alert('father')
            })
            
            son.addEventListener('click',function(){
                alert('son')
            })   //事件冒泡
        </script>
    

    事件冒泡方式:son——>father——>body——>html——>document
    son绑定的点击事件,没有设置事件流方式,默认的事件流类型为false(事件冒泡),当点击son盒子的时候,事件流向上冒泡,首先弹出son消息框,再弹出father消息框。

    在这里插入图片描述
    在这里插入图片描述

    阻止事件冒泡的方式

    常用方法:

    (1)事件委托:将元素的绑定事件写起其父元素上,防止事件冒泡

    (2)event.stopPropagation():可以阻止事件冒泡,阻止父级元素的绑定事件

    son.addEventListener('click',function(e){
        alert('son')
        e.stopPropagation();   //阻止事件冒泡
    }) 
    

    上面的例子中,加上e.stopPropagation()这句话,当点击son元素时,只会弹出son的弹窗,不加上这句话,点击son元素,会先弹出son,再弹出father。

    展开全文
  • 很显然算,不然就没有必要区分事件冒泡事件捕获了,这一点各个浏览器厂家也没有什么疑义。 假如outA、outB、outC都注册了click类型事件处理函数,当点击outC的时候,触发顺序是A-->B-->C,还是C-->B--&...

    如果点击了最内侧的outC,那么外侧的outB和outC算不算被点击了呢?

    很显然算,不然就没有必要区分事件冒泡和事件捕获了,这一点各个浏览器厂家也没有什么疑义。

    假如outA、outB、outC都注册了click类型事件处理函数,当点击outC的时候,触发顺序是A-->B-->C,还是C-->B-->A呢?如果浏览器采用的是事件冒泡,那么触发顺序是C-->B-->A,由内而外,像气泡一样,从水底浮向水面;如果采用的是事件捕获,那么触发顺序是A-->B-->C,从上到下,像石头一样,从水面落入水底。

    所以总结:

    .capture  点击事件是由外向内的 即点击内部的按钮触发的事件,会先从外面执行,然后到刚点击的事件上。

    展开全文
  • 1、事件冒泡在一个对象上触发某类事件,如onclick事件等,在其祖先节点上也会依次触发该事件事件冒泡依次输出:a、div、body注意:不是所有的事件都能冒泡。blur、focus、load、unload等事件冒泡。2、阻止事件...

    1、事件冒泡

    在一个对象上触发某类事件,如onclick事件等,在其祖先节点上也会依次触发该事件。

    依次输出:a、div、body

    注意:不是所有的事件都能冒泡。blur、focus、load、unload等事件不冒泡。

    2、阻止事件冒泡

    若只希望事件发生在该子元素而不是在它的祖先元素上,则需要阻止事件冒泡。

    IE浏览器和其他浏览器阻止事件冒泡的方式不同:

    兼容说明:

    function stopBubble(e){

    if(e && e.stopPropagation)

    e.stopPropagation(); // 非IE浏览器

    else

    window.event.cancelBubble = true; // IE浏览器

    }

    html:

    JS

    function stopBubble(e){

    if(e && e.stopPropagation)

    e.stopPropagation(); // 非IE浏览器

    else

    window.event.cancelBubble = true; // IE浏览器

    }

    document.getElementsByTagName("body")[0].onclick = function(e) {

    stopBubble(e);

    alert('body');

    }

    document.getElementsByTagName("div")[0].onclick = function(e) {

    stopBubble(e);

    alert('div');

    }

    document.getElementsByTagName("a")[0].onclick = function(e) {

    stopBubble(e);

    alert('a');

    }

    输出:a

    3、事件冒泡与事件捕获

    事件捕获:事件从document开始往下查找,直到捕获到事件目标(target)。

    事件冒泡:事件从事件目标(target)开始,往上冒泡直到document为止。

    传统的element.onclick = doSomething这样的事件绑定,一般采用的是事件冒泡形式。

    html:

    传统的事件冒泡

    js:

    document.getElementsByTagName("p")[0].onclick = function(e){

    alert('p');

    };

    document.getElementsByTagName("div")[0].onclick = function(e){

    alert('div');

    };

    依次输出:p、div

    其实,可以选择绑定事件时采用事件捕获还是事件冒泡,方法是绑定事件时通过addEventListener函数,它有3个参数,第3个参数若是true,则表示采用事件捕获,若是false,则表示采用事件冒泡,如element.addEventListener('click', doSomething, true)。

    html:

    设置的事件冒泡

    js:

    document.getElementsByTagName("p")[0].addEventListener('click', function(e){

    alert('p');

    }, false);

    document.getElementsByTagName("div")[0].addEventListener('click', function(e){

    alert('div');

    }, false);

    依次输出:p、div

    html:

    设置的事件捕获

    document.getElementsByTagName("p")[0].addEventListener('click', function(e){

    alert('p');

    }, true);

    document.getElementsByTagName("div")[0].addEventListener('click', function(e){

    alert('div');

    }, true);

    依次输出:div、p

    注意:Chrome和Firefox都支持事件捕获和事件冒泡,但IE只支持事件冒泡,不支持事件捕获,也不支持addEventListener函数,提供了另一个函数attachEvent,如ele.attachEvent("onclick", doSomething)。

    展开全文
  • 抽空学习了下javascript和jquery的事件设计,收获颇大,总结此贴,和大家分享。 (一)事件绑定的几种方式 javascript给DOM绑定事件处理函数总的来说有2种方式:在html文档中绑定、在js代码中绑定。下面的方式1、方式2...
  • 什么是冒泡与捕获         以click点击事件为例。假如我们有一个多层结构标签。如下图,是4个div嵌套。每个div都有点击的监听事件,分别输出1234。当我们点击最里面的div时,点击事件开始传递,...

    什么是冒泡与捕获
    以click点击事件为例。假如我们有一个多层结构标签。如下图,是4个div嵌套。每个div都有点击的监听事件,分别输出1234。当我们点击最里面的div时,点击事件开始传递,传递的全过程是1-2-3-4-4-3-2-1。
    前半部分,事件从最外面的父div依次传递到最里面的后代div,1-2-3-4这部分我们叫捕获过程。
    之后事件又从最里层的后代div逐层传出,4-3-2-1这部分我们叫冒泡过程。

    如果我把捕获监听器和冒泡监听器都加上,如下图这样。
    事件传递

    这时我们有8个监听器了,在捕获过程和冒泡过程都有监听。输出如下图。
    先捕获后冒泡

    如果我去除几个监听器如下图。为了容易理解我调整了格式
    举一反三

    仍然是按照箭头顺序,明显应该输出1423。
    举一反三

    添加两种监听的方法
    在不使用任何框架的情况下,我们在js中通过addEventListener方法给Dom添加事件监听。这个方法有三个参数可以传递addEventListener(event,fn,useCapture)。event是事件类型click,focus,blur等;fn是事件触发时将执行的函数方法(function);第三个参数可以不传,默认是false,这个参数控制是否捕获触发。所以我们只穿两个参数时,这个事件是冒泡传递触发的,当第三个参数存在且为true时,事件是捕获传递触发的。

    使用框架时可使用对应的框架提供的方法。如上面我使用了Vue框架,通过事件装饰来区分捕获与冒泡。

    阻止传递
    在不使用任何框架的情况下,我们在js中通过stopPropagation方法阻止事件继续传递。
    使用框架时可使用对应的框架提供的方法。接下来我将了Vue框架的stop修饰符来阻止事件传递。

        我们可以在传递过程中阻止事件继续传递,防止触发不需要的事件。
    

    在这里插入图片描述

    阻止传递
    如图我在第三层捕获后阻止事件继续传递,那么后面的log方法不会继续执行。最终只输出1-2-3。
    输出结果

    应用场景举例
    我们在使用中多数情况下只使用冒泡监听。例如一条购物车信息,在这条信息中,右下角有一个删除按钮。点击这条消息可查看详情,点击删除按钮可将此商品移除。我们会分别给信息的div和删除button添加一个冒泡的click事件监听。如果不做阻止传递,点击删除button后,会显示商品详情。显然这不是我们想看到的。这时我们给button一个阻止事件传递的功能,点击删除按钮后,事件就会结束,就不再显示商品详情。

    作者:苏茶茉芳_亚泽伊
    链接:https://www.jianshu.com/p/3f0ee1f6ec30
    来源:简书
    著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

    展开全文
  • 主要介绍了一JS的事件冒泡事件捕获,通过代码举例详细描述了两者之间的差别,需要的朋友可以参考下
  • 谈起JavaScript的 事件事件冒泡事件捕获、阻止默认事件这三个话题,无论是面试还是在平时的工作中,都很难避免。 事件捕获阶段:事件从最上一级标签开始往下查找,直到捕获事件目标(target)。 事件冒泡阶段:...
  • 事件流描述的是从页面中接受事件的顺序,事件流分为事件冒泡 事件阶段 事件捕获事件流分为事件冒泡流和事件捕获流 ​ 事件冒泡流 => ie提出的 ​ 事件捕获流 => 网景提出的 ​ 事件流三...
  • 什么是事件冒泡与事件捕获,如何阻止事件冒泡 事件冒泡 事件由具体的dom节点 接收,然后逐级向上传播到不具体的节点。是一种由内到外的传播
  • js 事件冒泡事件捕获

    万次阅读 多人点赞 2018-07-18 16:33:59
    一块: 事件流描述的是从页面接收事件的顺序。  IE的事件冒泡事件流,  而firefox的事件流是捕获事件流。...事件传递有两种方式:冒泡与捕获事件传递定义了元素事件触发的顺序。 如果你将 &l...
  • Javascript事件流(事件捕获事件冒泡)–>事件委托(代理) JavascriptHTML之间的交互是通过“事件”实现的。事件,就是文档或浏览器窗口发生的一些特定的交互瞬间,当我们浏览器中的web页面进行特定的交互时...
  • 事件冒泡与事件捕获 事件冒泡和事件捕获分别由微软和网景公司提出,这两个概念都是为了解决页面中事件流(事件发生顺序)的问题。 <div id="outer"> <p id="inner">Click me!</p> </div> ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 40,781
精华内容 16,312
关键字:

事件冒泡与事件捕获