.bind() 与事件处理程序

Question

假设我有以下简化函数。

var ex = document.getElementById('exampleElement'),
    data = {
        foo: 'Sample text'
    };

ex.addEventListener('click', function(evt, d) {
    evt.stopPropagation();
    this.innerHTML = d.foo;
}.bind(ex, null, data));

我意识到在这种特殊情况下将ex 绑定到this 有点多余，但我如何才能绑定data 参数并仍然保持event 参数不被破坏？

我似乎无法在任何地方找到答案。

Answer 1

根据https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind

arg1, arg2, ...

在调用目标函数时将参数添加到提供给绑定函数的参数。

这意味着您的 curried 值将出现在 事件对象之前。参见这个小提琴的例子：

http://jsfiddle.net/5w4vnvof/

var clickme = document.querySelector("#clickme");

clickme.addEventListener("click", function(value, event) {
    var newDiv = document.createElement("div");
    newDiv.innerHTML = value + "<br/>" + event.target.toString();

    document.body.appendChild(newDiv);
}.bind(clickme, "curriedValue"));