Variable as eventListener named function expression name

Question

I'm writing an awesome IIFE and want this to be as easy as possible for my users who use it. So I was thinking since some of them don't know that to easily remove an eventlistener without it already being a function we can give that inline function a name

Example

document.addEventListener('click',function dood(){
    //some function
},false);
document.removeEventListener('click',dood,false);
//instead of 
function dood(){
  //some function
} 
document.addEventListener('click',dood,false);
document.removeEventListener('click',dood,false);

But since they shouldn't know the name exactly I was wondering if we could do

var k = "name_of_function";
document.addEventListener('click',function window[k](){
  //the function
},false);

Though I know this does not work is there a way to do this? I'd like to make it so they can easily do this

object.cancel('name_of_function') //which will be the name of the instance
// they created earlier if they gave that instance a name
object={
  cancel:function(nm){
    document.removeEventListener(self.trigger,window[nm],false);
    //self.trigger really is this.trigger which they assign as either scroll,click,mousemove,etc.
  }
};

Any ideas? Or is this not possible at all?

usage is:

scrollex('element',{
    max:500,
    min:500,
    pin:200,
    offset:0.5,
    name:'google',//this then would be used in multiple instances
});

scrollex.events //shows all events and their names
scrollex.listen('google'); //it'll console log all info for this event
scrollex.cancel('google');

If you give an inline function a name, you've got a [nfe](http://kangax.github.com/nfe/), but the name still doesn't become a global identifier. Stick with your old solution. — Bergi, Jun 05 '14 at 04:44
I have no old solution I know that is an NFE but my API is wrapped in an IIFE I don't know why I stated it has nothing to do what I am looking for lol. if you mean the removeEventListener with an NFE then well that would be an annoyance to my users. I need it to be easiest as possible you know> — EasyBB, Jun 05 '14 at 04:47
How are your users supposed to use your API anyway? What do they need to do with it? Maybe show the IEFE you already have. — Bergi, Jun 05 '14 at 04:58

score 1 · Answer 1 · edited May 23 '17 at 12:20

1

I think you're on the right track. But you should not use window, and some local object instead. And dynamically naming function expressions (or whatever that function window[k](){} was supposed to mean) is ~~impossible~~ a pain - don't try this. Just let them stay anonymous, and reference them only via property names / variables.

var object = (function() {
    var listeners = {
        name_of_function: function dood(){…}
    };
    document.addEventListener('click', listeners.name_of_function, false);

    return {
        cancel: function(nm) {
            document.removeEventListener('click', listeners[nm], false);
        }
    };
}());

// now, you can
object.cancel('name_of_function')

edited May 23 '17 at 12:20

Community

1
1

answered Jun 05 '14 at 05:04

Bergi

630,263
148
957
1,375

what if there are hundreds of custom functions? The users sets these properties and these properties are used inside the listener making it a custom function eachtime. – EasyBB Jun 05 '14 at 05:37
Well, you could easily have a hundred different functions with different property names in that `listeners` object. But maybe I misunderstood what you need. – Bergi Jun 05 '14 at 05:50

Variable as eventListener named function expression name

1 Answers1