前言:
Event
对象代表事件的状态,比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。
事件发生后,跟事件相关的一系列信息数据的集合都放到这个对象里面,这个对象就是事件对象event
,它有很多属性和方法。
比如:
- 谁绑定了这个事件。
- 鼠标触发事件的话,会得到鼠标的相关信息,如鼠标位置。
- 键盘触发事件的话,会得到键盘的相关信息,如按了哪个键。
其中事件对象属性e.target
,它和this
的指向有所不同。
案例:
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 100px;
height: 100px;
background-color: red;
}
span {
display: block;
width: 50px;
height: 50px;
background-color: yellow;
}
</style>
</head>
<body>
<div>div
<span>span</span>
</div>
<script>
var div = document.querySelector('div');
div.addEventListener('click', function(e) {
console.log(this); // 给div绑定了事件,那么this就指向div
console.log(e.target); // e.target指向点击的那个对象
})
</script>
</body>
</html>
预览:
实现结果:
点击div:
this
返回div
标签,e.target
返回div
标签
点击span:
this
返回div
标签,e.target
返回span
标签
分析:
- 因为
div
绑定了点击事件,那么this
返回的都是div
; - 点击
div
,e.target
返回div
;点击span
,e.target
返回span
。
总结:
this
返回的是绑定事件的对象(元素);e.target
返回的是触发事件的对象(元素)。- 简单来说:
this
:哪个元素绑定了这个点击事件,就返回哪个元素;
e.target
:点击了哪个元素,就返回哪个元素。