JavaScript 事件捕获、事件冒泡、事件代理

最新推荐文章于 2024-11-05 22:07:06 发布
最新推荐文章于 2024-11-05 22:07:06 发布
阅读量102 收藏
点赞数
文章标签： javascript 前端 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_47974251/article/details/130563040
版权

一、定义

          事件捕获：首先是 window 会捕获到事件，之后 document、documentElement、body会捕获到，再之后就是在 body 中 DOM 元素一层一层的向下捕获到事件;

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
	.div1,
	.isp{
	  margin: 5px;
	  padding: 5px;
	  box-sizing: border-box;
	}
	.div1{
	  width: 500px;
	  height: 500px;
	  background: green;
	}
	.isp{
	  width: 200px;
	  height: 200px;
	  background: blue;
	}
	</style>
	<body>
		<div class="div1" >
			<p class="isp" ></p>
		</div>
	</body>
</html>
<script>
var div1 = document.getElementsByClassName('div1')[0]
var isp = document.getElementsByClassName('isp')[0]

// 事件捕获
window.addEventListener("click", function(e) {
  console.log("window 层捕获", e.target.nodeName, e.currentTarget.nodeName)
}, true)

document.addEventListener("click", function(e) {
  console.log("document 层捕获", e.target.nodeName, e.currentTarget.nodeName)
}, true)

document.documentElement.addEventListener("click", function(e) {
  console.log("documentElement 层捕获", e.target.nodeName, e.currentTarget.nodeName)
}, true)

document.body.addEventListener("click", function(e) {
  console.log("body 捕获", e.target.nodeName, e.currentTarget.nodeName)
}, true)

div1.addEventListener("click", function(e) {
  console.log("div1 节点捕获", e.target.nodeName, e.currentTarget.nodeName)
}, true)

isp.addEventListener("click", function(e) {
  console.log("isp 节点捕获", e.target.nodeName, e.currentTarget.nodeName)
}, true)
</script>

          事件冒泡：同捕获阶段相反，事件一层一层的向上冒泡回到 window;

<script>
var div1 = document.getElementsByClassName('div1')[0]
var isp = document.getElementsByClassName('isp')[0]

// 冒泡事件
isp.addEventListener("click", function(e) {
  console.log("isp 冒泡", e.target.nodeName, e.currentTarget.nodeName)
}, true)

div1.addEventListener("click", function(e) {
  console.log("div1 冒泡", e.target.nodeName, e.currentTarget.nodeName)
}, true)

document.body.addEventListener("click", function(e) {
  console.log("body 冒泡", e.target.nodeName, e.currentTarget.nodeName)
}, true)

document.documentElement.addEventListener("click", function(e) {
  console.log("documentElement 层冒泡", e.target.nodeName, e.currentTarget.nodeName)
}, true)

document.addEventListener("click", function(e) {
  console.log("document 冒泡", e.target.nodeName, e.currentTarget.nodeName)
}, false)

window.addEventListener("click", function(e) {
  console.log("window 冒泡", e.target.nodeName, e.currentTarget.nodeName)
}, false)

</script>

          所以，完整的 js 事件流，就是从 window 开始，最后又回到 window 的过程。

二、事件委托（事件代理）

$("节点").on("事件名称", function(e) {
  $(e.target).....
})

BUG飞檐走壁
关注
事件捕获、事件冒泡以及事件代理
weixin_48181168的博客
09-05 332
通常，我们将这种事件流向分为三个阶段：捕获阶段，目标阶段，冒泡阶段。 捕获阶段是指事件响应从最外层的Window开始，逐级向内层前进，直到具体事件目标元素。在捕获阶段，不会处理响应元素注册的冒泡事件。 目标阶段指触发事件的最底层的元素，如上图中的。 冒泡阶段与捕获阶段相反，事件的响应是从最底层开始一层一层往外传递到最外层的Window。 DOM事件流的三个阶段是先捕获阶段，然后是目标阶段，最后才是冒泡阶段。我们时常面试所说的先捕获后冒泡也由此而来。事件代理就是利用事件冒泡或事件捕获...
Javascript事件流（事件捕获、事件冒泡）,事件委托（代理）
weixin_44816505的博客
04-19 584
Javascript事件流（事件捕获、事件冒泡）–>事件委托（代理） Javascript与HTML之间的交互是通过“事件”实现的。事件，就是文档或浏览器窗口发生的一些![在这里插入图片描述](https://img-blog.csdnimg.cn/20200419004544163.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naG...
JavaScript事件，window的事件
小谭鸡米花的博客
01-20 2795
事件是发生后并得到处理的操作 一、页面相关的事件 window.onload；表示等页面所有内容（文档，图片，js，src等）加载完毕执行的代码 window.onscroll； window.onscroll = function（）{ Console.log（“滚动条滚动时触发的事件”）； } window.onresize； window.onresize= function（）{ Console.log（“窗口大小发生改变时触发的事件”）； } 二、鼠标事件
JS 两种事件处理模型：事件冒泡和事件捕获
qq_45560350的博客
08-27 506
JS 两种事件处理模型：事件冒泡和事件捕获
事件委托/事件代理 详解 含事件冒泡+事件捕获（个人总结）
zoooo_的博客
08-01 650
事件委托指的是事件可以绑定到其他节点上来触发你想要触发的目标节点的事件 首先有个问题，如果你想给同一个dom元素注册多个同类型事件，你会发现通过普通直接绑定无法实现，绑定多个事件只会出发最后一个绑定的事件。 如下图只会触发到第3个事件，控制台看到3 接下来就可以i通过事件处理器：addEventListener(type，listener，useCapture)实现 参数讲解：type：必填，字符串类型，指的是事件的类型；listener：必填，触发的事件，js方法或者函数体；useCapture
JavaScript——事件捕获和事件冒泡
zg0601的博客
11-28 9181
JavaScript中事件捕获和事件冒泡的来由以及具体讲解，阻止事件捕获和冒泡（事件传播）的方法。
JavaScript事件捕获和冒泡
qq_45499370的博客
09-21 356
JavaScript事件捕获和冒泡事件冒泡事件捕获注册事件和解除事件捕获和冒泡执行顺序 JavaScript与HTML之间的交互是通过事件实现的。事件，就是文档或者浏览器窗口中发生的一些特定的交互瞬间。 事件流描述的是从页面中接收事件的顺序。IE的事件流是事件冒泡流，网景的事件流是事件捕获流。 事件冒泡 事件冒泡，即事件开始时由最具体的元素接收，然后逐级向上传播到较为不具体的节点。以下面的HTML...
javascript 中事件冒泡和事件捕获机制的详解
01-19
javascript 中事件冒泡和事件捕获机制的详解 二者作用：描述事件触发时序问题 事件捕获：从document到触发事件的那个节点，即自上而下的去触发事件—由外到内 事件冒泡：自下而上的去触发事件—由内到外 绑定事件...
javaScript 事件绑定、事件冒泡、事件捕获和事件执行顺序整理总结
10-21
总之，JavaScript的事件处理是构建动态网页的重要手段，熟练掌握事件绑定、事件冒泡、事件捕获和事件执行顺序能帮助开发者编写更高效、更易于维护的代码。通过实践和不断学习，可以更深入地理解和运用这些概念。
javascript事件冒泡和事件捕获详解
10-24
事件代理是利用事件冒泡或事件捕获机制的一种编程技巧。通过把事件监听器绑定到一个父元素上，而不是具体的子元素上，可以利用事件冒泡来管理多个子元素的事件。比如在一个颜色列表中，如果绑定了一个点击事件处理...
每天一个JavaScript实例-铺货鼠标点击位置并将元素移动到该位置
wxyoo1 的技术人生
10-16 1085
每天一个JavaScript实例-铺货鼠标点击位置并将元素移动到该位置 #info{ width:100px; height:100px; background:red; position:absolute; top:0; left:0; } window.onload = function(){ document.onclick = clickwhere;
JS中的事件冒泡和事件捕获
z020729的博客
04-12 3812
当有很多盒子嵌套并且多层盒子都存在事件的时候，我们就必须要思考一个问题——这些事件的发生顺序。JS中用事件冒泡和事件捕获来处理事件流中事件发生顺序，在用addEventListener方法添加事件监听的时候，第三个参数用来控制是冒泡事件还是捕获事件（false为冒泡，true为捕获，默认值为false）。 事件冒泡 事件冒泡顾名思义，事件发生的顺序就像一个气泡从水底浮起那样，从底到顶，从内到外。 当只存在事件冒泡的时候，点击“李”的盒子，输出的答案如下图 可以看到从内到外依次输出了“li sun
一些常用的react hooks以及各自的作用
weixin_48602044的博客
11-01 461
关于react hooks的一些知识与应用
JavaScript 生成二维码
qq_30049249的博客
11-02 243
我试过了，这一款js库支持中英文混合。进入网站后，可以直接点击运行哟～
软件测试学习笔记丨Vue常用指令-条件渲染（v-if）
ceshiren_com的博客
11-05 501
v-show只是简单控制dom元素的display属性。v-if通过操纵dom元素来进行切换显示。
vxe-grid ，增加新行，并且定位到新增的行
花花鱼的专栏
11-05 178
vxe-grid新增空行，并且定位到空行位置。
Vue2+3
m0_73557953的博客
11-04 120
创建Vue实例 Vue指令
JavaScript数据类型- BigInt详解（处理任意大小整数的终极指南）
最新发布
cx18333的博客
11-05 483
随着ECMAScript 11（ES11）引入了BigInt，JavaScript开发者现在可以轻松地处理超出传统Number类型限制的大整数。本文全面解析了BigInt的使用方法、核心特性和限制条件，为你提供了处理大型整数数据的强大工具。从BigInt的基础用法到算术运算和比较，再到类型检查和兼容性考量，一步步的深入了解这个新的数据类型。
javascript事件冒泡与捕获机制详解及应用
在深入理解JavaScript编程时，事件冒泡和捕获机制是开发者常常遇到的重要概念，尤其是在处理复杂DOM结构时。本文将详细介绍这两个核心知识点，并通过实例来阐明其工作原理。 首先，事件的发生顺序是基于元素的层次...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值