wenb前端学习笔记25-事件发展历程及操作方式

最新推荐文章于 2021-03-15 10:42:12 发布

喵了个咪蛋儿

最新推荐文章于 2021-03-15 10:42:12 发布

阅读量306

点赞数

分类专栏： web前端学习文章标签： javascript js html5 html

本文链接：https://blog.csdn.net/weixin_42727838/article/details/107734715

版权

web前端学习专栏收录该内容

29 篇文章 0 订阅

订阅专栏

一、事件

对可识别的控件的操作就是事件，在特定时间发生的事情

1.1 事件流的概念

事件执行的流程就是事件流，事件流实际上就是在元素之间可以传递的事件的过程

1.2 事件流的分类

捕获流事件
网景公司在Netscape浏览器中提出捕获事件流，事件触发机制是从最外层元素向最内层元素查找事件的来源
冒泡流事件
微软公司在IE浏览器中提出的事件执行流程，事件由触发事件的第一个元素向外层元素逐渐扩散（从内向外）
标准事件流程
在DOM2阶段，W3C提出了标准的事件流程，将事件的流程一共划分为三个阶段：事件的捕获阶段、处于事件阶段、事件的冒泡阶段

&& 绝大多数浏览器都是支持W3C标准事件模式，低版本IE浏览器并不支持事件的捕获流，但绝大多数的常用事件都在事件流的冒泡阶段可以实现
【冒泡事件流代码示例】

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>事件</title>
		<style>
			div{
				padding: 30px;
				border: 2px solid black;
			}
			#red{
				background: red;
			}
			#orange{
				background: orange;
			}
			#yellow{
				background: yellow;
			}
			#green{
				background: green;
			}
			#cyan{
				background: cyan;
			}
			#blue{
				background: blue;
			}
			#purple{
				background: purple;
			}
		</style>
	</head>
	<body>
		<!-- 冒泡事件流 -->
		<!-- this表示当前标签 -->
		<div id="red" onclick="show(this)">
			<div id="orange" onclick="show(this)">
				<div id="yellow" onclick="show(this)">
					<div id="green" onclick="show(this)">
						<div id="cyan" onclick="show(this)">
							<div id="blue" onclick="show(this)">
								<div id="purple" onclick="show(this)"></div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		
		<script>
			// 在标签的事件函数中使用this参数，表示将当前标签（元素节点）当作实参传入事件函数
			function show(element){  //element接收this参数
				console.log(element.id);
			}
		</script>
	</body>
</html>

在这里插入图片描述

二、事件的添加与删除操作

2.1 DOM0阶段

<标签事件名="事件函数()">内容</标签>
元素节点.事件名=事件函数
【注】

使用方法2时绝大多数情况下使用的都是匿名函数
缺点： 无法指定DOM中事件的阶段，因为该阶段还没有事件标准。且事件效率较低
优点： 所有浏览器都支持该方法，没有兼容性问题

2.2 DOM2阶段

2.2.1 IE版本

关键字	释义	格式	事件类型	事件函数
attachEvent();	注册事件	`元素节点.attachEvent('事件类型',事件函数);`	使用带有on的事件类型，如onclick	推荐使用声明函数(因为删除时还需要此函数)
detachEvent();	移除事件	`元素节点.detachEvent('事件类型',事件函数);`	使用带有on的事件类型，如onclick	推荐使用声明函数(因为删除时还需要此函数)

2.2.2 非IE版本

关键字	释义	格式	事件类型	事件函数	事件阶段
addEventListener();	注册事件	`元素节点.addEventListener('事件类型',事件函数,事件阶段);`	使用事件名称，不可以使用on，如click,mouseover	推荐使用声明函数(因为移除时还需要此函数)	true捕获流 false冒泡流
removeEventListener();	取消事件	`元素节点.removeEventListener('事件类型',事件函数,事件阶段);`	使用事件名称，不可以使用on，如click,mouseover	推荐使用声明函数(因为移除时还需要此函数)	true捕获流 false冒泡流

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>事件</title>
		<style>
			#moon{
				width: 800px;
				height: 20px;
				background: palegoldenrod;
			}
			#home{
				width: 800px;
				height: 20px;
				background: paleturquoise;
			}
			#farmer{
				width: 800px;
				height: 20px;
				background: palevioletred;
			}
			#eat{
				width: 800px;
				height: 20px;
				background: palegreen;
			}
		</style>
	</head>
	<body>
		<!-- DOM0事件操作 -->
		<div id="moon" onclick="showTxt(this)">床前明月光</div>
		<div id="home" onclick="showTxt(this)">低头思故乡</div>
		
		<!-- DOM2事件操作——IE浏览器 -->
		<div id="farmer">锄禾日当午</div>
		<!-- DOM2事件操作——非IE浏览器 -->
		<div id="eat">谁知盘中餐</div>
		
		<script>
			// DOM0事件操作
			// DOM0事件添加 方法1
			function showTxt(ele){
				alert(ele.innerHTML);
			}
			// 取消DOM0事件
			var moon=document.getElementById('moon');
			moon.onclick=null;
			// DOM事件添加 方法2
			var home=document.getElementById('home');
			home.onclick=function(){
				// 在对象内部使用this，this代表当前对象本身
				alert(this.innerHTML);
			}
			
			// DOM2阶段事件操作
			// IE浏览器（只支持冒泡流）——————————————————
			var farmer=document.getElementById('farmer');
			// 事件函数
			function showFarmer(){
				alert(farmer.innerHTML);
			}
			// 事件添加
			farmer.attachEvent('onclick',showFarmer);
			// 事件移除(五秒后移除)
			setTimeout(function(){
				farmer.detachEvent('onclick',showFarmer);
			},5000);
			
			// 非IE浏览器——————————————————————————————
			var eat=document.getElementById('eat');
			// 事件函数
			function showEat(){
				alert(eat.innerHTML);
			}
			// 事件添加
			eat.addEventListener('click',showEat,true);
			// 事件移除(五秒后移除)
			setTimeout(function(){
				// 需保证参数和添加事件的完全一致
				eat.removeEventListener('click',showEat,true);
			},5000);
		</script>
	</body>
</html>

2.3 兼容性事件工具对象

【制作事件兼容性工具】
需考虑的问题：

DOM0还是DOM2？能用DOM2就用DOM2
IE浏览器还是非IE？

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>事件</title>
		<style>
			#lili{
				width: 800px;
				height: 20px;
				background: peru;
			}
		</style>
	</head>
	<body>
		<!-- 事件兼容性工具 -->
		<div id="lili">粒粒皆辛苦</div>
<!-- ———————————————————————————————————————————————————————————————— -->
		<script>
			// 事件兼容性工具
			// 定义事件工具对象
			var eventTools={
				// 添加事件
				// element 标签（元素）  type事件类型(不带on)   func 事件函数
				addEvent:function(element,type,func){
					// 判断是否支持DOM2的addEventListener方法
					if(element.addEventListener){ //非IE DOM2，type：click
						element.addEventListener(type,func,false);  //ie不支持捕获流因此参数使用false
					}else if(element.attachEvent){  //IE DOM2，type：onclick
						element.attachEvent('on'+type,func); 
					}else{  //DOM0
						element['on'+type]=func;  //中括号将字符串变为对象成员属性（对象的成员是个变量）
					}	
				},
				// 取消事件
				delEvent:function(element,type,func){
					// 判断是否支持DOM2的addEventListener方法
					if(element.removeEventListener){ //非IE DOM2，type：click
						element.removeEventListener(type,func,false);  //ie不支持捕获流因此参数使用false
					}else if(element.detachEvent){  //IE DOM2，type：onclick
						element.detachEvent('on'+type,func); 
					}else{  //DOM0
						element['on'+type]=null;  //中括号将字符串变为对象成员属性（对象的成员是个变量）
					}
				}
			}
			// 为div添加事件
			var lili=document.getElementById('lili');
			// 事件函数
			function minnong(){
				alert(lili.innerHTML);
			}
			// 添加事件
			eventTools.addEvent(lili,'click',minnong);
		</script>
	</body>
</html>