Take the 2-minute tour ×

Possible Duplicate:
How to reference the caller object (“this”) using attachEvent

This is not an exact duplicate. See my answer below as compared to the supposed duplicate!

I may be WAY off on my terminology, so please feel free to correct me. Perhaps this is why I cannot seem to find anything relevant. No libraries, please.

I have an event handler, which invokes a callback function. Fancy, right? In IE<9 the this object in the handler is the window. I don't know why, or how to access the correct object.

if (document.addEventListener){
    element.addEventListener(event, callback, false);
} else {
    element.attachEvent('on' +event, callback);

This part DOES WORK.

This part doesn't:

function callback(event){

this in IE is returning [object Window], whereas it returns the element that called the callback function in every other browser. This is cut down significantly from my full script, but this should be everything that's relevant.


This link provided by @metadings How to reference the caller object ("this") using attachEvent is very close. However, there are still two issues.

1) I need to get both the event object and the DOM element calling this function.

2) This event is handled delegation style: there may be child DOM elements firing the event, meaning event.target is not necessarily (and in my case, not typically) the element with the listener.

share|improve this question
Try using event.target. –  Rocket Hazmat Nov 20 '12 at 15:58
@metadings your link seems close, but I'm still lost as how to implement it in my scenario. Been trying though... –  Randy Hall Nov 20 '12 at 16:18
add comment

marked as duplicate by epascarello, apsillers, Peter O., evilone, chris Nov 21 '12 at 8:28


2 Answers

up vote 1 down vote accepted

Alright, closure was the right way to go. Here's the answer for the scenario above:

(function(element, event){
        'on' + event, 
            callback(e, element);
})(element, event);

That does it! callback receives e as the event object and element as the DOM object that fired the listener (not necessarily the event target).

Then in callback:

function callback(event, obj){
    obj = obj || this;
    console.log(event, obj);

Trying with the anonymous function and .call, as suggested in the link, made this inside callback() the event object, which wasn't working out.

share|improve this answer
This is also very useful for custom or faking event triggers, as a custom-built object could be passed in to callback() as event with keys such as target, and obj can be the selected element to call on. What you don't see, and why I need the element that's firing the callback, is that there are properties on that element storing instructions for its child elements' events. –  Randy Hall Nov 20 '12 at 17:06
add comment

I voted to close this, but seems like you are missing the arguments, so something like this

element.attachEvent("on"+event, function(){ callback.apply( element, arguments ); });
share|improve this answer
Please reconsider your close vote. This is not an exact duplicate. –  Randy Hall Nov 27 '12 at 4:21
add comment
