JS Event Listener with a function that has one parameter

Question

Not sure how to set proper title for this question, so I guess that's why I can't find anything related to it.

Suggestion for title would be nice if this isn't a duplicate already.

I wonder how do I actually add/remove event listener with a function where I must pass one parameter.

Simple example as it should be is below:

window.addEventListener('resize', anFunction, false);
window.removeEventListener('resize', anFunction, false);

But how do I set the same function that must contain parameter within ? Example below that is invalid of course, as I don't know how to do it.

window.addEventListener('resize', anFunction(parameter), false);
window.removeEventListener('resize', anFunction(parameter), false);

Oriol · Accepted Answer · 2014-10-10 21:29:08Z

1

For example, you can use one of these:

A wrapping function:

function resizeListener() {
    anFunction(parameter);
}

Function.prototype.bind:

var resizeListener = anFunction.bind(void 0, parameter);

An arrow function (EcmaScript6):

var resizeListener = e => anFunction(parameter);

And then:

window.addEventListener('resize', resizeListener, false);
window.removeEventListener('resize', resizeListener, false);

edited Oct 10, 2014 at 21:29

answered Oct 10, 2014 at 21:24

Oriol

291k71 gold badges459 silver badges535 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

nonwip Over a year ago

I guess I have to go with wrapping function, because I need cross browser compatibility. Let me try !

Oriol Over a year ago

@dvLden I would also choose that one. But be aware bind can be polyfied for old browsers.

nonwip Over a year ago

Oh thanks for polyfill :) ! Well I tried first method, I will try polyfill too but I guess wrapper will just do fine!

Ahrengot · Accepted Answer · 2014-10-10 21:33:46Z

1

There is also the relatively new (IE9+) function.prototype.bind method

It works like this:

var myVar = "123";

var myHandler = function(myVar) {
    console.log("Resize handler with arg: ", myVar);
    // => Resize handler with arg: 123
};

window.addEventListener("resize", myHandler.bind(this, myVar));

It's meant to be used for controlling the context (value of this) of callbacks, but it's also works nicely for things like what you described.

answered Oct 10, 2014 at 21:33

Ahrengot

1,5991 gold badge17 silver badges29 bronze badges

2 Comments

nonwip Over a year ago

Is there any polyfill for cross browser support (IE 6 and above) ?

Oriol Over a year ago

If you don't store any reference to the function returned by myHandler.bind(this, myVar), you won't be able to remove the event listener.

Collectives™ on Stack Overflow

JS Event Listener with a function that has one parameter

2 Answers 2

3 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related