JavaScript 事件-JavaScript 的事件流模型

最新推荐文章于 2023-02-08 13:41:18 发布

我敲代码养你啊！！！

最新推荐文章于 2023-02-08 13:41:18 发布

阅读量307

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/weixin_45725033/article/details/103541747

版权

js 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

JavaScript-5.3-JavaScript 事件-JavaScript 的事件流模型

JavaScript 的事件流模型

事件流，就是当一个节点触发事件时，事件会从当前节点流向其他节点
而根据事件流动的方向，事件流模型可以分为事件冒泡和事件捕获
基于事件冒泡，又诞生了一种新的绑定方式，“事件委派”

一：事件冒泡

事件流指页面接收事件的顺序，当一个事件产生时，该事件传播过程就是事件流

1、事件冒泡的概念

当某 DOM 元素触发某事件时，会从当前 DOM 元素开始，逐个触发其祖先元素的同类型元素，直到 DOM 根节点

在这里插入图片描述

2、触发事件冒泡的情况

在人们接触到的事件绑定方式中，绝大部分都是事件冒泡

3、事件冒泡举例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>事件冒泡</title>
	<style type="text/css">
		#div1{
			height: 200px;
			width:200px;
			border:1px solid red;
		}
		#div2{
			height:100px;
			width:100px;
			border:1px solid blue;
		}
		#div3{
			height: 50px;
			width: 50px;
			border:1px solid green;
		}
	</style>
</head>
<body>
	<div id="div1">
		<div id="div2">
			<div id="div3"></div>
		</div>
	</div>
</body>
<script type="text/javascript">
	var div1 = document.getElementById('div1');
	var div2 = document.getElementById('div2');
	var div3 = document.getElementById('div3');

	div1.onclick = function(){
		console.log("触发 div1 单击事件");
	}

	div2.onclick = function(){
		console.log("触发 div2 单击事件");
	}

	div3.onclick = function(){
		console.log("触发 div3 单击事件");
	}
</script>
</html>

效果动态图
在这里插入图片描述
1.当点击最外层 div1 时，可以发现 div1 的 onclick 事件被触发
2.当点击 div2 时，可以发现 div2 和 div1 的 onclick 事件被触发，触发顺序是从 div2 开始，依次向祖先触发
3.当点击 div3 时，可以发现 div3，div2 和 div1 的 onclick 事件被触发，触发顺序是从 div3 开始，依次向祖先触发

二：事件捕获

事件捕获与实践冒泡类似，只是在事件流的方向上与实践冒泡恰恰相反
1、事件捕获的概念
当某 DOM 元素触发某事件时，会从根节点开始，逐个触发其祖先元素的同类型事件，直到根节点

2、触发事件捕获的情况
事件触发只有一种方式能够触发，即 IE8 之外的其他浏览器使用 addEventListener() 添加的事件，当第三个参数为 true 时，为事件捕获

3、事件捕获举例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>事件捕获</title>
	<style type="text/css">
		#div1{
			height: 200px;
			width:200px;
			border:1px solid red;
		}
		#div2{
			height:100px;
			width:100px;
			border:1px solid blue;
		}
		#div3{
			height: 50px;
			width: 50px;
			border:1px solid green;
		}
	</style>
</head>
<body>
	<div id="div1">
		<div id="div2">
			<div id="div3"></div>
		</div>
	</div>
</body>
<script type="text/javascript">
	var div1 = document.getElementById('div1');
	var div2 = document.getElementById('div2');
	var div3 = document.getElementById('div3');

	div1.addEventListener('click',function(){
		console.log("触发 div1 单击事件");
	},true);

	div2.addEventListener('click',function(){
		console.log("触发 div2 单击事件");
	},true);

	div3.addEventListener('click',function(){
		console.log("触发 div3 单击事件");
	},true);
</script>
</html>

在这里插入图片描述

三：事件委派

基于使劲按冒泡诞生了一种新的事件绑定方式，事件委派

1、事件委派的概念

事件委派也叫事件委托，是将本该添加在节点自身的事件，选择添加到其父节点上，同时委派给当前元素来执行

2、事件委派的原理

事件委派的原理是事件冒泡
由于给多个子元素添加事件，会沿着事件冒泡流触发其父元素的同类型事件，所以可以直接将事件添加到父元素上，并在事件函数中判断单击的是哪一个元素，进而进行具体操作

3、原生 JavaScript 实现事件委派

事件委派的实现通常使用 JQuery 框架进行

4、事件委派的作用

(1) 提高性能
将事件绑定在父亲节点上，只需要绑定一个事件就可以
而将事件依次添加给子节点，则需要绑定多个事件
(2) 新添加的元素会具有同类型元素的事件
如果使用其他方式绑定事件，当页面新增同类的节点时，这些节点不会获得之前绑定的事件
四：阻止事件冒泡
并不是所有的事件冒泡都是对开发有利的，当不想让子元素的事件影响到父元素时
对于 IE8 以前的浏览器，可以将 evn.cancelBubble 属性设为 true
对于其他浏览器，调用 evn.stopPropagation() 方法

五：阻止默认事件

对于某些标签的默认事件
a 标签自带跳转页面功能
submit 标签自带提交表单功能
reset 标签自带清除表单功能
取消默认事件的两种常用方法
IE8 之前的浏览器，evn.returnValue 属性设置为 false
IE8 以外的浏览器，调用 evn.preventDefault() 方法

我敲代码养你啊！！！

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JavaScript 事件-JavaScript 的事件流模型

JavaScript-5.3-JavaScript 事件-JavaScript 的事件流模型JavaScript 的事件流模型事件流，就是当一个节点触发事件时，事件会从当前节点流向其他节点而根据事件流动的方向，事件流模型可以分为事件冒泡和事件捕获基于事件冒泡，又诞生了一种新的绑定方式，“事件委派”一：事件冒泡事件流指页面接收事件的顺序，当一个事件产生时，该事件传播过程就是事件流1、事...
复制链接

扫一扫

专栏目录