javascript - 获取触发事件的元素(节点)

Question

是否有可能找到正在监听触发当前函数的事件的元素？

在下面的代码中，event.target 返回 #xScrollPane 和 event.currentTarget 和 event 的最低子节点.fromElement 均为空。有没有其他方法可以在不对它进行硬编码的情况下检索对 #xScrollPane 的 DOM 引用？

//convert vertical scroll wheel to horizontal scroll wheel:
function scrollWheelX(event) {
    if (event.deltaY == 0) return
    event.target.scroll(event.target.scrollLeft + event.deltaY * 5, event.target.scrollTop)
    event.preventDefault()
}
document.getElementById('xScrollPane').addEventListener('wheel', scrollWheelX)

Answer 1

编辑:在事件处理程序中，this 对象指的是事件处理程序添加到的元素。

在 this 未引用所需元素或对象的情况下，您可以将该元素绑定(bind)到 this 对象中。请注意，如果您需要使用 removeEventListener，则必须将绑定(bind)函数传递给它，而不仅仅是原始函数。

即使在这种情况下没有必要进行绑定(bind)的示例:

function scrollWheelX(event) {
    if(event.deltaY == 0) {
        return;
    }

    this.scroll(this.scrollLeft + event.deltaY * 5, this.scrollTop);
    event.preventDefault();
}

const scrollingElement = document.getElementById("scrollElement");
scrollingElement.addEventListener("wheel", scrollWheelX.bind(scrollingElement));