精华内容
下载资源
问答
  • 事件捕获事件按从document对象到指定目标对象的顺序触发。 阻止事件冒泡,函数传入event参数,函数体中使用e.stopPropagation();阻止事件向上冒泡。 this,e.targete.currentTarget区别 js事件是会向上...

    事件冒泡,事件按从指定对象触发到document对象的顺序触发。

    事件捕获,事件按从document对象到指定目标对象的顺序触发。

    阻止事件冒泡,函数传入event参数,函数体中使用e.stopPropagation();阻止事件向上冒泡。


    this,e.target和e.currentTarget区别

    js事件是会向上冒泡的,所以this是可以变化的,但e.target不会向上冒泡,它永远是指直接接受事件的目标dom对象,而this和e.currentTarget是相同的。

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

    万次阅读 多人点赞 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() 则只阻止事件往上冒泡,不阻止事件本身。

    展开全文
  • 抽空学习了下javascriptjquery的事件设计,收获颇大,总结此贴,大家分享。 (一)事件绑定的几种方式 javascript给DOM绑定事件处理函数总的来说有2种方式:在html文档中绑定、在js代码中绑定。下面的方式1、方式2...
  • 事件冒泡和事件捕获

    2021-03-15 16:59:09
    途中经过各个层次的DOM节点,并在各节点上触发捕获事件,直到到达事件的目标节点。捕获阶段的主要任务是建立传播路径,在冒泡阶段,事件会通过这个路径回溯到文档跟节点。 (2)目标阶段(Target Phase) 当事件...

    1、事件阶段

    如下图所示

     

     

     

    一般的,事件分为三个阶段:捕获阶段、目标阶段和冒泡阶段。

    (1)捕获阶段(Capture Phase)

    事件的第一个阶段是捕获阶段。事件从文档的根节点流向目标对象节点。途中经过各个层次的DOM节点,并在各节点上触发捕获事件,直到到达事件的目标节点。捕获阶段的主要任务是建立传播路径,在冒泡阶段,事件会通过这个路径回溯到文档跟节点。

    (2)目标阶段(Target Phase)

    当事件到达目标节点的,事件就进入了目标阶段。事件在目标节点上被触发,然后会逆向回流,直到传播至最外层的文档节点。

    (3)冒泡阶段(Bubble Phase)

    事件在目标元素上触发后,并不在这个元素上终止。它会随着DOM树一层层向上冒泡,回溯到根节点。
    冒泡过程非常有用。它将我们从对特定元素的事件监听中释放出来,如果没有事件冒泡,我们需要监听很多不同的元素来确保捕获到想要的事件。

    2、冒泡阶段调用事件处理函数

     

     

    封装一个getTag函数,当点击a标签的时候,由于是冒泡机制,会从目标节点向上逐级触发各个节点a,li,ul,div的事件处理函数。

    3、捕获阶段调用事件处理函数

     

     

    在function回调函数里加个true,则为事件捕获。当点击a标签的时候,由于是捕获机制,会从根节点向下逐级触发各个节点直到目标节点触发事件处理函数即div,ul,li,a

    4、事件代理

    在传统的事件处理中,你按照需要为每一个元素添加或者是删除事件处理器。然而,事件处理器将有可能导致内存泄露或者是性能下降——你用得越多这种风险就越大。JavaScript事件代理可以把事件处理器添加到一个父元素上,这样就避免了把事件处理器添加到多个子元素上。

    (1)它是怎么运作的呢?

    事件代理用到了两个JavaSciprt事件特性:事件冒泡以及目标元素。当一个元素上的事件被触发的时候,同样的事件将会在那个元素的所有祖先元素中被触发。这一过程被称为事件冒泡;使用事件代理,我们可以把事件处理器添加到一个元素上,等待一个事件从它的子级元素里冒泡上来,并且可以得知这个事件是从哪个元素开始的。

    (2)这对我有什么好处呢?

    比如说在一个10列、100行的HTML表格里,让其每一个单元格在被点击的时候变成可编辑状态。如果把事件处理器加到这1000个单元格会产生一个很大的性能问题,并且有可能导致内存泄露甚至是浏览器的崩溃。相反地,使用事件代理,你只需要把一个事件处理器添加到table元素上就可以了,这个函数可以把点击事件给截下来,并且判断出是哪个单元格被点击了。

    (3)另一个简单的例子

     

     

    如图所示,如果我们需要对每个li元素进行点击,触发事件。传统的我们要像绿色注释部分那样给每一个li元素添加事件处理函数。但是通过事件代理,我们只需要在ul元素进行事件监听就可以实现点击每一个li都能触发事件了

    5、阻止事件冒泡(stopPropagation)

    (1)为什么要阻止事件冒泡

    有种可能是,某个DOM节点绑定了某事件监听器,本来是想当该DOM节点触发事件,才会执行回调函数。结果是该节点的某后代节点触发某事件,由于事件冒泡,该DOM节点事件也会触发,执行了回调函数,这样就违背了最初的本意了。

    (2)如何阻止事件冒泡

     

     

    如图所示,在第一个li标签加上event.stopPropagation()方法就能阻止事件的冒泡,这样的话在点击第一个li标签就无法触发事件处理函数了。

    (3)无法在捕获阶段阻止事件冒泡

    这里需要注意的是,我们无法在事件捕获阶段阻止事件冒泡!!!例如,我们在代码里加上true,如图所示,第一个li会触发事件。因为捕获是从根节点向目标节点触发,而冒泡是从目标节点向根节点触发。

     

    展开全文
  • js:事件冒泡和时间捕获详解

    千次阅读 2017-08-15 15:09:29
    记得刚学js的时候,对于事件冒泡和事件捕获总是一知半解,不知道能干嘛,有啥意义,就知道冒泡就是从你子节点一级一级向上触发。。。然而并不知道起本质机制,应用等!今天小飞飞就带小伙伴们从新认识下这些究竟...

    记得刚学js的时候,对于事件冒泡和事件捕获总是一知半解,不知道能干嘛,有啥意义,就知道冒泡就是从你子节点一级一级向上触发。。。然而并不知道起本质和机制,应用等!今天小飞飞就带小伙伴们从新认识下这些究竟什么东西!
    了解这些之前你必须知道这几个东西,什么event事件对象?,什么是事件流?
    1.事件流:就是事件执行顺序.分为冒泡和捕获
    冒泡:假如有一个div中包含一个p标签,我们同时给div和p标签添加click事件,如果我们点击p标签,首先会执行p标签绑定click事件,然后就会执行div标签绑定的click事件(因为p标签在div中,点击p就相当于你也点击了div),这种执行顺序就叫冒泡(逐个向上触发)
    捕获:和上面相反的事件执行顺序

    //html
      <div style="width:800px;">
        <p style="width:200px;">产品经理是sb</p>
      </div>
    //js(为了方便我直接用jquery获取dom)
      $("div").click({ 
         alert("parent is clicked")
      })
      $("p").click({
         alert("child is clicked")
      })
      点击p标签后依次弹出:
          child is clicked
          parent is clicked
    //这就是事件冒泡。这种绑定click事件事件流都是冒泡事件
    a.onclick=function(){ doanything}
    展开全文
  • 之前看到过很多文章,文章都统一的说事件捕获执行在前,冒泡执行在后,实际上这是不严谨的,今天刚好有时间我们来捋一捋,直接举例子 <div id="div1"> 我是div1 <div id="div2">我是div2 <div ...
  • 事件冒泡 事件冒泡:DOM 元素触发的一些事件通过 DOM 层级结构传播。这种传播过程称为事件冒泡事件首先由最内层的元素开始,然后传播到外部元素,直到它们到根元素。 翻译:党DOM元素发生一些事件(例如点击 click...
  • 给同一个元素注册点击事件,测试事件冒泡和事件捕获的顺序,代码如下: <div class='container'> <div class='wapper'> <div class='context'> 点击你试试 </div> </div>...
  • 提出事件流概念的正是IENetscape,但是前者提出的是我们常用的事件冒泡流,而后者提出的是事件捕获流。 第一部分:事件冒泡  即事件开始由最具体的元素接收,然后逐级向上传播到较为不具体的节点(文档)。  ...
  • js中的事件传递方式有两种: 冒泡 捕获事件冒泡 js中事件会以冒泡的形式由内到外的向上传递。由最内层点击元素向外扩散到最外层元素,激活外层注册的相应事件,这就是事件冒泡事件冒泡是js语言中事件...
  • 它还有一个名字叫事件代理,JavaScript高级程序设计上讲:事件委托就是利用事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件。 有三个同事预计会在周一收到快递。为签收快递,有两种办法:一是三...
  • 事件流 ... JavaScript与HTML之间的交互是通过事件实现的。...可以使用侦听器来预订事件,以便事件发生时执行相应的代码。  事件流的起源:就是在浏览器发展到第四代的时候,浏览器开发团队遇到一个问题:
  • 事件流也有两种,分别是事件冒泡和事件捕获,现行的主流是事件冒泡。 以上就是通过原生js将每一个div都绑定了一个事件,且通过useCapture这个参数将事件类型设置为true(捕获)或者 false(默认为false,冒泡) 需要...
  • 在JS中,绑定的事件默认的执行时间是在冒泡阶段执行,而非在捕获阶段(重要),这也是为什么当父类子类都绑定了某个事件,会先调用子类绑定的事件,后调用父类的事件。直接看下面实例 <!Doctype html> <...
  • 什么是冒泡捕获         以click点击事件为例。假如我们有一个多层结构标签。如下图,是4个div嵌套。每个div都有点击的监听事件,分别输出1234。...如果我把捕获监听器和冒泡监听器都加上,
  • 前言 最近在研究react、redux等,网上找...捕获事件沿着 DOM 树由上往下传递,到达触发事件的元素后,开始由下往上冒泡。 IE9 及之前的版本只支持冒泡  | A  —————–|–|—————–  | Parent | | 
  • 首先我们来说说什么是事件冒泡 事件冒泡:子级寻找父级的过程 当子级触发事件时,这个事件会形成一个时间流,这个事件流会逐步的向上传播, ...
  • 该懂得一定要懂,该学的不能再拖,该行动的就是此刻! 一:事件流的历史?  就像是在桌面上画了许多同心圆,当把手放在圆心...   JavaScript中事件流描述的是从页面中接收事件的顺序,但是有意思的是,IENetscape
  • 1、事件捕获(event capturing) 事件从顶层(window对象)开始触发到被点击的精确元素事件触发的过程 2、事件冒泡 事件从点击元素事件触发到顶层对象事件触发的顺序触发过程 3、流程图说明 简单的来说,捕获:...
  • 在学校,听老师讲解事件冒泡和事件捕获机制的时候跟听天书一样,只依稀记得IE使用的是事件冒泡,其他浏览器则是事件捕获。当时的我,把它当成IE浏览器兼容问题,所以没有深究(IE8以下版本的浏览器已基本退出市场)...
  • 但有意思的是,微软(IE)网景(Netscape)开发团队居然提出了两个截然相反的事件流概念,IE的事件流是事件冒泡流(event bubbling),而Netscape的事件流是事件捕获流(event capturing)。 后来在W3C组织的统一之下...
  • 2、不同事件句柄(给同一元素添加不同事件和函数) ele . addEventListener ( "click" , myFunction ) ; ele . addEventListener ( "mouseout" , mySecondFunction ) ; jq $ ( function ( ) { var...
  • 事件是文档浏览器窗口中发生的特定的交互瞬间。 事件是javascript应用 跳动的心脏,也是把所有东西黏在一起的胶水,当我们与浏览器中web页面进 行某些类型的交互时,事件就发生了。 事件可能是用户在某些内容上的...
  • 近日在项目中遇到一些问题,一个是ID值唯一存在的问题,另一个便是事件的追加产生的错误。 关于ID值唯一存在,从id的定义来看,id代表唯一的元素,若页面中...其次是事件冒泡捕获和追加事件,前两者很好理解,见得
  • 事件冒泡和捕获

    2018-10-25 20:52:04
    事件冒泡: 结构上(非视觉上)嵌套关系的元素,会存在事件冒泡的功能,即同一事件,自子元素冒泡向父元素。(自底向上) example: html: &lt;div class="box1"&gt; &lt;div class="box...
  • JavaScript DOM事件流事件捕获事件冒泡

    千次阅读 2020-09-08 09:31:17
    事件 在讲事件流之前,我们先来了解一下事件。 JavaScript与HTML之间的交互是通过事件来实现的。事件:就是文档或浏览器窗口中发生的一些特定的交互瞬间。...事件最早是在IE3Netscape Navigator2 中出现的,当
  • 当浏览器发展到第四代时(IE4Netscape Communicator 4),浏览器团队遇到一个很有意思的问题:页面的哪一部分会拥有特定的事件?想象下在一张纸上有一组同心圆,如果你把手指放在圆心上,那么你的手指指向的不是一...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 18,965
精华内容 7,586
关键字:

时间冒泡和事件捕获