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

相关文章

2.1/5.1和7.1声道系统有什么区别? 音频声道的专业知识科普

《2.1/5.1和7.1声道系统有什么区别?音频声道的专业知识科普》当设置环绕声系统时,会遇到2.1、5.1、7.1、7.1.2、9.1等数字,当一遍又一遍地看到它们时,可能想知道它们是什... 想要把智能电视自带的音响升级成专业级的家庭影院系统吗?那么你将面临一个重要的选择——使用 2.1、5.1 还是

Python中@classmethod和@staticmethod的区别

《Python中@classmethod和@staticmethod的区别》本文主要介绍了Python中@classmethod和@staticmethod的区别,文中通过示例代码介绍的非常详细,对大... 目录1.@classmethod2.@staticmethod3.例子1.@classmethod

Golan中 new() 、 make() 和简短声明符的区别和使用

《Golan中new()、make()和简短声明符的区别和使用》Go语言中的new()、make()和简短声明符的区别和使用,new()用于分配内存并返回指针,make()用于初始化切片、映射... 详细介绍golang的new() 、 make() 和简短声明符的区别和使用。文章目录 `new()`

Python中json文件和jsonl文件的区别小结

《Python中json文件和jsonl文件的区别小结》本文主要介绍了JSON和JSONL两种文件格式的区别,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下... 众所周知,jsON 文件是使用php JSON(JavaScripythonpt Object No

结构体和联合体的区别及说明

《结构体和联合体的区别及说明》文章主要介绍了C语言中的结构体和联合体,结构体是一种自定义的复合数据类型,可以包含多个成员,每个成员可以是不同的数据类型,联合体是一种特殊的数据结构,可以在内存中共享同一... 目录结构体和联合体的区别1. 结构体(Struct)2. 联合体(Union)3. 联合体与结构体的

什么是 Ubuntu LTS?Ubuntu LTS和普通版本区别对比

《什么是UbuntuLTS?UbuntuLTS和普通版本区别对比》UbuntuLTS是Ubuntu操作系统的一个特殊版本,旨在提供更长时间的支持和稳定性,与常规的Ubuntu版本相比,LTS版... 如果你正打算安装 Ubuntu 系统,可能会被「LTS 版本」和「普通版本」给搞得一头雾水吧?尤其是对于刚入

python中json.dumps和json.dump区别

《python中json.dumps和json.dump区别》json.dumps将Python对象序列化为JSON字符串,json.dump直接将Python对象序列化写入文件,本文就来介绍一下两个... 目录1、json.dumps和json.dump的区别2、使用 json.dumps() 然后写入文

Python中的异步:async 和 await以及操作中的事件循环、回调和异常

《Python中的异步:async和await以及操作中的事件循环、回调和异常》在现代编程中,异步操作在处理I/O密集型任务时,可以显著提高程序的性能和响应速度,Python提供了asyn... 目录引言什么是异步操作?python 中的异步编程基础async 和 await 关键字asyncio 模块理论

禁止平板,iPad长按弹出默认菜单事件

通过监控按下抬起时间差来禁止弹出事件,把以下代码写在要禁止的页面的页面加载事件里面即可     var date;document.addEventListener('touchstart', event => {date = new Date().getTime();});document.addEventListener('touchend', event => {if (new

native和static native区别

本文基于Hello JNI  如有疑惑,请看之前几篇文章。 native 与 static native java中 public native String helloJni();public native static String helloJniStatic();1212 JNI中 JNIEXPORT jstring JNICALL Java_com_test_g