Event.currentTarget、Event.target 和 MouseEvent.relatedTarget

• currentTarget 和 target
  • currentTarget 和 target 属于事件对象(Event)的实例属性
  • Event.currentTatget 是事件当前正在通过的节点。随着事件的传播，这个属性的值会变。e.currentTarget总是等同于监听函数内部的this
  • Event.target 事件的原始触发节点。这个属性不会随着事件的传播而改变。
• MouseEvent.relatedTarget
  • MouseEvent.relatedTarget 属于鼠标事件对象(MouseEvent)的实例属性。
  • MouseEvent接口继承了Event接口，所以拥有Event的所有属性和方法。它还有自己的属性和方法。
  • MouseEvent.relatedTarget属性返回事件的相关节点。

Event.currentTatget 和 Event.target

<div id="parent" style="background-color:khaki; width: 100px;height: 100px;overflow: hidden;">
        <p id="son" style="height: 50px;width: 50px;background-color:lawngreen;margin:25px;">点击我</p>
    </div>
    <script>
        var parent = document.getElementById('parent');

        parent.addEventListener('click', function(event){
            console.log(event.target.id); // parent
            console.log(event.currentTarget.id); // son
            console.log(this === event.currentTarget); //true
        });
    </script>

MouseEvent.relatedTarget

事件名称	target 属性	relateTarget
focusin	接受焦点的节点	丧失焦点的节点
focusout	丧失焦点的节点	接受焦点的节点
mouseenter	将要进入的节点	将要离开的节点
mouseleave	将要离开的节点	将要进入的节点
mouseout	将要离开的节点	将要进入的节点
mouseover	将要进入的节点	将要离开的节点
dragenter	将要进入的节点	将要离开的节点
dragexit	将要离开的节点	将要进入的节点

<div id="outer" style="height:50px;width:50px;border:1px solid black;">
    <div id="inner" style="height:25px;width:25px;border:1px solid black;"></div>
</div>
  
<script>
	var inner = document.getElementById('inner');
	inner.addEventListener('mouseover', function (event) {
	  console.log('进入' + event.target.id + ' 离开' + event.relatedTarget.id);
	}, false);
	inner.addEventListener('mouseenter', function (event) {
	  console.log('进入' + event.target.id + ' 离开' + event.relatedTarget.id);
	});
	inner.addEventListener('mouseout', function () {
	  console.log('离开' + event.target.id + ' 进入' + event.relatedTarget.id);
	});
	inner.addEventListener("mouseleave", function (){
	  console.log('离开' + event.target.id + ' 进入' + event.relatedTarget.id);
	});
</script>