javascript - 普通 Javascript 解除绑定(bind)文档事件

Question

这个问题已经有答案了:

How can I remove a JavaScript event listener? (10 个回答)

已关闭 3 年前。

我在事件监听器和解除绑定(bind)方面遇到困难。我有以下代码:

function delegate(el, evt, sel, handler) {
    el.addEventListener(evt, function(event) {
        var t = event.target;
        while (t && t !== this) {
            if (t.matches(sel)) {
                handler.call(t, event);
            }
            t = t.parentNode;
        }
    });
}

我像这样应用这个函数:

function captureMouseDown() {
    console.log('mouse downed');
}

delegate(document, 'mousedown', '.js-flex', captureMouseDown);

如何取消文档和/或选择器 js-flex 上的事件

Answer 1

一种选择是让 delegate 返回传递给 addEventListener 的函数，然后您可以用它调用 removeEventListener:

function delegate(el, evt, sel, handler) {
    const listener = function(event) {
        var t = event.target;
        while (t && t !== this) {
            if (t.matches(sel)) {
                handler.call(t, event);
            }
            t = t.parentNode;
        }
    };
    el.addEventListener(evt, listener);
    return listener;
}

const listener = delegate(document, 'mousedown', '.js-flex', captureMouseDown);
// ...
document.removeEventListener('mousedown', listener);