Question

我刚刚发现可以通过addEventListener绑定多个参数，这非常酷。

这个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);
}

通常情况下，我会通过对此事做类似的事情来获得身份证明

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

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

Answer 1

你绑定了一个字符串？您所需要做的就是：

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*/
}

Answer 2

你的事件将是函数处理程序中的最后一个参数，这就是bind实际工作的方式：

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

    alert(event); // Synthetic Mouse Event
}

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

2 个答案:

编辑：