Binding and event handler — passing the event object

Question

I have some sample code which binds an event handler as follows:

var h1=document.querySelector('h1');
h1.onclick=doit;

function doit(x) {
        console.log(x);
}

When the event handler is triggered (by clicking on the h1 element), the output is an event object, as expected.

If I bind the event handler as follows:

h1.onclick=doit.bind(h1);

I get the same result.

However, if I bind it as follows:

h1.onclick=doit.bind(h1,1);

I get 1, the first parameter after h1. In all cases, the vallue of this is correctly set to h1, but in the last case, the passed parameter appears to replace the expected event object.

How can I keep the event object without rewriting the event handler as a function expression?

Answer 1

but in the last case, the passed parameter appears to replace the expected event object.

Using bind creates a function with pre-specified initial arguments.

MDN Docs:

These arguments (if any) follow the provided this value and are then inserted at the start of the arguments passed to the target function, followed by the arguments passed to the bound function, whenever the bound function is called.

Which means, if you do:

h1.onclick=doit.bind(h1,1);

The value of this is bound to h1 as you've mentioned but the event from the onclick is passed as the second argument to doit, instead of first, since you bound 1 to the first argument. So you are still getting the event, it isn't getting replaced, it's just passed after all the bound arguments.

How can I keep the event object without rewriting the event handler as a function expression?

You can't. The event will be passed after all the arguments you previously bound to the function so you must take that into account. For the given case, doit would look like:

function doit(one, e) {
  console.log(this, one, e); // on click logs: h1 object, 1, event object
}