web前端学习笔记27-事件对象

最新推荐文章于 2023-07-27 14:05:10 发布

喵了个咪蛋儿

最新推荐文章于 2023-07-27 14:05:10 发布

阅读量188

点赞数

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

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

版权

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

29 篇文章 0 订阅

订阅专栏

一、事件对象

在触发事件的时候，与事件相关的信息存储对象就是事件对象，事件对象在不同的浏览器中体现方式不同。
【IE及其他浏览器】事件对象就是window子对象之一，可通过window.event或者event直接访问事件对象
【Firefox浏览器】事件对象是以参数的形式传入事件函数的形参当中，接收之后才可以使用
事件对象的兼容性处理（函数中使用）

var e=window.event?window.event:evt;
var e=window.event || evr;

事件对象的成员： 事件对象可划分为键盘事件对象和鼠标事件对象

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>事件对象</title>
		<style>
			div{
				padding: 50px;
			}
			#red{
				background: red;
			}
		</style>
	</head>
	<body>
		<!-- 事件对象获取 -->
		<div>
			<div id="red"></div>
		</div>
		<script>
			// 事件对象的获取
			var red=document.getElementById('red');
			// 事件函数
			
			/*
				// IE浏览器-------------------------
				function func(){
					console.log(window.event);
				}
				red.addEventListener('click',func,false);
				// 火狐浏览器，事件对象以形参方式传入-------
				function funchh(evt){
					console.log(evt);
				}
				red.addEventListener('click',funchh,false);
			*/
		   
			// 解决兼容性问题
			function funcjr(evt){
				var e=window.event?window.event:evt;
				// 或者：
				/*
					if(window.event){
						var e=window.event;
					}else{
						var e=evt;
					}
				*/
				console.log(e);
			}
			red.addEventListener('click',funcjr,false);
		</script>
	</body>
</html>

二、事件对象的成员属性

关键字	释义
altKey	检测是否按下alt功能键，按下true，没按false
shiftKey	检测是否按下shift功能键，按下true，没按false
ctrlKey	检测是否按下ctrl功能键，按下true，没按false
keyCode	返回键盘按键的ASCII码
bubbles	事件是否可以冒泡传播，true冒泡，false不冒泡
cancelBubble	是否取消冒泡传播，true不冒泡，false冒泡
stopPropagation()	取消事件的传播方式(w3c)
clinetX	返回当事件被触发时鼠标指针相对于浏览器页面（或客户区）的水平坐标 ★
clinetY	返回当事件被触发时鼠标指针相对于浏览器页面（或客户区）的垂直坐标 ★
screenX	返回鼠标相对于屏幕左侧的水平距离
screenY	返回鼠标相对于屏幕顶部的垂直距离
pageX	相当于clinetX，非IE专用
pageY	相当于clinetY，非IE专用
offsetX	返回鼠标相对于触发事件的元素的水平坐标 ★
offsetY	返回鼠标相对于触发事件的元素的垂直坐标 ★
srcElement	返回触发事件的元素(IE) target属性也表示同样的意义(标准)
toElement	仅针对于mouseover和mouseout事件有效，返回移入鼠标的元素
type	返回发生事件的类型名称，没有on的类型字符串
returnValue	属性值设为false时，可以取消发生事件的源元素的默认动作（IE）
preventDefault()	取消浏览器的默认操作（W3C）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>事件对象</title>
		<style>
			#red{
				background: red;
			}
			#txt{
				width: 600px;
				height: 200px;
				font-size: 20px;
			}
			#orange{
				background: orange;
			}
			#yellow{
				background: yellow;
			}
			#green{
				background: green;
			}
			#cyan{
				background: cyan;
			}
			#blue{
				background: blue;
			}
			#purple{
				background: purple;
			}
		</style>
	</head>
	<body>
		<!-- 事件对象获取 -->
		<div>
			<div id="red"></div>
		</div>
		<!-- 成员属性 -->
		<textarea id="txt"></textarea>
		<!-- 阻止冒泡 -->
		<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>
			// 事件对象成员属性
			// 键盘事件对象
			var txt=document.getElementById('txt');
			txt.onkeyup=function(){
				console.log(window.event);
			}
			// 阻止冒泡 cancelBubble  stopPropagation
			function show(element1){  //element接收this参数
				// cancelBubble 使用事件对象阻止冒泡（IE早期，现在浏览器都支持）
				window.event.cancelBubble=true;
				// 也可以使用stopPropagation （w3c早期，现在浏览器都支持）
				// window.event.stopPropagation();
				console.log(element1.id);
			}
		</script>
	</body>
</html>

喵了个咪蛋儿

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
web前端学习笔记27-事件对象

一、事件对象在触发事件的时候，与事件相关的信息存储对象就是事件对象，事件对象在不同的浏览器中体现方式不同。【IE及其他浏览器】事件对象就是window子对象之一，可通过window.event或者event直接访问事件对象【Firefox浏览器】事件对象是以参数的形式传入事件函数的形参当中，接收之后才可以使用事件对象的兼容性处理（函数中使用）var e=window.event?window.event:evt;var e=window.event || evr;事件对象的成员：事件对象可
复制链接

扫一扫