Javascript addEventListener中“this”的意外值

作为侦听器附加到不同元素的回调中对此的引用意外更改

单击三个内部div中的一个，它会正确地指向它们，但是当第一次单击容器时，引用会被粘在上面。 我错过什么了吗

函数回调{ this.innerHTML+=+e.type+'on'+e.target.nodeName++e.target.id； console.logthis； e、 停止传播； } document.queryselectoral'div'.forEachfunctiondiv，i{ div.addEventListener'click'，回调，false； }; 容器{边框：1px实心ddd；填充：10px；背景：fcfc；} 容器分区{宽度：200px；最小高度：50px；边框：1px实心ccf；边距：5px；填充：10px；背景：eef；} 我是集装箱。 一 二 三

---

如果您单击容器，您将覆盖其内容，包括子div及其事件处理程序。不要为此使用.innerHTML。改用

函数回调{ this.insertAdjacentHTML'beforeed'，+e.type+'on'+e.target.nodeName++e.target.id； console.logthis； e、 停止传播； } document.queryselectoral'div'.forEachfunctiondiv，i{ div.addEventListener'click'，回调，false； }; 容器{边框：1px实心ddd；填充：10px；背景：fcfc；} 容器分区{宽度：200px；最小高度：50px；边框：1px实心ccf；边距：5px；填充：10px；背景：eef；} 我是集装箱。 一 二 三

---

如果您单击容器，您将覆盖其内容，包括子div及其事件处理程序。不要为此使用.innerHTML。改用

函数回调{ this.insertAdjacentHTML'beforeed'，+e.type+'on'+e.target.nodeName++e.target.id； console.logthis； e、 停止传播； } document.queryselectoral'div'.forEachfunctiondiv，i{ div.addEventListener'click'，回调，false； }; 容器{边框：1px实心ddd；填充：10px；背景：fcfc；} 容器分区{宽度：200px；最小高度：50px；边框：1px实心ccf；边距：5px；填充：10px；背景：eef；} 我是集装箱。 一 二 三

---

您可以使用element.append而不是element.innerHTML来解决问题。因为innerHTML将删除所有子节点，然后创建新的实例子节点，所以所有事件侦听器都将被删除

函数回调{ 在${e.target.nodeName}${e.target.id}上追加`${e.type}` console.logthis； e、 停止传播； } document.queryselectoral'div'.forEachfunctiondiv，i{ div.addEventListener'click'，回调，false； }; 容器{边框：1px实心ddd；填充：10px；背景：fcfc；} 容器分区{宽度：200px；最小高度：50px；边框：1px实心ccf；边距：5px；填充：10px；背景：eef；} 我是集装箱。 一 二 三

---

您可以使用element.append而不是element.innerHTML来解决问题。因为innerHTML将删除所有子节点，然后创建新的实例子节点，所以所有事件侦听器都将被删除

函数回调{ 在${e.target.nodeName}${e.target.id}上追加`${e.type}` console.logthis； e、 停止传播； } document.queryselectoral'div'.forEachfunctiondiv，i{ div.addEventListener'click'，回调，false； }; 容器{边框：1px实心ddd；填充：10px；背景：fcfc；} 容器分区{宽度：200px；最小高度：50px；边框：1px实心ccf；边距：5px；填充：10px；背景：eef；} 我是集装箱。 一 二 三

---

谢谢，我要把头撞到墙上。谢谢，我要把头撞到墙上。谢谢，我要把头撞到墙上。谢谢，我要把头撞到墙上。