事件对象

最新推荐文章于 2022-08-05 11:05:02 发布

丨Q ，Q丨

最新推荐文章于 2022-08-05 11:05:02 发布

阅读量525

点赞数

分类专栏： JS

本文链接：https://blog.youkuaiyun.com/qq2071114140/article/details/108114936

版权

JS 专栏收录该内容

40 篇文章

订阅专栏

文章目录

事件对象

事件对象

1. 简介

如果给一个元素对象的某事件（例如，onclick）绑定了一个响应函数（回调函数），当这个事件触发时，浏览器就会调用这个函数。

除此之外，浏览器会创建一个对象，用来描述这个发生的事件。例如，事件发生时鼠标的位置。

2. 获取事件对象

事件响应函数的参数（IE8及以下版本不支持）

事件触发时，浏览器会创建一个事件对象，并调用事件响应函数，同时会将事件对象当作参数传递给回调函数。

因此可以通过两种方式进行获取：

通过arguments获取参数。
函数声明时，声明形参用于接收。

注：这两种方法没有本质区别。JS函数可以没有形参，但是调用时可以传递实参，这时可以通过arguments获取；如果函数声明了形参，函数调用时，实参的值会赋值给形参，同时arguments也可以获取到。

		<script type="text/javascript">
			window.onload = function(){
				var btn = document.getElementById("btn");
				btn.onclick = function(event){
					console.log(event);//通过形参获取
					console.log(arguments[0]);//通过arguments获取
				};
			};
		</script>


	<body>
		<button id="btn">按钮</button>
	</body>

在这里插入图片描述

window.event（IE8及以下版本）

IE8及以下版本不是通过函数传递的方式将事件对象传递给回调函数，而是通过给window.event赋值。

在回调函数中，通过window.event即可访问该对象。

为了兼容IE8（现在基本上已经不需要兼容IE8了），可以有以下写法：

fucntion(event){
	event = event || window.event;

	...
}

3. 事件对象的属性

就拿上面的按钮的onclick事件举例，浏览器会创建一个MouseEvent鼠标事件对象，具体内容如下：

事件的属性举例

在这里插入图片描述

事件的方法举例（记录在事件对象的原型对象`proto`中）举例

在这里插入图片描述

关于属性的具体含义和方法的用法，可以查阅w3school文档和菜鸟教程

取消默认动作：`cancelable`属性和`preventDefault()`方法

cancelable属性是一个布尔值，表示是否可以取消与事件对象关联的默认动作（例如<a/>的onclick事件的默认动作是跳转）。

preventDefault()方法可以阻止与事件象关联的默认动作（cancelable为true的情况下）

			window.onload = function(){
				var a = document.getElementById("a");
				a.onclick = function(event){
					event.preventDefault();
				};
			};

顺便一提：取消默认动作的另一种方法，`return false`

想要取消事件象关联的默认动作，只需要给事件响应对象添加返回值false即可取消默认动作。

			window.onload = function(){
				var a = document.getElementById("a");
				a.onclick = function(event){
					return false;
				};
			};

事件对象

文章目录

事件对象

1. 简介

2. 获取事件对象

事件响应函数的参数（IE8及以下版本不支持）

window.event（IE8及以下版本）

3. 事件对象的属性

事件的属性举例

事件的方法举例（记录在事件对象的原型对象__proto__中）举例

取消默认动作：cancelable属性和preventDefault()方法

顺便一提：取消默认动作的另一种方法，return false

事件的方法举例（记录在事件对象的原型对象`proto`中）举例

取消默认动作：`cancelable`属性和`preventDefault()`方法

顺便一提：取消默认动作的另一种方法，`return false`