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

时间:2017-05-24 20:33:54

标签: javascript html css

我刚刚发现可以通过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);
}

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

2 个答案:

答案 0 :(得分:2)

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

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

答案 1 :(得分:1)

你的事件将是函数处理程序中的最后一个参数,这就是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
}