精华内容
下载资源
问答
  • 事件冒泡和捕获区别及应用场景

    千次阅读 2020-07-23 14:55:48
    捕获 是从最外层不确定对象,定位至精确对象过程。 过程图 举个栗子 html部分 <div id="parentId"> 父级 <div id="childId1">子级1</div> <div id="childId2">子级2</div> </...

    概念

    冒泡
    是从指定对象向上冒泡至不确定对象。例如:点击button时,是从button级div不断冒泡至window层。
    捕获
    是从最外层不确定对象,定位至精确对象过程。
    过程图
    在这里插入图片描述

    举个栗子

    html部分

    <div id="parentId">
       父级
      <div id="childId1">子级1</div>
      <div id="childId2">子级2</div>
    </div?
    

    js部分,注册事件

    let parent=document.getElementById('parentId');
    let childId1=document.getElementById('childId1');
    parent.addEventListener('click',function(){
                alert('父级');
            },false);
    childId1.addEventListener('click',function(){
                alert('子级1');
            },false);
    

    addEventListener第三个参数,true代表是捕获阶段执行,false代表冒泡阶段执行。

    • 当我们点击父级文本时,会先触发parent点击事件,弹出“父级”,向上冒泡上一级发现没有其他事件,结束。
    • 当我们点击子级1文本时,会先触发childId1点击事件,弹出“子级1”,向上冒泡执行parent事件,弹出“父级”,冒泡结束。

    实际应用

    在我们有很多子级div需要绑定事件,如果子级较多,每个子级节点分别绑定事件时,性能会很差。这时候,就需要使用冒泡模式。
    在父级绑定事件,通过事件代理机制,在点击子级时候,通过冒泡法,去获取target

    展开全文
  • 谈起JavaScript的 事件事件冒泡事件捕获、阻止默认事件这三个话题,无论是面试还是在平时的工作中,都很难避免。 事件捕获阶段:事件从最上一级标签开始往下查找,直到捕获事件目标(target)。 事件冒泡阶段:...
  • 主要介绍了一JS的事件冒泡和事件捕获,通过代码举例详细描述了两者之间的差别,需要的朋友可以参考下
  • 事件冒泡和事件捕获区别

    千次阅读 2019-12-24 16:47:55
    事件冒泡和事件捕获这两个概念都是为了解决页面中事件流(事件发生顺序)的问题。 1、事件冒泡 事件冒泡事件会从最内层的元素开始发生,一直向上传播,直到document对象。 2、事件捕获 事件捕获:与事件冒泡...

    事件冒泡和事件捕获这两个概念都是为了解决页面中事件流(事件发生顺序)的问题。

    1、事件冒泡

    事件冒泡:事件会从最内层的元素开始发生,一直向上传播,直到document对象。

    2、事件捕获

    事件捕获:与事件冒泡相反,事件会从最外层开始发生,直到最具体的元素。

    3、addEventListener方法

    element.addEventListener(event, function, useCapture)

    第一个参数是需要绑定的事件,第二个参数是触发事件后要执行的函数。而第三个参数默认值是false,表示在事件冒泡的阶段调用事件处理函数,如果参数为true,则表示在事件捕获阶段调用处理函数。

    4、事件代理机制

    table.addEventListener("click", function(el) {
           //如果触发事件本身的类名==del,那么进行删除操作
           if(el.target.className == "del") {          
           el.target.parentNode.parentNode.remove();
           }
    })

    展开全文
  • 抽空学习了下javascriptjquery的事件设计,收获颇大,总结此贴,大家分享。 (一)事件绑定的几种方式 javascript给DOM绑定事件处理函数总的来说有2种方式:在html文档中绑定、在js代码中绑定。下面的方式1、方式2...
  • DOM事件标准定义了两种事件流,这两种事件流有着显著的不同并且可能对你的...许多Web技术一样,在它们成为标准之前,Netscape微软各自不同地实现了它们,下面介绍DOM事件阶段以及事件捕获事件冒泡先后执行顺序
  • 主要介绍了javascript 中事件冒泡和事件捕获机制的详解的相关资料,网上的相关资料有很多,但是讲的不是多清楚,通过本文希望能让大家理解掌握,需要的朋友可以参考下
  • 本文主要介绍了JS中绑定事件顺序(事件冒泡事件捕获区别)。具有很好的参考价值,下面跟着小编一起来看下吧
  • js 事件冒泡和事件捕获

    万次阅读 多人点赞 2018-07-18 16:33:59
    一块: 事件流描述的是从页面接收事件的顺序。  IE的事件冒泡事件流,  而firefox的事件流是捕获事件流。...事件传递有两种方式:冒泡捕获事件传递定义了元素事件触发的顺序。 如果你将 &l...

    一块:

    事件流描述的是从页面接收事件的顺序。 
    IE的事件是冒泡事件流, 
    而firefox的事件流是捕获事件流。 
    1.事件冒泡 
    IE的事件流叫做事件冒泡,即事件从最具体的元素到不具体的元素。 
    好比气泡从水底下一直向上冒泡,像dom树一样,一直到根元素。 
    2.事件捕获 
    即从不具体的元素到具体的元素

    事件传递有两种方式:冒泡与捕获。

    事件传递定义了元素事件触发的顺序。 如果你将 <p> 元素插入到 <div> 元素中,用户点击 <p> 元素, 哪个元素的 "click" 事件先被触发呢?

    在 冒泡 中,内部元素的事件会先被触发,然后再触发外部元素,即: <p> 元素的点击事件先触发,然后会触发 <div> 元素的点击事件。

    在 捕获 中,外部元素的事件会先被触发,然后才会触发内部元素的事件,即: <div> 元素的点击事件先触发 ,然后再触发 <p> 元素的点击事件。

    第一种:事件冒泡

           IE提出的事件流叫做事件冒泡,即事件开始时由最具体的元素接收,然后逐级向上传播到较为不具体的节点,看一下以下示例:

    接下来我们点击一下页面上的p元素,看看会发生什么:

       正如上面我们所说的,它会从一个最具体的的元素接收,然后逐级向上传播, p=>button=>div=>body..........事件冒泡可以形象地比喻为把一颗石头投入水中,泡泡会一直从水底冒出水面。

     

     第二种:事件捕获

             网景公司提出的事件流叫事件捕获流。

              事件捕获流的思想是不太具体的DOM节点应该更早接收到事件,而最具体的节点应该最后接收到事件,针对上面同样的例子,点击按钮,那么此时click事件会按照这样传播:(下面我们就借用addEventListener的第三个参数来模拟事件捕获流)

     

    同样我们看一下后台的打印结果:

    react有专属的阻止事件冒泡方法,e.nativeEvent.stopImmediatePropagation()

    handleBarDisplay(e){

           e.nativeEvent.stopImmediatePropagation();

           this.setState({barDisplay:false})

    }

    二块:

    事件捕获和事件冒泡属于两个相反的过程,这里可以有一个我感觉十分恰当的比喻,当你把一个可以漂浮在水面上的物品,使劲向水里砸下去,它会首先有一个下降的过程,这个过程就可以理解为从最顶层向事件发生的最具体元素(目标点)的捕获过程;之后由于浮力大于物体自身的重力,物体会在到达最低点( 最具体元素)之后漂浮到水面上,这个过程相对于事件捕获是一个回溯的过程,即事件冒泡。 
    好了,对于事件捕获和事件冒泡有了一个概念上的理解,那我们就可以开始考虑实际的编码过程中的实际应用了。先贴上本文所需要的代码

    <!DOCTYPE html>
    <html>
    <head>
        <title>event</title>
    </head>
    <body>
        <div id="obj1">
            welcome
            <h5 id="obj2">hello</h5>
            <h5 id="obj3">world</h5>
        </div>
        <script type="text/javascript">
            var obj1=document.getElementById('obj1');
            var obj2=document.getElementById('obj2');
            obj1.addEventListener('click',function(){
                alert('hello');
            },false);
            obj2.addEventListener('click',function(){
                alert('world');
            })
        </script>
    </body>
    </html>

    如上所示,这是一个十分简单地文档结构:document > html > body > div > h5 
    并且分别在obj1,obj2上绑定了一个点击事件,由于addEventListener的第三个参数为false,所以页面是在冒泡阶段处理绑定事件。此时整个页面可以有三种行为出现

    1. 点击文字welcome时,弹出hello。 
      此时就只触发了绑定在obj1上的点击事件。具体冒泡实现过程如下:welcome 属于文本节点,点击后,开始从文本节点查找,当前文本节点没有绑定点击事件,继续向上找,找到父级(id为obj1的div),有绑定的点击事件,执行,再向上找,body,没有绑定点击事件,再到html,document,都没再有绑定的点击事件,好,整个冒泡过程结束。
    2. 点击文字hello时,先弹出world,再弹出hello。 
      具体冒泡的过程如下图所示

    冒泡过程
    3. 点击world时,弹出hello。 
    具体冒泡过程和第二种情况类似,如下图 
    这里写图片描述

    理解了以上的内容,我们可以接着来讨论事件代理机制。 
    比如上面的代码,我们想要在点击每个h5标签时,弹出对应的innerHTML 。常规做法是遍历每个h5,然后在每个h5上绑定一个点击事件,这种做法在h5较少的时候可以使用,但如果有一万个h5,那就会导致性能降低。这时就需要事件代理出场了。 
    先贴代码

    obj1.addEventListener('click',function(e){
                var e=e||window.event;
                if(e.target.nodeName.toLowerCase()=='h5'){
                    alert(e.target.innerHTML);
                }
    
            },false);

    由于事件冒泡机制,点击了h5后会冒泡到div,此时就会触发绑定在div上的点击事件,再利用target找到事件实际发生的元素,就可以达到预期的效果。

    三块:

     

    采用事件代理,为页面中的所有a标签绑定click事件。

    1. document.addEventListener("click", function(e) {

    2. if (e.target.nodeName == "A")

    3. console.log("a");

    4. }, false);

    问题:若a标签里面仍有span、img等其他元素,上述代码中,单击span、img等其他元素不能触发click事件。

    原因:单击span、img等其他元素时,e.target指向的是触发click事件的元素(span、img等其他元素),而不是a标签。

    解决方法:从触发click事件的元素开始,逐级向上查找,直到找到a标签为止。

    1. document.addEventListener("click", function(e) {

    2. var node = e.target;

    3. while (node.parentNode.nodeName != "BODY") {

    4. if (node.nodeName == "A") {

    5. console.log("a");

    6. break;

    7. }

    8. node = node.parentNode;

    9. }

    10. }, false);

    展开全文
  • 事件捕获:从上至下(是指父元素向子元素传递的过程), bool=true 捕获 一般不会用到 事件委托利用冒泡阶段运行的机制实现的, 使用事件代理的方法少了遍历所有li节点的操作,性能上肯定更加优化,而且如果后期又...

    事件冒泡:从下至上(是指子元素向父元素传递的过程),  bool=false冒泡(默认)

    事件捕获:从上至下(是指父元素向子元素传递的过程), bool=true 捕获 一般不会用到

    事件委托:利用冒泡的原理,把事件加到父级上,触发执行效果。

         优点:1. 使用事件代理的方法少了遍历所有li节点的操作,性能上更加优化;
                    2. 针对新创建的元素,直接可以拥有事件,不用再重新绑定。
         使用情景:
              •为DOM中的很多元素绑定相同事件;
              •为DOM中尚不存在的元素绑定事件;

    例子:假设一个元素div,它有一个下级元素p。
    <div>
      <p id="button">元素</p>
    </div>
    这两个元素都绑定了click事件,如果用户点击了p,它在div和p上都触发了click事件,那这两个事件处理程序哪个先执行呢?事件顺序是什么?

    当你使用事件捕获时,父级元素先触发,子级元素后触发,即div先触发,p后触发。

    document.getElementById("button").addEventListener("click",function(){
        alert("button");
    },false);

    当你使用事件冒泡时,子级元素先触发,父级元素后触发,即p先触发,div后触发。

    document.getElementById("button").addEventListener("click",function(){
        alert("button");
    },true);

     

    addEventListener方法
    element.addEventListener(event, function, useCapture)

    第一个参数是需要绑定的事件,第二个参数是触发事件后要执行的函数。

    第三个参数是布尔值:

    注意:addEventListener() 必须用 removeEventListener() 解除

    在W3c中,使用 stopPropagation() 方法来阻止冒泡

    document.getElementById("button").addEventListener("click",function(event){
        alert("button");
        event.stopPropagation();    
    },false);

    使用DOM3级新增事件 stopImmediatePropagation() 方法来阻止事件捕获,另外此方法还可以阻止事件冒泡。

    document.getElementById("second").addEventListener("click",function(){
        alert("second");
        event.stopImmediatePropagation();
    },true);  

     

    stopImmediatePropagation() 和 stopPropagation()的区别

    后者只会阻止冒泡或者是捕获。 但是前者除此之外还会阻止该元素的其他事件发生,但是后者就不会阻止其他事件的发生。

     

    <html>
    <head>
      <meta charset="utf-8">
      <title>JS Bin</title>
    </head>
    <body>
      <ul>
        <li>hello 1</li>
        <li>hello 2</li>
        <li>hello 3</li>
        <li>hello 4</li>
      </ul>
      <script>
        var ul = document.getElementsByTagName("ul")[0];
        ul.addEventListener('click',function(e){
          console.log('e.target', e.target)   //被点击的li
          console.log('e.currentTarget', e.currentTarget)   //ul
          // e.target 指向触发事件监听的对象。
          // e.currentTarget 指向添加监听事件的对象。
          console.log('e.target.nodeName', e.target.nodeName)
          if (e.target && e.target.nodeName == "LI") {
            console.log("li被点击了");
          }
        })
      </script>
    </body>
    </html>
    

     

    展开全文
  • 事件冒泡和捕获 触发

    2018-09-09 19:26:22
     事件是文档浏览器窗口中发生的特定的交互瞬间。 事件是javascript应用跳动的心脏,也是把所有东西黏在一起的胶水,当我们与浏览器中web页面进行某些类型的交互时,事件就发生了。  事件可能是用户在某些内容上...
  • 终于弄懂了事件冒泡和事件捕获

    万次阅读 多人点赞 2018-08-01 20:30:47
    总结了两个人的博客,写了这篇:总算是搞清楚事件捕获和事件冒泡了! 参考资料浅谈事件冒泡事件捕获 理解事件捕获和事件冒泡 1、事件捕获 捕获事件(event capturing):事件从最不精确的对象(document 对象)...
  • 提出事件流概念的正是IENetscape,但是前者提出的是我们常用的事件冒泡流,而后者提出的是事件捕获流。 第一部分:事件冒泡  即事件开始由最具体的元素接收,然后逐级向上传播到较为不具体的节点(文档)。  ...
  • addEventListener() 方法 addEventListener() 方法用于向指定元素添加事件句柄。element.addEventListener(event, function, useCapture), ...布尔值,指定事件是否在捕获冒泡阶段执行。(默认false..
  • Vue中的事件冒泡和捕获

    千次阅读 2020-09-18 10:39:45
    Vue中的事件冒泡和捕获 stop 阻止冒泡事件 .capture 设置捕获事件 .self 只有点击当前元素的时候,才会触发处理函数 .once处理函数只被触发一次 1.当一个父元素div1 包裹着一个子元素div2 同时有点击事件, 我们...
  • 前言 最近在研究react、redux等,网上找...捕获事件沿着 DOM 树由上往下传递,到达触发事件的元素后,开始由下往上冒泡。 IE9 及之前的版本只支持冒泡  | A  —————–|–|—————–  | Parent | | 
  • 事件冒泡和事件捕获分别由微软网景公司提出,这两个概念都是为了解决页面中事件流(事件发生顺序)的问题。 <p id=inner>Click me! 上面的代码当中一个div元素当中有一个p子元素,如果两个元素都有一个click...
  • 事件冒泡:即是事件开始时由最具体的元素接收,然后逐级向上传播到较为不具体的节点。当事件到达目标节点之后,会沿着捕获阶段的路线原路返回,同样所有经过节点会被触发。即是自内而外,从叶到根,从小到大。 说...
  • 事件冒泡 事件冒泡:DOM 元素触发的一些事件通过 DOM 层级结构传播。这种传播过程称为事件冒泡事件首先由最内层的元素开始,然后传播到外部元素,直到它们到根元素。 翻译:党DOM元素发生一些事件(例如点击 click...
  • ddEnentListener(事件类型,回调函数,bool) 第三个参数是布尔值,默认为false冒泡,true为捕获 addEnentListener必须用removeEnentListener()解除 事件冒泡:从下至上(是指子元素向父元素传递的过程), bool=...
  • 主要介绍了JS html事件冒泡和事件捕获操作,结合完整实例形式分析了javascript事件冒泡事件捕获相关原理与实现方法,需要的朋友可以参考下
  • Javascript事件流(事件捕获事件冒泡)–>事件委托(代理) Javascript与HTML之间的交互是通过“事件”实现的。事件,就是文档或浏览器窗口发生的一些特定的交互瞬间,当我们与浏览器中的web页面进行特定的交互时...
  • JavaScript事件使得网页具备互动交互性,我们应该对其深入了解以便开发工作,在各式各样的浏览器中,JavaScript事件模型主要分为3种:原始事件模型、DOM2事件模型、IE事件模型。 一.原始事件模型(DOM0级) 这是一...
  • js事件冒泡和捕获

    2019-11-01 14:19:14
    彻底弄懂js中事件冒泡和捕获是怎么回事 一、DOM事件触发经历的三个阶段 1、首先我们要弄清楚当一个dom事件被触发时,它不仅仅只是单纯地在自身对象上触发一次,而是经历了三个不同的阶段:???? 捕获阶段:先由文档的...
  • 事件冒泡和事件捕获

    2021-03-15 16:59:09
    一般的,事件分为三个阶段:捕获阶段、目标阶段和冒泡阶段。 (1)捕获阶段(Capture Phase) 事件的第一个阶段是捕获阶段。事件从文档的根节点流向目标对象节点。途中经过各个层次的DOM节点,并在各节点上触发...

空空如也

空空如也

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

事件冒泡和捕获的区别