Add AND remove eventlistener with arguments and access element and event? - Javascript

Question

Lets say I want to pass arguments to my function. I hear that I should do it by calling another function from within a function like this:

myElement.addEventListener("click",function whatever(event){
 myFunk(event,"some argument");
},false);

But what now if I want to remove it?

myElement.removeEventListener("click",whatever,false);

var myElement = document.querySelector('div')
function myFunk(e,m){
 console.log(e,m)
}
myElement.addEventListener("click",function whatever(event){
 myFunk(event,"some argument")
},false)
myElement.removeEventListener("click", whatever, false)

<div></div>

This returns a "whatever is not defined" error in the console. So does my function not have a name? Is "whatever" not its name? How now do I remove it?

I need a way to assign an event listener and pass it arguments, and then get rid of it later. How do I do this?

EDIT:

Okay, yes, I cannot refer to whatever because it is written inline. But the reason I am forced to use a function expression inline is because I want to pass it arguments. I want to pass it arguments because I don't want to have to define a new function for every time I want to change the behaviour. If I define an event listener using text on the "on" property I can easily swap out parameters:

element.onClick("myFunc('do one thing')");

element.onClick("myFunc('do a different thing')");

How do I do this with addEventListener, inline, removable, and with dynamic parameters?

• Grundy: your problem that whatever not function, but function expression, so after calling myElement.addEventListener function whatever is not available, but you can use whatever inside like function whatever(){...; whatever();}
• ADJenks: How would I then use arguments?
• ADJenks: The only reason I wrapped 'myFunc' inside of 'whatever' was so that I could pass arguments to the function. I want to be able to call a function with arguments on an event, and then remove the function, and then re-add it with different arguments later so it behaves differently.
• Grundy: how you define what parameter should used?
• Grundy: can you provide a small working jsfidlle what you have and what you try?

Answer 1

For addEventListener()'s second argument, do this:

whatever= function(event) {
 ...
}

… instead of this:

function whatever(event) {
 ...
}

You'll then be able to remove the event like this:

myElement.removeEventListener('click' , whatever);

---

To pass parameters to another event, use bind , like this:

whatever= myfunk.bind(myElement, parameter1, parameter2, ...)

---

Example

var myElement= document.getElementById('myElement');
function myfunk(s) {
 this.innerHTML+= '<br>'+s;
 myElement.removeEventListener('click', whatever);
 myElement.addEventListener(
 'click',
 whatever= myfunk.bind(myElement, 'Clicked again.')
 );
}
myElement.addEventListener(
 'click',
 whatever= myfunk.bind(myElement, 'Clicked once.')
);

<div id="myElement">Click me!</div>

• Grundy: but in this case whatever added in global object
• Rick Hitchcock: True. We could add var whatever; prior to the event listener if this were within a function. But I would think that most event handlers would be defined within the global scope.
• ADJenks: I cannot then pass arguments to the function.
• ADJenks: BIND! THAT's IT! BIND! Thanks a lot. Now my brain is at ease.
• ADJenks: Looking back at this, I probably could have also used a factory pattern.

Answer 2

Maybe this will help you with your goal... generateHandler generates an event handler function for an input function, with an input argument and passes the "real handler" the event, the argument AND the handler instance for easy removal. It also returns that instance for removing the handler from outside.

I then show various ways of how this can be used. Hope this helps...

function generateHandler(f, arg) {
 var handler = function (evt) {
 f(evt, arg, handler);
 };
 return handler;
}
function realFunc(evt, arg, handler) {
 alert(arg);
 if(arg == 2) {
 document.getElementById('el').removeEventListener('click', handler);
 document.getElementById('el').innerHTML = 'I also do nothing now';
 }
}
function replace1Time(evt, arg, handler) {
 document.getElementById('el').removeEventListener('click', elHandler);
 elHandler = generateHandler(realFunc, 2);
 document.getElementById('el').addEventListener('click', elHandler);
 document.getElementById('el2').removeEventListener('click', handler);
 document.getElementById('el2').innerHTML = 'I do nothing now';
}
var elHandler = generateHandler(realFunc, 1);
document.getElementById('el').addEventListener('click', elHandler);
document.getElementById('el2').addEventListener('click', generateHandler(replace1Time));

<div id="el">Click me!</div>
<div id="el2">Click me to replace 1 time</div>

• ADJenks: To add a new listener with different arguments for realFunc I would then have to define a new function each time I wanted to pass arguments to it. Must I really define a new function, and then change the arguments in the second function, every time I want to change the arguments?
• Amit: @adjenks It's not entirely clear what exactly would be "good enough", but I gave you a more flexible solution.

Answer 3

Take a look at this fiddle

What happens is you will see an alert when you press the button but won't see it afterwards as it will be removed from the listener.

function anotherFunctionWithParams(param1, param2){
 alert (param1 + "-" + param2);
}
var cbFunc= function(){
 anotherFunctionWithParams("tra","lalala");
 document.getElementById("test").removeEventListener("click", cbFunc);
}
document.getElementById("test").addEventListener("click", cbFunc, false);

Also not that, you can NOT remove inline anonymous listener functions.

• ADJenks: To add a new listener with different arguments I would then have to define a new function each time I wanted to pass arguments to it. Must I really define a new function, and then change the arguments in the second function, every time I want to change the arguments?
• Alp: @adjenks can you use jquery ?
• ADJenks: Well if jQuery can do it, then you must be able to do it with vanilla javascript. I would gladly look at a jQuery answer though, and then perhaps I could examine the jQuery library to see how it does it.