useCapture:true与flase的表现区别 事件的冒泡与捕获

2024-06-08 19:08

本文主要是介绍useCapture:true与flase的表现区别 事件的冒泡与捕获,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

书接上文!上文讲到useCapture。

这个是官网给的解释。反正看的似懂非懂

  • true - 事件句柄在捕获阶段执行
  • false- false- 默认。事件句柄在冒泡阶段执行
我个input加了一个父节点,同时给他也加一个弹出事件。弹出 hello  子元素弹出 你好


现在是false 点击按钮 出现 你好 再出现 hello


改成true 点击按钮 先出现 hello  再出现 你好!


个人总结:false的话 就是事件冒泡了 从子元素到父元素

                    true的话   就是事件捕获 从父到子!

以下是个人写的一个demo 供大家参考!代码如下:

	<meta charset="UTF-8"><title>Document</title><style type="text/css">div{width: 200px;height: 200px;border: 1px solid red;}</style><script type="text/javascript">window.onload =function () {var oBtn =document.getElementById('btn');var oDiv =document.getElementById('div1');//compatible writingfunction addEvent(ele,eve,fn){if(ele.attachEvent){ele.attachEvent('on'+eve,fn);}else{//请修改这个boolean值。点击 “按钮”观察效果ele.addEventListener(eve,fn,true);}}addEvent(oBtn,'click',function(){alert('你好!');});addEvent(oDiv,'click',function(){alert('hello!');});}</script>
</head>
<body><div id="div1"><input type="button" value="按钮" id="btn"></div>
</body>
</html>

写到这里 我感觉有必要写一下 事件的捕获 目标 冒泡!

还有一个委托 ! 

这篇关于useCapture:true与flase的表现区别 事件的冒泡与捕获的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1043050

相关文章

hevc和H.264格式的区别

HEVC(High Efficiency Video Coding)和H.264(也称为Advanced Video Coding,AVC)都是视频压缩标准,但它们之间存在一些显著的区别,主要集中在压缩效率、资源需求和兼容性方面。 压缩效率 HEVC,也被称为H.265,提供了比H.264更高的压缩效率。这意味着在相同的视频质量下,HEVC能够以大约一半的比特率进行编码,从而减少存储空间需求和

Java面试题:通过实例说明内连接、左外连接和右外连接的区别

在 SQL 中,连接(JOIN)用于在多个表之间组合行。最常用的连接类型是内连接(INNER JOIN)、左外连接(LEFT OUTER JOIN)和右外连接(RIGHT OUTER JOIN)。它们的主要区别在于它们如何处理表之间的匹配和不匹配行。下面是每种连接的详细说明和示例。 表示例 假设有两个表:Customers 和 Orders。 Customers CustomerIDCus

Eclipse+ADT与Android Studio开发的区别

下文的EA指Eclipse+ADT,AS就是指Android Studio。 就编写界面布局来说AS可以边开发边预览(所见即所得,以及多个屏幕预览),这个优势比较大。AS运行时占的内存比EA的要小。AS创建项目时要创建gradle项目框架,so,创建项目时AS比较慢。android studio基于gradle构建项目,你无法同时集中管理和维护多个项目的源码,而eclipse ADT可以同时打开

vue+elementui分页输入框回车与页面中@keyup.enter事件冲突解决

解决这个问题的思路只要判断事件源是哪个就好。el分页的回车触发事件是在按下时,抬起并不会再触发。而keyup.enter事件是在抬起时触发。 so,找不到分页的回车事件那就拿keyup.enter事件搞事情。只要判断这个抬起事件的$event中的锚点样式判断不等于分页特有的样式就可以了 @keyup.enter="allKeyup($event)" //页面上的//js中allKeyup(e

邦芒贴士:领导最反感下属这6种表现

在单位里面,如果在工作上出现了下面六种情况,就说明领导已经开始嫌弃你了,你的工作方式和方法一定要发生一些变化,及时的适应领导,如果再按部就班,那可就是真的犯傻。 1.安排事情时你总是排在第一个 安排任何事情的时候,排在第一个的往往是最被动的,因为你没有任何比较,后面安排的任务在轻,你也很难改变这种状况,如果平时安排给你的工作,总是排在比较靠后,最近这一阵子,领导总是第一个先给你安排任务,那

在 Java 中,JDK、JRE、JVM 分别代表什么,有何关系和区别?

在Java开发的世界中,我们会经常听到JDK、JRE和JVM这三个词。它们都与Java的运行环境以及Java程序的编译和运行有关,它们之间也存在一些关联性和区别。 什么是JDK、JRE和JVM 我们来看它们分别是什么。 JDK,全称Java Development Kit,即Java开发工具包。顾名思义,JDK是用于Java开发的一套工具包,里面包含了Java的编译器javac、

QT 中ListView和ListWidget有什么区别

ListView和ListWidget在Qt框架中都是用于显示列表数据的控件,但它们在使用方法和特性上存在一些明显的差异。以下是关于它们用法不一样的地方的详细分析: 数据管理方式: ListView:使用QAbstractItemModel数据模型来管理和显示列表数据。QAbstractItemModel是一个抽象类,允许开发者自定义数据模型以适应特定的数据结构和需求。这使得ListView在处

通知中心设置一个键盘的捕捉事件

//通知中心监听键盘的frame发生改变

XMG 触摸事件的处理过程

1.自己本身并不处理,顺着响应者链条向上传递,将事件交给响应者进行处理 2.touches默认做法:把事件传递到上一个响应者 3. super是父类不是父控件

Transformers和Langchain中几个组件的区别

1.对于Transformers框架的介绍 1.1 介绍: transformers 是由 Hugging Face 开发的一个开源库,它提供了大量预训练模型,主要用于自然语言处理(NLP)任务。这个库提供的模型可以用于文本分类、信息抽取、问答、文本生成等多种任务。 1.2 应用场景: 文本分类:使用 BERT、RoBERTa 等模型进行情感分析、意图识别等。命名实体识别(NER):使用序列