Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >专栏 >js-addEventListener()第三个参数useCapture

js-addEventListener()第三个参数useCapture

作者头像
acoolgiser
发布于 2020-11-03 02:47:59
发布于 2020-11-03 02:47:59
1.1K00
代码可运行
举报
文章被收录于专栏:acoolgiser_zhuanlanacoolgiser_zhuanlan
运行总次数:0
代码可运行

js-addEventListener()第三个参数useCapture

概述:

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

html片段

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
    < 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代码

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
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同理

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2020/11/02 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
事件冒泡和传播
这还要从遥远的荒诞说起,两家网景和ie,为了能争夺市场,互相使用相反的技术,当网景使用事件传播的时候,ie使用事件冒泡。(两个正好相反)这个时候w3c来了,为了能规范规定,直接取折中,当事件发生时,先发生向下传播,当到底了以后再次使用事件冒泡,逐渐的冒泡到顶层window
mySoul
2018/08/13
8930
event事件对象
event: 事件对象,当一个事件发生的时候,和当前这个对象发生的这个事件有关的一些详细信息都会被临时保存到一个指定的地方-event对象,供我们在需要的时候调用。
河湾欢儿
2018/09/06
1.1K0
JS事件流模型
事件捕获Event Capturing是一种从上而下的传播方式,以click事件为例,其会从最外层根节向内传播到达点击的节点,为从最外层节点逐渐向内传播直到目标节点的方式。 事件冒泡Event Bubbling是一种从下往上的传播方式,同样以click事件为例,事件最开始由点击的节点,然后逐渐向上传播直至最高层节点。
WindRunnerMax
2020/08/27
1.6K0
前端基础-事件
onclick 其实就是html元素的一个属性,而属性的值需要是 一段可执行的JS代码
cwl_java
2020/03/26
1.3K0
js事件冒泡
DOM事件流(event flow )存在三个阶段:事件捕获阶段、处于目标阶段、事件冒泡阶段。
ZEHAN
2020/10/26
11.9K0
js事件冒泡
前端基础-事件对象
事件的触发,大部分情况下是用户的一种行为,也就是说,我们并不能确定用户什么时间触发;
cwl_java
2020/03/26
4850
JS事件流、事件冒泡、阻止冒泡、事件捕获(一看就懂)
事件是可以被 JavaScript 侦测到的行为。 鼠标点击、鼠标移动、鼠标滚动、按下键盘,浏览器窗口大小的改变,网页加载完成,关闭网页等等都会发生事件。
别盯着我的名字看
2022/06/09
17K0
JS事件流、事件冒泡、阻止冒泡、事件捕获(一看就懂)
面试官:什么是js中的事件流以及事件模型?
我们先从字面意义上理解,事件我们已经知道了是什么,那流呢?我们看看百度对于流的解释
inline705
2022/03/01
2K0
面试官:什么是js中的事件流以及事件模型?
JavaWeb——JavaScript精讲之DOM、BOM对象与案例实战(动态添加删除表格)
上一博文种讲解了JavaScript基础的ECMAScript,包括基本语法和部分对象,本文中继续讲解JavaScript中比较重要的两部分内容BOM、DOM及事件,后文中有对应的实战练习。
Winter_world
2020/09/25
2.2K0
JavaWeb——JavaScript精讲之DOM、BOM对象与案例实战(动态添加删除表格)
js addEventListener事件捕获与冒泡,第三个参数详解,阻止事件传播
element.addEventListener(event, function[, useCapture])
全栈程序员站长
2022/11/17
2.9K0
js addEventListener事件捕获与冒泡,第三个参数详解,阻止事件传播
JavaScript进阶内容——DOM详解
JavaScript使我们有能力创建动态页面,而事件就是被JavaScript所侦测到的行为。
秋落雨微凉
2022/10/25
1.5K0
JavaScript进阶内容——DOM详解
解析Javascript事件冒泡机制
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://louluan.blog.csdn.net/article/details/23927347
亦山
2019/05/25
7510
js一些案例的使用
1 延迟提示框的使用 方式一: <!DOCTYPE html> <html> <head> <title>延迟提示框的使用1</title> <style> #div1{ background:red; width:200px; height:30px; } #div2{ background:#ccc; width:150px; height:20px; margin:10px; display:none; } </style>
用户5927264
2019/07/31
6120
JS示例01-鼠标移入移出事件
1、匿名函数 2、鼠标事件 3、document.getElementById() 4、window.onload 5、行间事件提取
专注APP开发
2019/11/07
5.6K0
JS示例01-鼠标移入移出事件
【前端】:client、offset、scroll
Get the current computed width for the first element in the set of matched elements.
WEBJ2EE
2020/01/17
9850
【前端】:client、offset、scroll
原生JS实现拖拽进度条、滚动鼠标显示相应的内容
今天要分享的是运用原生JS实现拖拽进度条、滚动鼠标显示相应的内容,实现效果如下:
越陌度阡
2020/11/26
4.9K0
原生JS实现拖拽进度条、滚动鼠标显示相应的内容
E006Web学习笔记-JavaScript(四):DOM
将标记语言文档的各个部分,封装为对象,可以使用这些对象,对标记语言文档进行CRUD(增删改查)的动态操作;
訾博ZiBo
2025/01/06
590
E006Web学习笔记-JavaScript(四):DOM
前端day16-JS(WebApi)学习笔记(事件补充、事件冒泡与捕获)
var code = e.keyCode || e.charCode || e.which;
帅的一麻皮
2020/05/05
1.8K0
事件
JavaScript与HTML之间的交互式通过事件实现的。 事件,就是文档或浏览器窗口中发生的一些特定的交互瞬间。可以使用侦听器(或处理程序)来预订事件,以便事件发生时执行相应的代码。
奋飛
2019/08/15
3.3K0
3-DOM
将标记语言文档(HTML,XML…)的各个部分,封装为对象,可以使用这些对象,对标记语言文档进行CRUD动态操作
Ywrby
2022/10/27
1.3K0
相关推荐
事件冒泡和传播
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文