专栏首页acoolgiser_zhuanlanjs-addEventListener()第三个参数useCapture

js-addEventListener()第三个参数useCapture

js-addEventListener()第三个参数useCapture

概述:

第3个参数叫做useCapture,是一个boolean值,就是true or false 。如果送出true的话就是浏览器会使用Capture方式,false的话是Bubbling,只有在特定状况下才会有影响,通常建议是false,而会有影响的情形是目标元素(target element)有祖先元素(ancestor element),而且也有同样的事件对应函数

html片段

    < div id =“ div1” style =“背景:蓝色;宽度:100px;高度:100px;” > 
        < div id =“ div2” style =“ background:red; width:70px; height:70px;” > 
            < div id =“ div3” style =“背景:黄色;宽度:50像素;高度:50像素;” > </ div > 
        </ div > 
    </ div >

js代码

var oDvi1 = document.getElementById('div1' ),
    oDvi2 = document.getElementById('div2' ),
    oDvi3 = document.getElementById('div3' );


// 
123- > 456- > 345 oDvi1.addEventListener('click',xx1,true );
oDvi2.addEventListener( 'click',xx2,false );
oDvi3.addEventListener( 'click',xx3,true );


function xx1(){ //蓝
    alert(123);
}

function xx2(){ //红
    alert(345);
}

function xx3(){//黄
    alert(456);
}

总结:

在div3上触发点击事件

捕获阶段: 外-》里 * 在div1处检测 useCapture 是否为true,是则执行程序, div2同理 .

目标阶段: 目标到div3处,发现div3就是鼠标点击的节点, 所以这里是目标阶段。若有事件处理程序,则执行该程序,这里不论 useCapture 为 true 还是 false。

冒泡阶段: 里-》外 在div2处检测useCapture 是否为false, 是则执行该程序 . div1同理

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 前端小知识10点(2020.10.8)

    ① 数组易读取,链表只能一个个读或者需要额外空间才能易读取 ② 数组增删元素需要使用index,链表不用

    进击的小进进
  • Javascript 的addEventListener()及attachEvent()区别分析

    Mozilla中:  addEventListener的使用方式:  target.addEventListener(type, listener, useCa...

    smy
  • JS高级测试: 下列事件说法不正确的是?

    addEventListener() 方法可以指定 "useCapture" 参数来设置传递类型:

    舒克
  • 一次关于js事件出发机制反常的解决记录

    起因:正常情况下我点击s2时是先弹出我是children,再弹出我是father,但是却出现了先弹出我是father,后弹出我是children的情况,这种情况...

    吴裕超
  • [转]addEventListener() 方法,事件监听

    悟空聊架构
  • JS事件流模型

    事件捕获Event Capturing是一种从上而下的传播方式,以click事件为例,其会从最外层根节向内传播到达点击的节点,为从最外层节点逐渐向内传播直到目标...

    WindrunnerMax
  • JQuery分析及实现part5之事件模块功能及实现

    ihoey
  • DOM事件第二弹(UIEvent事件)

    此文章主要总结UIEvent相关的事件,如有不对的地方,欢迎指正。 一、uitls.js(绑定事件公共类) var fixs = { 'focusin'...

    sam dragon
  • 「面试常问」系统理解浏览器之事件机制

    在早期 IE 和 Netscape 团队在开发第四代浏览器的时候,遇到一个问题:当点击一个按钮的时候,是应该先处理父级的事件呢?还是应该先处理按钮的事件呢?IE...

    用户4456933

扫码关注云+社区

领取腾讯云代金券