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

最新推荐文章于 2023-01-18 20:24:11 发布

anh_qwh

最新推荐文章于 2023-01-18 20:24:11 发布

阅读量312

点赞数

分类专栏： WEB前端 JavaScript 文章标签：事件冒泡事件捕获事件委派阻止事件冒泡阻止默认事件

本文链接：https://blog.csdn.net/QWH_PYTHON/article/details/103190201

版权

WEB前端同时被 2 个专栏收录

61 篇文章 0 订阅

订阅专栏

JavaScript

27 篇文章 0 订阅

订阅专栏

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

JavaScript 的事件流模型

JavaScript 的事件流模型

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

一：事件冒泡

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

1、事件冒泡的概念

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

2、触发事件冒泡的情况

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

事件冒泡
1.DOM0 事件模型绑定的事件均为事件冒泡
2.IE8 之前使用 attachEvent() 添加的事件均为事件冒泡
3.对于其他浏览器使用 addEventListener() 添加的事件，当第三个参数为 false 或省略时，为事件冒泡

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.当点击 div3 时，可以发现 div1，div2 和 div3 的 onclick 事件被触发，触发顺序是从祖先元素 div1 开始，依次向当前元素 div3触发
2.当点击 div2 时，可以发现 div1 和 div2 的 onclick 事件被触发，触发顺序是从祖先元素 div1 开始，依次向当前元素 div2触发

3.当点击最外层 div1 时，可以发现祖先元素 div1 的 onclick 事件被触发

三：事件委派

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

1、事件委派的概念

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

2、事件委派的原理

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

3、原生 JavaScript 实现事件委派

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

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<title>事件委派</title>
</head>
<body>
	<div>
		<ul id="ul">
			<li >项目一</li>
			<li >项目二</li>
			<li >项目三</li>
		</ul>
	</div>
</body>
<script type="text/javascript">
	var ul = document.getElementById('ul');  // 取到 ul 元素节点

	// 将本该添加在 li 的事件，添加在其父节点 ul 上
	ul.onclick = function(e){
		// 取到事件因子
		var evn = window.event;    // var evn = e;
		// 取到当前点击的是哪一个标签
		var target = event.srcElement;      // var target = evn.target
		if(target.nodeName.toLowerCase()=='li'){
			// 使用 target 代替当前被单击的节点
			console.log(target.innerText);
		}
	}
</script>
</html>

效果动态图
在这里插入图片描述

将本该添加在 li 上面的单击事件，添加在 li 的父亲节点 ul 上，并在事件函数中取到事件因子，进而通过事件因子取到当前单击的元素。如果单击的元素是 li，则触发操作

4、事件委派的作用

(1) 提高性能

将事件绑定在父亲节点上，只需要绑定一个事件就可以
而将事件依次添加给子节点，则需要绑定多个事件

(2) 新添加的元素会具有同类型元素的事件

如果使用其他方式绑定事件，当页面新增同类的节点时，这些节点不会获得之前绑定的事件

四：阻止事件冒泡

并不是所有的事件冒泡都是对开发有利的，当不想让子元素的事件影响到父元素时
对于 IE8 以前的浏览器，可以将 evn.cancelBubble 属性设为 true
对于其他浏览器，调用 evn.stopPropagation() 方法

<script type="text/javascript">
	function myParagraphEventHandler(e){
		window.evn = window.event;
		if(evn.stopPropagation){
			evn.stopPropagation();    // IE8 以外的浏览器
		}else{
			evn.cancelBubble = true;   // IE8 之前的浏览器
		}
	}
</script>

五：阻止默认事件

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

<script type="text/javascript">
	function myParagraphEventHandler(e){
		window.evn = window.event;
		// 阻止默认行为
		if(evn.preventDefault){
			evn.preventDefault();    // IE8 以外的浏览器
		}else{
			evn.returnValue = false;   // IE8 之前的浏览器
		}
	}
</script>