如何在JavaScript中将局部变量从函数传递到事件侦听器函数？

Question

Good day!

I began writing my own basic JavaScript library for personal use and distribution a few days ago, but I am having trouble with one of the methods, specifically bind() .

Within the method itself, this refers to the library, the object.

I went to Google and found function.call() , but it didn't work out the way I planned it--it just executed the function.

If you take a look at another method, each() , you'll see that it uses call() to pass values.

I also tried the following:

f.arguments[0]=this;

My console throws an error, saying it cannot read '0' of "undefined".

I would like to be able to pass this (referencing the library--NOT THE WINDOW) to use it in the event listener.

You can see it starting at line 195 of the JavaScript of this JSFiddle .

Here it is as well:

bind:function(e,f){
    if(e.indexOf("on")==0){
        e=e.replace("on","");
    }
    if(typeof f==='function'){
            /*Right now, 'this' refers to the library
            How can I pass the library to the upcoming eventListener?
            */
            //f=f(this); doesn't work
            //f.call(this); //doesn't work

            //this.target refers to the HTMLElement Object itself, which we are adding the eventListener to
        //the outcome I'm looking for is something like this:
        /*$('h3').which(0).bind(function({
            this.css("color:red");
        });*/
        //(which() defines which H3 element we're dealing with
        //bind is to add an event listener
            this.target.addEventListener(e,f,false)
    }
    return this;
},

Thank you so much for your help, contributors!

Answer 1

So in this particular case you actually want to call JavaScript's built in bind method that all functions have.

f = f.bind(this);

f will be a new function with it's this argument set to whatever you passed into it.

Answer 2

If, as per your comments, you don't want to use .bind() , rather than directly passing f to addEventListener() you could pass another function that in turn calls f with .call() or .apply() :

if(typeof f==='function'){
    var _this = this;
    this.target.addEventListener(e,function(event){
        f.call(_this, event);
    },false)
}

Doing it this way also lets your library do any extra event admin, eg, pre-processing on the event object to normalise properties that are different for different browsers.

Answer 3

Replace f=f(this); with f.apply(this);

Look at underscore code, here: https://github.com/jashkenas/underscore/blob/master/underscore.js#L596