current community

your communities

more stack exchange communities

Stack Exchange
tour help
careers 2.0
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 11 down vote favorite
4

I want to make an eventHandler that passes the event and some parameters. The problem is that the function doesn't get the element. Here is an example:

doClick = function(func){
    var elem = .. // the element where it is all about
    elem.onclick = function(e){
        func(e, elem);
    }
}
doClick(function(e, element){
    // do stuff with element and the event
});

The 'elem' must be defined outside of anonymous function. How can i get the passed element to use within the anonymous function? Is there a way to do this?

And what about addEventListener? I don't seem to be able to pass the event through an addEventListener at all do I ?

Update

I seemed to fix the problem with 'this'

doClick = function(func){
    var that = this;
    this.element.onclick = function(e){
        func(e, that);
    }
}

Where this contains this.element that i can access in the function.

The addEventListener

But i'm wondering about the addEventListener:

function doClick(elem, func){
    element.addEventListener('click', func(event, elem), false);
}
share|improve this question
1  
You have elem, elements, element involved in your question. Can you be less confusing? –  mihai Apr 3 '12 at 19:44
    
I'm sorry, i was trying to make an example of my situation but this didn't went well, i updated the code. –  sebas2day Apr 3 '12 at 19:54

2 Answers 2

up vote 18 down vote

I don't understand exactly what your code is trying to do, but you can make variables available in any event handler using the advantages of function closures:

function addClickHandler(elem, arg1, arg2) {
    elem.addEventListener('click', function(e) {
        // in the event handler function here, you can directly refer
        // to arg1 and arg2 from the parent function arguments
    }, false);
}

Depending upon your exact coding situation, you can pretty much always make some sort of closure preserve access to the variables for you.

From your comments, if what you're trying to accomplish is this:

element.addEventListener('click', func(event, this.elements[i]))

Then, you could do this with a self executing function that captures the arguments you want in a closure as it executes and returns the actual event handler function:

element.addEventListener('click', function(passedInElement) {
    return function(e) {func(e, passedInElement); };
} (this.elements[i]) , false);
share|improve this answer
    
yes this almost what i'm trying to do, but what if the anonymous function get passed as parameter by the addClickHandler and you want to give this function some parameters with the event like: element.addEventListener('click', func(event, this.elements[i])); –  sebas2day Apr 3 '12 at 20:00
1  
@sebas2day - You can't do element.addEventListener('click', func(event, this.elements[i])). Javascript just doesn't work that way. There are other ways around that, using closures, but you can't do it the way you wrote. addEventListener calls it's callback with exactly one argument (the event) and you can't change that in any way. –  jfriend00 Apr 3 '12 at 20:39
    
I added another example of doing this to the end of my answer. –  jfriend00 Apr 3 '12 at 20:47
up vote 0 down vote

this inside of doThings is the window object. Try this instead:

var doThings = function (element) {
    var eventHandler = function(ev, func){
        if (element[ev] == undefined) {
            return;
        }

        element[ev] = function(e){
            func(e, element);
        }
    };

    return {
        eventHandler: eventHandler
    };
};
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.