DOM事件，捕获和冒泡 自定义事件

最新推荐文章于 2023-01-10 11:42:44 发布
最新推荐文章于 2023-01-10 11:42:44 发布
阅读量344 收藏
点赞数 1
分类专栏： DOM事件
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cdx1170776994/article/details/87166624
版权 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Event</title>
	</head>
	<body>
		<div id="ev">
			<style type="text/css">
				#ev{
					width: 300px;
					height: 100px;
					background: red;
					color: #fff;
					text-align: center;
					line-height: 100px;
				}
			</style>
			目标元素
		</div>
		<script type="text/javascript">
			
			// addEventListener() 函数后面为true捕获 为false冒泡
			var ev = document.getElementById('ev');
			
			window.addEventListener('click',function(){
				console.log('window captrue')
			},false);
			
			document.addEventListener('click',function(){
				console.log('document captrue')
			},false);
			
			document.documentElement.addEventListener('click',function(){
				console.log('html captrue')
			},false);
			
			document.body.addEventListener('click',function(){
				console.log('body captrue')
			},false);
			
			ev.addEventListener('click',function(){
				console.log('ev captrue')
			},false)
		</script>
	</body>
</html>

如上列所示，为冒泡事件。可以直接复制代码运行，刷新点击可以在打印出冒泡事件的

 当把函数后面的false改为true时，则为捕获事件，此时，刷新点击目标元素，答应打印顺序如下

 

 最后就是dom的自定义事件

// 自定义事件
			var eve = new Element('test');
			ev.addEventListener('test',function(){
				console.log('test dispatch')
			})
			ev.dispatchEvent(eve);

 

cdShow小太阳
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
DOM中的事件流、事件对象、事件委托、阻止事件冒泡
wutong_jun的博客
08-18 281
DOM事件流、什么是事件对象,event对象代表事件的状态,事件对象的兼容性方案,事件对象的常见属性和方法,e.target和this的区别,阻止事件冒泡的两种方式,事件委托(代理、委派)
DOM事件流、事件冒泡、事件捕获及阻止冒泡的方法
划水队员的博客
07-22 1100
文章目录一、DOM事件流二、事件捕获和事件冒泡1.事件捕获2.事件冒泡三、阻止事件冒泡的方法 一、DOM事件流 DOM(文档对象模型)结构是一个树型结构，当一个HTML元素产生一个事件时，该事件会在元素节点与根结点之间的路径传播，路径所经过的结点都会收到该事件，这个传播过程可称为DOM事件流。 在DOM兼容浏览器中，事件流分为3个阶段： 捕获阶段：事件从Document节点自上而下向目标节点传播的阶段； 目标阶段：真正的目标节点正在处理事件的阶段； 冒泡阶段：事件从目标节点自下而上向Document节点
DOM——事件捕获与事件冒泡
weixin_68160847的博客
01-10 419
事件冒泡和事件捕获分别由微软和网景公司提出，这两个概念都是为了解决页面中事件流（事件发生顺序）的问题。
DOM事件流,捕获与冒泡
大鹏的博客
12-13 231
因为默认就有冒泡模式的存在，所以容易导致事件影响到父级元素若想把事件就限制在当前元素内，就需要阻止事件冒泡,阻止事件冒泡需要拿到事件对象。注意：此方法可以阻断事件流动传播，不光在冒泡阶段有效，捕获阶段也有效。此方法可以阻断事件流动传播,不光冒泡阶段有用,捕获阶段也有效。on事件方式，直接使用null覆盖偶就可以实现事件的解绑。事件委托就是给父级添加事件,而不是给子级添加事件。因为默认有冒泡模式的存在,所以需要阻止事件流动。- 事件流指的是完整执行过程中的流动路径。- 相同的事件才会有事件流。
js中的DOM事件之冒泡和捕获事件详解
热门推荐
object not found的博客
08-22 2万+
DOM中的事件是一个很中要的东西，它可以让用户和浏览器之间进行交互，以此来实现人机交互效果。
理解DOM事件流的三个阶段
weixin_34365635的博客
02-20 788
本文主要解决两个问题： 什么是事件流 DOM事件流的三个阶段 起因 在学习前端的大半年来，对DOM事件了解甚少。一般也只是用用onclick来绑定个点击事件。在寒假深入学习JavaScript时，愈发觉得自己对DOM事件了解不够，遂打开我的《JavaScript高级程序设计》，翻到DOM事件那一章，开始第二次学习之旅。当然，DOM事件...
深入理解JS DOM事件机制
10-21
- DOM2级事件规范定义了一个统一的事件流模型，包含三个阶段：事件捕获阶段、处于目标阶段和冒泡阶段。 - 在捕获阶段，事件从文档的根节点开始，经过每个层级，直到目标元素。 - 处于目标阶段，事件真正到达触发...
手写DOM事件模型
04-29
DOM事件模型分为三个层次：**事件冒泡（Event Bubbling）**、**事件捕获（Event Capturing）**和**DOM2级事件模型**。事件冒泡是从最深的节点开始，逐级向上层节点传播事件；事件捕获则相反，从最外层节点开始，向下...
有关DOM元素与事件的3个谜题
09-05
事件在DOM树中传播时，有两种模式：冒泡和捕获。冒泡是从最深的节点开始，逐级向上级节点传递；捕获则是从根节点开始，向下到目标节点。在addEventListener中，通过第三个参数可以指定是使用冒泡还是捕获模式。 ...
事件绑定和自定义属性
05-29
源码分析可以帮助我们理解事件绑定和自定义属性在实际项目中的用法，以及如何与其他技术（如DOM操作、AJAX请求等）协同工作。同时，利用各种开发工具（如Chrome DevTools）进行实时调试和测试，可以加深对这些概念的...
DOM和事件工作室主
02-20
7. **自定义事件（Custom Events）**：开发者可以创建自己的事件，通过`new Event()`或`new CustomEvent()`构造函数实例化，并通过`dispatchEvent()`方法触发。 8. **事件委托（Event Delegation）**：利用事件冒泡...
DOM事件阶段以及事件捕获与事件冒泡先后执行顺序
一生为追梦的博客
04-28 4343
DOM事件三个阶段 当一个DOM事件被触发时，它不仅仅只是单纯地在本身对象上触发一次，而是会经历三个不同的阶段： 捕获阶段：先由文档的根节点document往事件触发对象，从外向内捕获事件对象；目标阶段：到达目标事件位置（事发地），触发事件；冒泡阶段：再从目标事件位置往文档的根节点方向回溯，从内向外冒泡事件对象。 引用来源：http://www.w3.org/
js事件冒泡和事件捕获
hangGe0111的博客
08-01 754
转载：https://www.cnblogs.com/qq9694526/p/5653728.html 1.html &lt;!--一、事件冒泡和事件捕获--&gt; &lt;div id="parent"&gt; 　　&lt;div id="child" class="child"&gt;点击child&lt;/div&gt; &lt;/div&gt;
Js中级--事件捕获
Wendy
12-11 546
1、事件传播-冒泡与捕获        DOM事件标准定义了两种事件流，这两种事件流有着显著的不同并且可能对你的应用有着相当大的影响。这两种事件流分别是捕获和冒泡。    　 默认情况下，事件使用冒泡事件流，不使用捕获事件流。然而，在Firefox和Safari里，你可以显式的指定使用捕获事件流，方法是在注册事件时传入useCapture参数，将这个参数设为true。 W3C模型是将事件冒泡
DOM的事件传递机制 —— 捕获与冒泡
Stella的博客
06-28 1431
DOM的事件传递机制 —— 捕获与冒泡 在用react写form表单的时候，看到代码里面有一句e.preventdafault()，因为不知道这个函数什么意思，就查了一下，才发现和Event事件有关系，并且也逃不掉事件的捕获与冒泡。为此，借此机会顺便了解学习了一些相关知识。 文章参考： https://blog.techbridge.cc/2017/07/15/javascript-event-...
DOM 事件流+事件捕获+事件冒泡+阻止事件冒泡和默认事件
weixin_47075145的博客
07-20 1180
因为点击box3时，因为box1的点击事件在捕获阶段并没有触发（addEventListener第3个参数没写或者写false代表冒泡阶段触发），然后一直沿着父子关系向下传递，直到最下面的box3，然后进入冒泡阶段，因为点击是点到box3，所以触发了box1传下来的点击事件，执行box1绑定的点击事件，打印box11111，所以box3就是目标（target谁触发得事件target就是谁event.target=box3）就连本身绑定同一类型的第二个点击事件都经过不了，更不说冒泡了。............
DOM事件捕获与冒泡自定义事件
czw
10-12 169
DOM事件小计 基本概念：DOM事件的级别 DOM0: element.onclick = function(){} DOM2: element.addEventListener('click',function(){},false) DOM3: element.addEventListener('keyup',function(){},false) DOM事件模型 捕获 冒泡...
pillow-10.4.0-pp39-pypy39_pp73-macosx_11_0_arm64.whl
最新发布
07-27
基本介绍 名称与起源：Pillow，原名为PIL（Python Imaging Library），但PIL只支持Python 2版本。随着Python 3的普及，Pillow作为PIL的一个分支出现，兼容Python 3并提供更多的功能和改进。 主要功能：Pillow支持多种图像格式的打开、保存、显示以及基本的图像操作和处理，如裁剪、缩放、旋转、翻转、滤镜应用等。 跨平台性：Pillow库可以在不同的操作系统上运行，包括Windows、Linux和MacOS等。 主要功能模块 Pillow库包含多个功能模块，每个模块都提供了特定的图像处理功能。以下是一些常用的模块： Image：用于处理图像文件，提供打开、保存、调整大小、旋转、裁剪、滤镜等功能。 ImageDraw：提供在图像上绘制各种形状（如线条、矩形、圆形）和文本的功能。 ImageFont：用于加载和使用TrueType字体文件，以便在图像上绘制文本时设置字体样式、大小和颜色。 ImageFilter：提供各种滤镜效果，如模糊、锐化、边缘增强等，用于图像增强、特效处理和图像识别等应用。 ImageEnhance：用于调整图像的亮度、对比度、颜色饱和度等参数，使图像更加清晰、明亮或具有特定的调色效果。 高级功能 除了基本的图像处理功能外，Pillow还支持一些高级功能，如色彩空间转换、直方图均衡化等。这些功能可以帮助用户进行更复杂的图像处理和分析。
JavaScript事件处理详解：从基础到DOM2标准
早期的Internet Explorer 4 (IE4)和Netscape Navigator 4 (NN4)采用了各自不同的事件模型，而DOM2标准事件模型则提供了一种统一的跨浏览器事件处理机制，它引入了事件冒泡和事件捕获的概念，使得事件处理更加灵活和...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值