JavaScript函数中event参数的使用-----function(event){}

最新推荐文章于 2023-06-10 17:28:29 发布

养只狗

最新推荐文章于 2023-06-10 17:28:29 发布

阅读量7.7k

点赞数 3

分类专栏：前端复习部分文章标签： javascript event

本文链接： https://blog.csdn.net/weixin_45006204/article/details/107703063

版权

前端复习部分专栏收录该内容

13 篇文章 0 订阅

订阅专栏

什么是event？

Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。事件通常与函数结合使用，函数不会在事件发生前被执行！

看例子：
现有ul以及多个li元素，通过事件委托，给ul绑定点击事件，当我们点击某个li元素时，输出所点击li元素的相关信息。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<ul class='list'>
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
		</ul>
		<script type="text/javascript">
			var ul = document.querySelector('ul');
			//事件委托：将事件处理程序绑定在父元素上，通过冒泡原理设置每个子节点，
			//只操作了一次DOM，提高了程序的性能；
			ul.addEventListener('click',function(event) {
				var lis = document.querySelectorAll('li');
				for(var i=0; i<lis.length; i++){
					lis[i].style.backgroundColor = 'white';
				}
				event.target.style.backgroundColor = 'pink';
				console.log(event);
			})
		</script>
	</body>
</html>

假设我们点击了第一个li元素,通过console.log(event);语句，输出event参数的相关信息，如下图所示：

从图片中可以看出来，event中包含了事件触发时的参数，比如click事件的event中包含着pageX、pageY；keydown事件中包含着keyCode等
在IE浏览器中，event是全局的，需要通过window.event来获取，在其他浏览器中,event都是作为参数传入的。
考虑到浏览器兼容问题，我们应该这样获取event对象：
```
event = window.event||event;
```

当function函数中没有传入event参数时，我们应该如何在函数内部使用event呢？

如果函数本身没有传入参数：(参照最上面的例子)

<script type="text/javascript">
	var ul = document.querySelector('ul');
	ul.addEventListener('click',function() {
		var lis = document.querySelectorAll('li');
		var event = window.event || arguments[0];
		for(var i=0; i<lis.length; i++){
			lis[i].style.backgroundColor = 'white';
		}
		event.target.style.backgroundColor = 'pink';
		console.log(event);
	})
</script>

当点击第一个li元素的执行结果：

如果函数本身传入了参数，则需使用以下语句获取event：
```
 var event = window.event || arguments.callee.caller.arguments[0]
```
关于arguments、callee、caller的相关使用可以参考这篇文章
JavaScript函数中arguments、callee、caller的使用

event.target的使用

首先我们来看看target属性中都包含哪些值：（假设我们点击了第一个li元素）
可以看出target 事件属性可返回事件的目标节点（触发该事件的节点），是目标节点的属性集合。
什么时候使用target属性呢？
如文章最开始的例子，当我们使用事件委托，给ul绑定点击事件，当我们点击某个li元素时，需要输出所点击li元素的相关信息，这时就可以使用target来获取被点击元素的相关信息。
假设我点击了第二个li元素：
1、我们使用console.log(event.target);语句，看看发生了什么：
此时，在控制台中输出了触发点击事件的节点（第二个li元素）
2、使用console.log(evetn.target.innerHTML);