精华内容
下载资源
问答
  • 主要介绍了一JS的事件冒泡和事件捕获,通过代码举例详细描述了两者之间的差别,需要的朋友可以参考下
  • 谈起JavaScript的 事件事件冒泡事件捕获、阻止默认事件这三个话题,无论是面试还是在平时的工作中,都很难避免。 事件捕获阶段:事件从最上一级标签开始往下查找,直到捕获事件目标(target)。 事件冒泡阶段:...
  • 主要介绍了javascript 中事件冒泡和事件捕获机制的详解的相关资料,网上的相关资料有很多,但是讲的不是多清楚,通过本文希望能让大家理解掌握,需要的朋友可以参考下
  • 事件冒泡和事件捕获的区别

    千次阅读 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();
           }
    })

    展开全文
  • DOM事件标准定义了两种事件流,这两种事件流有着显著的不同并且可能对你的...许多Web技术一样,在它们成为标准之前,Netscape微软各自不同地实现了它们,下面介绍DOM事件阶段以及事件捕获事件冒泡先后执行顺序
  • 事件冒泡和事件捕获分别由微软网景公司提出,这两个概念都是为了解决页面中事件流(事件发生顺序)的问题。 <p id=inner>Click me! 上面的代码当中一个div元素当中有一个p子元素,如果两个元素都有一个click...
  • 今天学习了事件冒泡和捕获,记录一下。 1.冒泡事件事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发。 我一般用法就是理解为触发事件A, 会触发A的父亲,爷爷,爷爷的父亲…… 代码: &...
  • js 事件冒泡和事件捕获

    万次阅读 多人点赞 2018-07-18 16:33:59
    而firefox的事件流是捕获事件流。  1.事件冒泡  IE的事件流叫做事件冒泡,即事件从最具体的元素到不具体的元素。  好比气泡从水底下一直向上冒泡,像dom树一样,一直到根元素。  2.事件捕获  即从不具体的元素...

    一块:

    事件流描述的是从页面接收事件的顺序。 
    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);

    展开全文
  • 终于弄懂了事件冒泡和事件捕获

    万次阅读 多人点赞 2018-08-01 20:30:47
    总结了两个人的博客,写了这篇:总算是搞清楚事件...捕获型事件(event capturing):事件从最不精确的对象(document 对象)开始触发,然后到最精确(也可以在窗口级别捕获事件,不过必须由开发人员特别指定) 2、事件...
    其实感觉不难理解,就是有点绕……

    总结了两个人的博客,写了这篇:总算是搞清楚事件捕获和事件冒泡了!
    参考资料浅谈事件冒泡与事件捕获
    理解事件捕获和事件冒泡

    1、事件捕获
    捕获型事件(event capturing):事件从最不精确的对象(document 对象)开始触发,然后到最精确(也可以在窗口级别捕获事件,不过必须由开发人员特别指定)

    2、事件冒泡
    冒泡型事件:事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发。

    3、捕获和冒泡过程图

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

    <!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>
       
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23

    如上所示,这是一个十分简单地文档结构: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);
       
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

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


    两种方式来阻止事件冒泡。
    方式一:event.stopPropagation();

    $("#div1").mousedown(function(event){
    event.stopPropagation();
    });

    方式二:return false;

    $("#div1").mousedown(function(event){
    return false;
    });

    但是这两种方式是有区别的。return false 不仅阻止了事件往上冒泡,而且阻止了事件本身。event.stopPropagation() 则只阻止事件往上冒泡,不阻止事件本身。

    展开全文
  • (2)捕获型事件(event capturing):事件从最不精确的对象(document 对象)开始触发,然后到最精确(也可以在窗口级别捕获事件,不过必须由开发人员特别指定)。 (3)DOM事件流:同时支持两种事件模型:捕获型事件
  • 事件捕获:从上至下(是指父元素向子元素传递的过程), 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>
    

     

    展开全文
  • 这里写自定义目录标题什么是事件事件流事件冒泡和事件捕获的概念事件冒泡事件捕获事件冒泡示例事件捕获示例阻止冒泡方法一方法二(jQuery,同时会阻止默认事件) 什么是事件 事件,就是文档或浏览器窗口中发生的一些...
  • 本文主要介绍了javascript中的事件冒泡和事件捕获,具有一定的参考价值,下面跟着小编一起来看下吧
  • 给同一个元素注册点击事件,测试事件冒泡和事件捕获的顺序,代码如下: <div class='container'> <div class='wapper'> <div class='context'> 点击你试试 </div> </div>...
  • 事件冒泡会从当前触发的事件目标一级一级往上传递,依次触发,直到document为止。 事件冒泡例子 层级关系:body>div>p 给body,div,p分别绑定点击事件,console.log()出body,div,p; <!DOCTY...
  • 事件冒泡和事件捕获

    2020-09-28 17:41:00
    事件冒泡和捕获的作用 浏览器的事件冒泡机制和事件捕获机制是一个非常重要的概念,如果您不理解这个概念的话,它会让你感受到真正的痛苦. 事件冒泡和事件捕获是两种完全不同的机制,它们两个的主要作用是: 决定 在一...
  • ddEnentListener(事件类型,回调函数,bool) 第三个参数是布尔值,默认为false冒泡,true为捕获 addEnentListener必须用removeEnentListener()解除 事件冒泡:从下至上(是指子元素向父元素传递的过程), bool=...
  • 之前看到过很多文章,文章都统一的说事件捕获执行在前,冒泡执行在后,实际上这是不严谨的,今天刚好有时间我们来捋一捋,直接举例子 <div id="div1"> 我是div1 <div id="div2">我是div2 <div ...
  • JavaScript事件使得网页具备互动交互性,我们应该对其深入了解以便开发工作,在各式各样的浏览器中,JavaScript事件模型主要分为3种:原始事件模型、DOM2事件模型、IE事件模型。 一.原始事件模型(DOM0级) 这是一...
  • 两者概念 事件捕获指的是从document到触发...事件冒泡是自下而上的去触发事件。绑定事件方法的第三个参数,就是控制事件触发顺序是否为事件捕获。 element.addEventListener(event,function(),true); ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 39,328
精华内容 15,731
关键字:

事件冒泡和事件捕获