展开

关键词

从零开始学 Web 之 DOM(七)

一、 1、什么是:当有多个元素嵌套,并且这些元素绑定了相同的,这时候如果里面的元素触发了,那么外面的会自动触发。 "dv3").onclick = function() { console.log(this.id); } </script> </body> 2、阻止 3、的三个阶段 捕获阶段(从外向内) ===> 阶段 1 目标阶段(最开始触发的目标)===> 阶段 2 阶段(从里向外) ===> 阶段 3 通过处理参数对象 e.eventPhase 若为1:捕获阶段 若为2:目标阶段 若为3:阶段 addEventListener 绑定处理方法中第三个参数:控制的阶段 true: 控制为捕获阶段 false: 控制阶段 一般默认使用阶段,很少使用捕获阶段。

19230

FLEXFLASH-与非

刷新页面 点击“外部BTN” 结果如图所示 因为的引发者没有在panl1中所以不会再触发panel1的了 以上说的都是非的执行顺序是从外层容器到内层容器执行的 5. 如果要在阶段捕捉 创建的代码为 var Event:btnEvent1=new btnEvent1(btnEvent1.EVENT_NAME,true);//最后一个参数bubbles应为 是false 这样设置后就是的执行顺序是从内层容器到外层容器执行的 6. 如果即要捕捉非,又要捕捉 那么 创建的代码为 var Event:btnEvent1=new btnEvent1(btnEvent1.EVENT_NAME,true);//最后一个参数 );//非监听 this.panel1.addEventListener(btnEvent1.EVENT_NAME,panelCatchEvent,false);//监听 这样设置之后,先从外部执行到内部

5510
  • 广告
    关闭

    腾讯云618采购季来袭!

    一键领取预热专享618元代金券,2核2G云服务器爆品秒杀低至18元!云产品首单低0.8折起,企业用户购买域名1元起…

  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    ,阻止 e.stopPropagation()

    <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>阻止</title> <script src="script (e) { alert("我是div"); }) //e.stopPropagation();就是阻止 在上面的函数中,先弹出 “我是li”然后弹出“我是ul”,最后弹出“我是div” 一层一层的,而阻止的方式就是调用 的对象来调用stopPropagation()方法。 : 1.一个对应触发的是上层的同一   单击two的时候就会起触发one单击的。 3.e.stopPropagation()只要在click中,就不会触发上层click

    41830

    jquery 、阻止 - event.stopPropagation()

    什么是 在一个对象上触发某类(比如单击onclick),如果此对象定义了此的处理程序,那么此就会调用这个处理程序,如果没有定义此处理程序或者返回true,那么这个会向这个对象的父级对象传播 的作用 允许多个操作被集中处理(把处理器添加到一个父级元素上,避免把处理器添加到多个子级元素上),它还可以让你在对象层的不同级别捕获的示例 编写三个嵌套的div,同时绑定click,来演示。 ? 机制有时候是不需要的,需要阻止掉,通过 event.stopPropagation() 来阻止 阻止上面点击黄色div的click()传递 ? 设置了阻止传递之后,那么click()就不会传递到father和grandfather的,所以只有一个alert()弹出。 完整示例代码 <!

    1.8K41

    Jquery

    什么是JS? (摘自网络) 如何来阻止Jquery? 这就是,本来我只点击ID为hr_three的标签,但是确执行了三个alert操作。 过程(以标签ID表示):hr_three----> divTwo----> divOne 。 ,阻止了,但不会阻击默认行为(它就执行了超链接的跳转) 2.return false; 处理过程中,阻止了,也阻止了默认行为(比如刚才它就没有执行超链接的跳转) 还有一种有有关的 友情提示:不一定是个坏的东西,有些情况会让不同层次捕获不同的

    55470

    js

    什么是DOM流(event flow )存在三个阶段:捕获阶段、处于目标阶段、阶段。 捕获*(****event capturing****)*:通俗的理解就是,当鼠标点击或者触发dom时,浏览器会从根节点开始由外到内进行传播,即点击了子元素,如果父元素通过捕获方式注册了对应的的话 **(***dubbed bubbling***)**:与捕获恰恰相反,顺序是由内到外进行传播,直到根节点。 dom标准流的触发的先后顺序为:先捕获再,即当触发dom时,会先进行捕获,捕获到源之后通过传播进行。 参数 useCapture 是选填的,填true或者false,用于描述还是捕获,true表示捕获,默认的false表示

    26542

    升级React17,Toast组不能用了

    在v17之前,整个应用的到同一个根节点(html DOM节点)。 合成」会在React组树中从底向上 当「合成到触发点击的组时,调用onClick方法 这就是React合成的原理。 「合成」会在React组树中从底向上 当「合成到触发点击的组时,调用onClick方法 「原生点击」继续向上到document.body 重复触发步骤3 难道bug的原因是 中setShow(true),state变为true,渲染toast DOM useEffect回调执行,为document绑定click 「原生点击」继续,当到document时,触发其绑定的 因为之前的版本所有「原生」都注册在html DOM上。 就不存在「原生」在过程中触发多个代理的情况。 ? 当bug来临,没有一片feature是无辜的。

    20720

    js委托

    概念 委托也叫代理,委托就是利用,只指定一个处理程序,就可以管理某一类型的所有。 优点 减少内存消耗: 如果每个dom节点都绑定,那么会增加很多与dom的交互,同时会保存很多对象占用内存,这两者都将导致页面性能变低。 原理 利用,而指的就是从向上传递,如果有相应的函数绑定就会执行其绑定函数。 event : (必需)名,支持所有DOM。 function:(必需)指定要触发时执行的函数。 useCapture:(可选)指定是否在捕获或阶段执行。true,捕获。 false,。默认false。这里导致默认向上的。 捕获vs 捕获阶段:父元素先触发,子元素后触发; 阶段:子元素先触发,父元素后触发。

    45231

    关于DOM流、DOM0级与DOM2级

    一、DOM 模型 DOM 模型包括捕获和,捕获是从上往下到达目标元素,是从当前元素,也就是目标元素往上到 window image.png 二、流 流的概念,在现今的 JavaScript 流所描述的就是从页面中接受的顺序,流分为两种:(主流)和捕获 1、 image.png 开始时由具体元素接收,然后逐级向上传播到父元素 举个例子: <! DOM流包括三个阶段: 捕获阶段 处于目标阶段 阶段 1、捕获阶段 当发生时,首先发生的是捕获,为父元素截获提供了机会 <! 可以看到,点击先被父元素截获了,且该函数只在捕获阶段起作用 2、处于目标阶段 到了具体元素时,在具体元素上发生,并且被看成阶段的一部分 3、阶段 最后,阶段发生,开始 四、阻止 过程,是可以被阻止的。

    64820

    深入理解

    即由内到外 捕获型流:的传播是从最不特定的目标到最特定的目标。即由外到内 4.3 DOM流: 4.3.1 dom流定义: DOM标准采用捕获+DOM流。 深入理解-4.png 4.3.2 dom流包括: DOM标准规定流包括三个阶段:捕获阶段、处于目标阶段和阶段。 捕获阶段:实际目标(

    浅谈

    前端开发中不可避免会接触到,今天简单记录一下处理的一点经验,谈不上心得,聊当抛砖引玉。 不谈移动端,以PC浏览器的click为例。 机制最初是由微软提出的,而捕捉机制是由NetScape提出的,这两种机制是完全不同的流处理机制,平常较多地被认为是的两种方式,其实是不严谨的。 流 简单来讲,以click为例,流就是从被点击的节点一层层的向上,直到<body>节点,这也是被大多数人熟知的方式,在此便不再赘述。 捕捉流 NetScape提出的捕捉式流处理机制,跟流完全相反,是从最外层容器(也就是<body>)开始往里传递。 false的时候,捕捉流跟流的顺序是一致的,也就是从里往外传递。

    29090

    委托和this

    途中经过各个层次的DOM节点,并在各节点上触发捕获,直到到达的目标节点。捕获阶段的主要任务是建立传播路径,在阶段,会通过这个路径回溯到文档跟节点。    它会随着DOM树一层层向上,回溯到根节点。   过程非常有用。它将我们从对特定元素的监听中释放出来,如果没有,我们需要监听很多不同的元素来确保捕获到想要的 (1)为什么要阻止   有种可能是,某个DOM节点绑定了某监听器,本来是想当该DOM节点触发,才会执行回调函数。 结果是该节点的某后代节点触发某,由于,该DOM节点也会触发,执行了回调函数,这样就违背了最初的本意了。 (2)如何阻止 stopPropagation:告诉DOM停止 stopImmediatePropagation,它不仅停止,也会阻止这个元素上其它监听当前的处理程序触发。

    20530

    javascript流的原理

    1、两种流模型 传播的顺序对应浏览器的两种流模型:捕获型流和流。 流:的传播是从最特定的目标到最不特定的目标。即从DOM树的叶子到根。 尽管DOM标准要求应该从document对象开始传播,但这些浏览器都是从window对象开始捕获的。 3)、由于老版本浏览器不支持,很少有人使用捕获。建议使用。 2、DOMDOM标准采用捕获+。两种流都会触发DOM的所有对象,从document对象开始,也在document对象结束。 DOM标准规定流包括三个阶段:捕获阶段、处于目标阶段和阶段。 捕获阶段:实际目标( )在捕获阶段不会接收。也就是在捕获阶段,从document到再到就停止了。 处于目标阶段:在 上发生并处理。但是处理会被看成是阶段的一部分。 阶段:又传播回文档。

    34210

    浅谈JavaScript的流)

    流描述的是从页面中接收的顺序。IE的流失,而Netspace的流失捕获。   IE的流叫,即开始时,由具体的元素(文档中嵌套层次最深的节点)接收,然后向上传播到不具体的节点。 也就是说首先发生了div上,而div也就是我们单击的元素。然后按照dom向上传播,直至传播到document对象。所有浏览器都支持。 如果以前面的例子,则发生的顺序为document、html、body和div。 DOM流   流包含三个阶段:捕获阶段、处于目标阶段和阶段。 下一个阶段处于目标阶段,于是在div上面发生,并在处理中被看成阶段的一部分。最后发生,并将回传到document。ie8以及更早的浏览器不支持Dom流。

    36080

    前端学习(51)~的传播和

    DOM传播的三个阶段是:捕获、和目标。 捕获阶段:从祖先元素往子元素查找(DOM树结构),直到捕获到目标 target。 阶段:目标 target 开始,从子元素往祖先元素,直到页面的最上一级标签。 : 当一个元素上的被触发的时候(比如说鼠标点击了一个按钮),同样的将会在那个元素的所有祖先元素中被触发。 这一过程被称为;这个从原始元素开始一直DOM树的最上层。 通俗来讲,指的是:子元素的被触发时,父元素的同样的也会被触发。取消就是取消这种机制。 说明 onclick 是可以的 } 阻止 大部分情况下,都是有益的。当然,如果你想阻止,也是可以的。可以按下面的方法阻止

    26620

    机制

    浏览器机制 DOM模型分为捕获和。一个发生后,会在子元素和父元素之间传播(propagation)。 是布尔值useCapture参数的情况下,默认值为false,表示注册,为true时表示注册是捕获。 阻止和默认 为什么要阻止? 这是因为某DOM节点绑定了某个监听器,当该DOM节点触发的时候才会执行回调函数,但是如果该节点的某后代节点触发了一个,也会由于导致该DOM节点的也被触发,在不应该的情况下执行了回调函数 回调函数的执行分为两步:第一步是把所有的合成放到队列中,第二步是逐个执行。 常见问题 原生阻止会阻止合成的触发,而合成的阻止不影响原生组

    18611

    Event()的传播与

    特性说明和原理图: 标准浏览器和Ie9+浏览器都支持和捕获,而IE8-浏览器只支持 标准和Ie9+浏览器用stopPropagation()或cancelBubble阻止传播,而ie8 Ie8-用attachEvent为dom元素添加一个,但必须在名前加上on,此类只能在元素的阶段。 stopPropagatin()方法用于阻止的传播,如果设置在捕获阶段,则目标和阶段不会被执行; cancelBubble属性只能阻止阶段,对捕获和目标阶段的不能阻止 preventDefault "] var setBorderColor = function( $dom, color, time,event){ $dom = $($dom); 阻止默认只用于验证 应用场景 捕获阶段的应用场景较少,一般情况下都应用在目标和阶段。

    49390

    JS

    “IE的流叫做,即时间最开始由最具体的元素接收,然后逐级向上传播到较为不具体的节点(文档)。 例: <! 由于版本兼容性问题,捕获还是较少使用。当然,建议依然是 放心使用,在有特殊需要时再使用捕获。 3. DOM 流 “DOM2级”规定的流包括三个阶段: 捕获阶段 处于目标阶段 阶段 首先发生的是捕获,为截获提供了机会,然后实际目标接收到,最后阶段是阶段,此阶段可以对作出响应 DOM流 在 DOM 流中,实际目标(div)在捕获阶段不会接收到,意味着在捕获阶段从 document 到 html 再到 body 就会停止。 下一阶段是处于目标阶段,于是在 div 上发生,并在处理中被看成的一部分。最后,阶段发生,传播回文档。 回顾问题 开篇提出的问题,仿佛在此可以得出结论: ?

    19610

    js ---

    1.流   发生时会在元素节点与根节点之间按照特定的顺序传播,路径所经过的所有节点都会收到该,这个传播过程即DOM流。 2.两种流模型   1.流:的传播是从最特定的目标到最不特定的目标。即从DOM树的叶子到根   2.捕获型流:的传播是从最不特定的目标到最特定的目标。 即从DOM树的根到叶子 3.绑定的方法   1.普通浏览器 绑定:addEventListener(type,name,bool);     删除:removeEventListener 执行函数   bool true 为捕获 && false 为 5.阻止捕获 1.阻止 不 阻止默认行为     event.stopPropagation ();   2.阻止 和 默认行为     return false   3.阻止默认行为 不 阻止     event.preventDefault();

    29030

    相关产品

    • 事件总线

      事件总线

      腾讯云事件总线(EB)是一款安全,稳定,高效的无服务器事件管理平台,支持腾讯云服务、自定义应用、SaaS应用以标准化、中心化的方式接入,帮助您轻松实现无服务器事件驱动架构。

    相关资讯

    热门标签

    扫码关注云+社区

    领取腾讯云代金券