Event.target意外成为绑定事件监听函数中的文档

Question

我想知道用户是否在购买衣服之前选择了尺码，
所以我将事件侦听器附加到它的父容器，即选择区域。

Product card with selector tiles

Selection Area HTML Markup

如果我将绑定函数作为参数传递给事件侦听器，
event.target 成为单击时的文档对象。

if(selectionArea) {
  selectionArea.addEventListener("click", removeWarningStyles.bind(null, event, sizeTiles,warning));
}

删除警告样式方法：

function removeWarningStyles( event, sizeTiles, warning) {

    if(event.target.matches(".size-tile")) { // This becomes the document object. Why?
        for(let tile of  sizeTiles) {
            if(tile.classList.contains("size-tile--not-properly-chosen")) {
                tile.classList.toggle("size-tile--not-properly-chosen");

            }
        }
        warning.style.visibility = "hidden";
        warning.style.opacity = "0";
    }
}

我什至尝试绑定 event.target 和 event.currentTarget，但它仍然不起作用。

如果我将匿名函数直接写入处理程序，
它可以完美运行。但为什么？

if(selectionArea) {
   selectionArea.addEventListener("click", (event) => {

      if(event.target.classList.contains("size-tile")) { //becomes size-tile element correctly

        for(let tile of  sizeTiles) {
            if(tile.classList.contains("size-tile--not-properly-chosen")) {
               tile.classList.toggle("size-tile--not-properly-chosen");

           }
        }
        warning.style.visibility = "hidden";
        warning.style.opacity = "0";
     }
 });
}

Answer 1

您传递的 event 不是作为事件对象传递给您的 eventListener，而是作为绑定的参数，无论如何在这种情况下都是无用的，因为您正在绑定到全局上下文和您的函数不包含关键字 this.

selectionArea.addEventListener("click", removeWarningStyles.bind(null, event, sizeTiles,warning));

应该是

selectionArea.addEventListener('click', e=>{
  removeWarningStyles(e, sizeTiles, warning);
});

其实我很喜欢

selectionArea.onclick = e=>{
  removeWarningStyles(e, sizeTiles, warning);
}

因为删除或覆盖事件更容易。

PS

请记住，仅事件对象作为参数传递给 eventListener 函数，this 上下文一个 eventListener 函数是方法所属的对象，像往常一样，在这种情况下是元素。您还应该知道，在 eventListening 函数中调用另一个函数时，其 this 上下文不会绑定到元素。箭头函数的工作方式当然不同，因为它们的 this 上升了一个范围级别，它停留在该级别，因此绑定对它们毫无意义。换句话说，您不能在箭头函数中使用 this.value 或 this.style.color，就像在作为 eventListener 的普通函数中一样。

Event.target意外成为绑定事件监听函数中的文档

Event.target unexpectedly becomes the document in bound event listener function

html

javascript

events

dom

scope