欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

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

程序员文章站 2022-05-10 15:33:48
...

一、事件对象

在触发事件的时候，与事件相关的信息存储对象就是事件对象，事件对象在不同的浏览器中体现方式不同。
【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>
相关标签： web前端学习 javascript js html5

上一篇： 安装完 opencv-python 在 pycharm 中无提示

下一篇： 归并排序java示例

推荐阅读