.bind() with event handlers

Question

Assume I have the following simplified function.

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

I realise binding ex to this is somewhat redundant in this particular case, but how can I bind the data parameter and still keep the event argument from being destroyed?

I can't seem to find the answer anywhere.

What is this `d` parameter? You can't control how that function gets called. Why not use a closure? — elclanrs, Aug 24 '15 at 21:13

score 1 · Accepted Answer · edited Jun 20 '20 at 09:12

According to 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.

Which means that your curried value will come before the event object. See this fiddle for an example:

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

No way! That solves everything for me. Thanks a lot for the research! — stafffan, Aug 24 '15 at 21:54

.bind() with event handlers

1 Answers1