完美的解决方案是使用闭包，像这样:

function makeSizer(size) { return function () { document.body.style.fontSize = `${size}px`; }; } //pass parameters here and keep the reference in variables: const size12 = makeSizer(12); const size24 = makeSizer(24); const size36 = makeSizer(36); document.getElementById('size-12').addEventListener("click", size12); document.getElementById('size-24').addEventListener("click", size24); document.getElementById('size-36').addEventListener("click", size36); document.getElementById('remove-12').addEventListener("click", ()=>{ document.getElementById('size-12').removeEventListener("click", size12); alert("Now click on 'size 12' button and you will see that there is no event listener any more"); }); test<br/> <button id="size-12"> size 12 </button> <button id="size-24"> size 24 </button> <button id="size-36"> size 36 </button> <button id="remove-12"> remove 12 </button>

因此，基本上你将一个函数包装在另一个函数中，并将其分配给一个变量，你可以注册为事件侦听器，但也可以取消注册!

其他替代方法，可能没有bind的使用那么优雅，但它对于循环中的事件是有效的

for (var key in catalog){
    document.getElementById(key).my_id = key
    document.getElementById(key).addEventListener('click', function(e) {
        editorContent.loadCatalogEntry(e.srcElement.my_id)
    }, false);
}

它已经测试了谷歌chrome扩展和可能e.srcElement必须替换为e.srcElement在其他浏览器

我发现这个解决方案使用Imatoria发布的评论，但我不能标记为有用的，因为我没有足够的声誉:D

一个简单的方法就是这样

    window.addEventListener('click', (e) => functionHandler(e, ...args));

对我有用。

    var EV = {
        ev: '',
        fn: '',
        elem: '',
        add: function () {
            this.elem.addEventListener(this.ev, this.fn, false);
        }
    };

    function cons() {
        console.log('some what');
    }

    EV.ev = 'click';
    EV.fn = cons;
    EV.elem = document.getElementById('body');
    EV.add();

//If you want to add one more listener for load event then simply add this two lines of code:

    EV.ev = 'load';
    EV.add();

如果以后想要删除事件侦听器，那么创建对curry函数的引用是一个不错的选择。

在下面的代码中，我将说明我的意思。

// This is the curry function. We return a new function with the signature of what the click-listener expects
const handleClick = (foo, bar) => (clickEvent) => {
  console.log('we get our custom input', foo, bar);
  console.log('we get the click event too', clickEvent);
}

// We need to store a reference to the listener, making sure we are removing the correct reference later
const myListener = handleClick('foo', 'bar'); // Remember that we now return the actual event-handler


const btn = document.getElementById('btn'); // find the element to attach the listener to
btn.addEventListener('click', myListener);

// remove the event listener like this by using our reference
btn.removeEventListener('click', myListener);

下面是CodePen上的一个工作示例

完美的解决方案是使用闭包，像这样:

function makeSizer(size) { return function () { document.body.style.fontSize = `${size}px`; }; } //pass parameters here and keep the reference in variables: const size12 = makeSizer(12); const size24 = makeSizer(24); const size36 = makeSizer(36); document.getElementById('size-12').addEventListener("click", size12); document.getElementById('size-24').addEventListener("click", size24); document.getElementById('size-36').addEventListener("click", size36); document.getElementById('remove-12').addEventListener("click", ()=>{ document.getElementById('size-12').removeEventListener("click", size12); alert("Now click on 'size 12' button and you will see that there is no event listener any more"); }); test<br/> <button id="size-12"> size 12 </button> <button id="size-24"> size 24 </button> <button id="size-36"> size 36 </button> <button id="remove-12"> remove 12 </button>

因此，基本上你将一个函数包装在另一个函数中，并将其分配给一个变量，你可以注册为事件侦听器，但也可以取消注册!