---

1、什么是事件对象

eventTarget.onclick = function (event) {};
eventTarget.addEventListener("click", function (event) {}); // 这个 event 就是事件对象，我们还喜欢的写成 e 或者 evt
1
2

官方解释：event 对象代表事件的状态，比如键盘按键的状态、鼠标的位置、鼠标按钮的状态。

事件发生后，跟事件相关的一系列信息数据的集合都放到这个对象里面，这个对象就是事件对象event，它有很多属性和方法。

比如：

1. 谁绑定了这个事件。
2. 鼠标触发事件的话，会得到鼠标的相关信息，如鼠标位置。
3. 键盘触发事件的话，会得到键盘的相关信息，如按了哪个键。

2、事件对象的使用语法

事件触发发生时就会产生事件对象，并且系统会以实参的形式传给事件处理函数。

所以，在事件处理函数中声明1个形参用来接收事件对象。

eventTarget.onclick = function (event) {
	// 这个 event 就是事件对象，我们还喜欢的写成 e 或者 evt
};
eventTarget.addEventListener("click", function (event) {
	// 这个 event 就是事件对象，我们还喜欢的写成 e 或者 evt
});
1
2
3
4
5
6

这个 event 是个形参，系统帮我们设定为事件对象，不需要传递实参过去。
当我们注册事件时， event 对象就会被系统自动创建，并依次传递给事件监听器（事件处理函数）。

3、事件对象的兼容性处理

事件对象本身的获取存在兼容问题：

1. 标准浏览器中是浏览器给方法传递的参数，只需要定义形参 e 就可以获取到。
2. 在 IE6~8 中，浏览器不会给方法传递参数，如果需要的话，需要到 window.event 中获取查找。

解决：

e = e || window.event;

只要“||”前面为 false, 不管“||”后面是 true 还是 false，都返回 “||” 后面的值。
只要“||”前面为 true, 不管“||”后面是 true 还是 false，都返回 “||” 前面的值。

<div>123div>
<script>
	var div = document.querySelector("div");
	div.onclick = function (e) {
		// 事件对象
		e = e || window.event;
		console.log(e);
	};
script>
1
2
3
4
5
6
7
8
9

4、e.target 和 this 的区别

• this 是事件绑定的元素， 这个函数的调用者(绑定这个事件的元素)
• e.target 是事件触发的元素。

常情况下terget 和 this是一致的，
但有一种情况不同，那就是在事件冒泡时（父子元素有相同事件，单击子元素，父元素的事件处理函数也会被触发执行），
这时候this指向的是父元素，因为它是绑定事件的元素对象，
而target指向的是子元素，因为他是触发事件的那个具体元素对象。

<div>123div>
<script>
	var div = document.querySelector("div");
	div.addEventListener("click", function (e) {
		// e.target 和 this指向的都是div
		console.log(e.target);
		console.log(this);
	});
script>
1
2
3
4
5
6
7
8
9

事件冒泡下的e.target和this

<ul>
	<li>abc</li>
	<li>abc</li>
	<li>abc</li>
</ul>
<script>
	var ul = document.querySelector("ul");
	ul.addEventListener("click", function (e) {
		// 我们给ul 绑定了事件  那么this 就指向ul
		console.log(this); // u
		// e.target 触发了事件的对象 我们点击的是li e.target 指向的就是li
		console.log(e.target); // li
	});
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

5、事件对象的常见属性和方法

6、鼠标事件对象

event对象代表事件的状态，跟事件相关的一系列信息的集合。现阶段我们主要是用鼠标事件对象MouseEvent 和键盘事件对象 KeyboardEvent。

7、键盘事件对象

注意：onkeydown 和 onkeyup 不区分字母大小写，onkeypress 区分字母大小写。
在我们实际开发中，我们更多的使用 keydown 和 keyup，它能识别所有的键（包括功能键） Keypress 不识别功能键，但是 keyCode 属性能区分大小写，返回不同的ASCII值

7.1、ASCII表

7.2、示例

<script>
	// 键盘事件对象中的keyCode属性可以得到相应键的ASCII码值
	document.addEventListener("keyup", function (e) {
		console.log("up:" + e.keyCode);
		// 我们可以利用keycode返回的ASCII码值来判断用户按下了那个键
		if (e.keyCode === 65) {
			alert("您按下的a键");
		} else {
			alert("您没有按下a键");
		}
	});
	document.addEventListener("keypress", function (e) {
		// console.log(e);
		console.log("press:" + e.keyCode);
	});
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

---

后记

如果你感觉文章不咋地//(ㄒoㄒ)//，就在评论处留言，作者继续改进；o_O???
如果你觉得该文章有一点点用处，可以给作者点个赞；\\*^o^*//
如果你想要和作者一起进步，可以微信扫描二维码，关注前端老L；~~~///(^v^)\\\~~~
谢谢各位读者们啦(^_^)∠※！！！