DOM事件中target
和currentTarget
的概念:
target
和currentTarget
都是事件对象中的属性target
是指获取事件的目标,是触发事件的真实元素currentTarget
是指其事件处理程序当前正在处理事件的那个元素,是事件绑定的元素
DOM事件中this
和currentTarget
的关系:
- 在事件处理程序内部,对象
this
始终等于currentTarget
的值。
DOM事件中target
和currentTarget
的关系:
- 相等:当事件处理程序直接绑定在目标元素上,目标元素触发事件时,
e.target === e.currentTarget
,e.target ===this
- 不相等:当事件处理程序绑定在目标元素的父节点上,目标元素触发事件时,
e.currentTarget
会指向绑定事件的父元素,而e.target
则指向触发事件的目标元素。
验证:
<body>
<ul id="box" style="border: 1px solid red">
<li id="apple">苹果</li>
<li id="banana">香蕉</li>
<li id="peach">桃子</li>
</ul>
</body>
<script type="text/javascript">
var box = document.getElementById('box');
var apple = document.getElementById('apple');
<script>
- 场景1: 事件绑定在子元素
<script type="text/javascript">
/* 场景1: 事件绑定在子元素*/
//直接绑定在目标元素apple上(如果点击apple这个li时)
apple.onclick = function (e){
console.log('e.target:', e.target); // <li id="apple">苹果</li>
console.log('e.currentTarget:', e.currentTarget); // <li id="apple">苹果</li>
console.log('this:',this); // <li id="apple">苹果</li>
console.log(e.currentTarget===this); // true
console.log(e.target === e.currentTarget); // true
console.log(e.target === this); // true
}
- 场景2: 事件绑定在父元素
//绑定在父元素box上(如果点击apple这个li时)
box.onclick = function (e){
console.log('e.target:', e.target); // <li id="apple">苹果</li>
console.log('e.currentTarget:', e.currentTarget); // <ul id="box">...</ul>
console.log('this:',this); // <ul id="box">...</ul>
console.log(e.currentTarget===this); // true
console.log(e.target === e.currentTarget); // false
console.log(e.target === this); // false
}
</script>