DOM系列之事件对象

---

1、什么是事件对象

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

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

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

比如：

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

2、事件对象的使用语法

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

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

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

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

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

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

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

解决：

e = e || window.event;

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

<div>123</div>
<script>
	var div = document.querySelector("div");
	div.onclick = function (e) {
      
      
		// 事件对象
		e = e || window.event;
		console.log(e);
	};
</script>

4、e.target 和 this 的区别

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

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

<div>123</div>
<script>
	var div = document.querySelector("div");
	div.addEventListener("click", function (e) {
      
      
		// e.target 和 this指向的都是div
		console.log(e.target);
		console.log(this);
	});
</script>

事件冒泡下的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>

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

---

后记

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