事件对象里的e.targrt和this的区别

先看图

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>
//这里输出的结果是看我们的鼠标点哪里

            })