JavaScript 中 e.target 和 this 的区别:
1、this 是事件绑定的元素, 这个函数的调用者(绑定这个事件的元素);
2、e.target 是事件触发的元素;
3、this:哪个元素绑定了这个点击事件,就返回哪个元素;e.target:点击了哪个元素,就返回哪个元素(操作某特定元素触发的改事件,那么返回这个特定元素)。
注意:通常情况下 terget 和 this 是一致的,但在事件冒泡时(父子元素有相同事件,单击子元素,父元素的事件处理函数也会被触发执行),this指向的是父元素,因为它是绑定事件的元素对象,而target指向的是子元素,因为他是触发事件的那个具体元素对象。
通常情况下的 e.target 和 this :
<div>123</div>
<script>
var div = document.querySelector('div');
div.addEventListener('click', function(e) {
// e.target 和 this指向的都是div
console.log(e.target);
console.log(this);
});
</script>
事件冒泡下的 e.target 和 this :
<ul>
<li>abc</li>
<li>abc</li>
<li>abc</li>
</ul>
<script>
var ul = document.querySelector('ul');
ul.addEventListener('click', function(e) {
// 给 ul 绑定了事件 this 就指向 ul
console.log(this); // ul
// e.target 触发了事件的对象 点击的是 li e.target 指向的就是 li
console.log(e.target); // li
});
</script>