javascript事件对象event的属性和方法

乐之者java

于 2020-05-26 10:05:21 发布

阅读量978

点赞数

分类专栏：前端文章标签： js

本文链接：https://blog.csdn.net/xiaozhuangyumaotao/article/details/106348849

版权

前端专栏收录该内容

175 篇文章 2 订阅

订阅专栏

event对象是事件源触发事件后传递给事件处理程序的对象，位于事件处理函数参数的第一个位置，携带着很多有用的信息。

属性	描述
type	返回事件类型的字符串
target/srcElement(ie)	返回触发事件的dom元素
currentTarget	返回绑定事件的dom元素，等同于this
relatedTarget/fromElement(ie)	返回鼠标移入移出时临近绑定事件元素的那个dom元素
data	传递给事件的额外数据。格式：数字，字符串，数组，obj
pageX/pageY	相对于页面原点(document)的水平/垂直位置
screenX/screenY	相对于显示器屏幕的水平/垂直位置
clientX/clientY	相对于页面视口(可见窗口)的水平/垂直位置
timeStamp	触发事件的时间戳
button	左中右键(012)
which	获取鼠标点击事件或键盘事件对应的左中右键(123)或键盘码
keyCode	键盘事件的键盘码
crtlKey/shiftKey/altKey
方法	描述
stopPropagation()	阻止冒泡
prevetDefault()	阻止网页默认行为：超链接调转、submit的提交，文本输入

测试程序：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
	#second{
		background:red;
		width:200px;
		height:200px;
	}
</style>

</head>

<body >
	<div id="second">
	</div>
	<p id="cp">我是段落的内容</p>
</body>
<script>
document.onmousedown=doSth;
document.getElementById("cp").onclick=doSthP;
function doSthP(e){
	e=e?e:window.event;//ie中的事件无法传递，event在ie中被视为window的属性，会做相应的填充
	var targ=e.target?e.target:e.srcElement;//ie获取触发事件的源头srcElement和别人的target不一样
	console.log("触发事件的target："+targ);
}
document.getElementById("second").onmousedown=function(){
		console.log(this);//传统模式下获取触发事件的事件源，与target区别：target更具体，
		//比如document的时候：this指的是document，target可能是body或者其内部的div
	}
function doSth(e){
			var thee=e?e:window.event;
			var targ=thee.target?thee.target:thee.srcElement;
			var oldEle=thee.relatedTarget?thee.relatedTarget:thee.fromElement;//ie获取源头的方法也不一样
			console.log(targ+"   "+oldEle);
		}	
</script>
</html>

大家点击一下，比较一下结果结合程序的注释，相信能够理解。