javascript - 具有多个参数和 e.target 的事件处理程序

Question

我刚刚发现可以通过 addEventListener 绑定(bind)多个参数，这真的很酷。

这link通过 addEventListener 解释了一些关于多个参数的信息。

我的问题是我无法让“e.target.id”像往常一样工作？

样本 here

CSS

#element{
    width: 50px;
    height: 50px;
    background-color: red;
}

HTML

<div id="element">

</div>

Javascript

document.querySelector("#element").addEventListener('click', toggleMenu.bind(null, "e", "param2"), false);
function toggleMenu(e, param2) {
    alert(e);
    alert(param2);

    alert(e.target.id);
}

通常我会通过做一些类似的事情来获得 id

document.querySelector("#element2").addEventListener("click", somethings, false);
function somethings(e){
    alert(e.target.id);
}

所以基本上没有人知道我在这种情况下能做什么:)？

Answer 1

你要绑定(bind)一个字符串？您需要做的就是:

document.querySelector("#element")
  .addEventListener('click', e => toggleMenu(e, param2), false);

假设:您在代码的其他地方定义了 param2。

编辑:

如果您只需要使用bind 的答案，您可以:

document.querySelector("#element")
  .addEventListener('click', toggleMenu.bind(null, param2), false);

function toggleMenu(param2, e) {
  /*use `e` whichever way you'd like*/
}