.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, ...

Arguments to prepend to arguments provided to the bound function when invoking the target function.

这意味着您的柯里化值将出现在事件对象之前。请参阅此 fiddle 示例：

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"));

.bind() 与事件处理程序

.bind() with event handlers

javascript

dom-events

function-binding