先看图
MouseEvent {isTrusted: true, screenX: 39, screenY: 156, clientX: 39, clientY: 55, …}
altKey: false
bubbles: true
button: 0
buttons: 0
cancelBubble: false
cancelable: true
clientX: 39 //鼠标x坐标
clientY: 55 //鼠标的y坐标
composed: true
ctrlKey: false
currentTarget: null
defaultPrevented: false
detail: 1
eventPhase: 0
fromElement: null
isTrusted: true
layerX: 39
layerY: 55
metaKey: false
movementX: 0
movementY: 0
offsetX: 31
offsetY: 47
pageX: 39
pageY: 55
path: (5) [div, body, html, document, Window]
relatedTarget: null
returnValue: true
screenX: 39
screenY: 156
shiftKey: false
sourceCapabilities: InputDeviceCapabilities {firesTouchEvents: false}
srcElement: div //也是返回触发事件的对象,只兼容i6-i8.
//--------------------------------------------------------------------------------
target: div //返回触发事件的对象
//--------------------------------------------------------------------------------
timeStamp: 4920.250000000124
toElement: div
type: "click" //返回事件的类型
view: Window {parent: Window, opener: null, top: Window, length: 0, frames: Window, …}
which: 1
x: 39
y: 55
__proto__: MouseEvent
这是输出事件对象的鼠标事件结果
注意看代码中的target :div
它和this起了很大的争议,因为很多时候他们的作用似乎一样。
var div = document.querySelector('div');
div.addEventListener('click', function(e) {
console.log(e.target);
console.log(this);
})
在这段代码里,他们的输出结果,都是div
<div>123</div>
<div>123</div>
输出了两个div。
---------------------------------------------------------------------------------------------------------------------------------
-
this 是事件绑定的元素(绑定这个事件处理函数的元素) 。
-
e.target 是事件触发的元素。
通常情况下terget 和 this是一致的,
但有一种情况不同,那就是在事件冒泡时(父子元素有相同事件,单击子元素,父元素的事件处理函数也会被触发执行),
这时候this指向的是父元素,因为它是绑定事件的元素对象,
而target指向的是子元素,因为他是触发事件的那个具体元素对象。
具体如代码所示
<ul>
<li>abc</li>
<li>abc</li>
<li>abc</li>
</ul>
var ul = document.querySelector('ul');
ul.addEventListener('click', function(e) {
// 我们给ul 绑定了事件 那么this 就指向ul
console.log(this); //<ul>...</ul>
// e.target 指向我们点击的那个对象 ,谁触发了这个冒泡事件
//我们点击的是li 那么e.target 指向的就是li
console.log(e.target); //<li>abc</li>
//如果我的鼠标点击的是里外面的ul盒子,这里输出的结果就是<ul>...</ul>
//这里输出的结果是看我们的鼠标点哪里
})