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，而是将其作为bind的参数，在这种情况下无论如何都是无用的，因为您要绑定到全局上下文并且函数不包含关键字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);
}

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