前端知识点---事件监听器里面的e.target跟this的区别,e.target在事件委托中的好处

文章目录

✅ 相同点
✅ 不同点
✅ 总结区别
e.target与事件委托之间的关系

在事件监听器中，e.target 和 this 有时是一样的，但它们并不完全相同。

✅ 相同点

当事件直接绑定到元素时：
e.target 和 this 通常指向相同的元素，即事件绑定的元素。

<button id="btn">点击我</button><script>
document.getElementById('btn').addEventListener('click', function(e) {console.log(this);       // 指向 #btnconsole.log(e.target);   // 指向 #btn
});
</script>

解释：

this 指向的是事件绑定的元素。

e.target 指向的是实际触发事件的元素。

在这种情况下，它们相同。

✅ 不同点

当事件发生在子元素或有事件冒泡时：

this 依然指向绑定事件的元素。

e.target 指向的是事件实际发生的元素。

<div id="container"><button>按钮1</button><button>按钮2</button>
</div><script>
document.getElementById('container').addEventListener('click', function(e) {console.log('this:', this);       // 永远指向 #containerconsole.log('e.target:', e.target); // 指向实际点击的按钮
});
</script>

解释：

this 指向事件绑定的 #container。

e.target 指向你实际点击的那个。

✅ 总结区别

对比项

对比项	this	e.target
指向对象	事件绑定的元素	实际触发事件的元素
事件冒泡时	不变，始终指向绑定事件的元素	指向事件发生的元素
作用场景	简单事件处理，直接操作绑定元素	需要判断点击来源或处理子元素事件
常用场景	表单验证、按钮点击事件等	委托事件、处理嵌套结构点击等

✅ 总结一句话
this：始终指向绑定事件的元素。

e.target与事件委托之间的关系

e.target：指向事件真正触发的元素，在事件委托时非常有用。
e.target 和事件委托之间有密切的关系，因为事件委托依赖于 e.target 来处理事件。

事件委托：
- 事件委托是一种通过将事件监听器添加到父元素，而不是直接在子元素上绑定事件监听器的技术。它的关键思想是通过利用 e.target 来判断实际触发事件的目标元素。
事件委托的工作原理：
将事件监听器绑定到父元素上。
- 在事件触发时，使用 e.target 来检查具体是哪个子元素触发了事件。
- 根据 e.target 的值来执行相应的操作。

通过这种方式，你可以避免为每个子元素单独绑定事件监听器，从而提升性能，尤其是在有大量子元素的情况下。

事件委托的优点：
- 减少事件监听器：将一个事件监听器放在父元素上，而不是每个子元素上，减少了内存的消耗。
- 动态添加元素：即使子元素在事件绑定后动态添加到 DOM 中，事件委托仍然有效，因为事件监听器是绑定到父元素上的。

例子：事件委托
假设我们有一个列表，想要监听所有列表项的点击事件：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>ul{height: 300px;width: 300px;border: 1px solid black;}</style>
</head>
<body></body>
</html>
<script>(() => {var ul = document.createElement('ul');  // 创建一个 <ul> 元素document.body.appendChild(ul);  // 把 <ul> 元素添加到页面中ul.addEventListener('click', e => {var li = document.createElement('li');  // 创建一个新的 <li> 元素li.innerHTML = '你好';  // 设置 <li> 的内容ul.appendChild(li);  // 把 <li> 元素添加到 <ul> 中console.log(e.target);  // 输出点击事件的目标元素if(e.target.tagName="LI"){console.log('点击了'+e.target.innerText);}});})();
</script>