Internet Explorer event and JavaScript currentTarget

Question

Is there a way to take the current event target with IE 7 or 8?

With another browser (firefox, opera, chrome, etc.) we can use event.currentTarget , and also we can use the this . refer to the object handling the event.

But in Internet Explorer , we do not have the currentTarget property, and this is a window object!

So how can I do this?

Answer 1

You can do something like

 target = (event.currentTarget) ? event.currentTarget : event.srcElement; 

Although, as mentioned by @Marc, you can use a jQuery framework that normalizes the event for you.

Answer 2

I had a similar problem. I solved this using the this , as stated in the article on brainjar.com

To get the equivalent of the currentTarget property in IE, use this keyword as an argument when setting an event handler in a tag.

...

function myHandler (event, reference) {...}

On the same page you can find the following table:

Answer 3

Short answer: use jQuery.

Although event.currentTarget not available in IE, jQuery will normalize the event for you so that your code also event.currentTarget on IE (as indicated here )

Note that using event.srcElement as suggested in other answers is not equivalent, since srcElement matches target , not currentTarget , as explained at the end of this page .

Answer 4

With this function you can pass an object when adding and get it in the listener. the problem is that you have an anonymous function as an eventlistener, and in actionscript you cannot remove an anonymous listener. dunno bout js.

 addEvent:function(object,type,listener,param) { if(object.addEventListener) object.addEventListener(type, function(e){ listener(object, e, param);}, false ); else if(object.attachEvent) object.attachEvent('on'+type, function(e){ e = getEvent(e); listener(object, e, param);}); }, getEvent:function(e) { if(!e) e = window.event; // || event if(e.srcElement) e.target = e.srcElement; return e; }, removeEvent:function(object,type,listener) { if(object.removeEventListener) object.removeEventListener(type, listener, false); else object.detachEvent('on'+type, listener); } var div = document.getElementById('noobsafediv'); var div2 = document.getElementById('noobsafediv2'); addEvent(div,'mouseover',mouseover,['astring',111,div2]); function mouseover(object,e,param) { console.log(object,e,param); } 

its my structure and i call it jNoob.

Answer 5

I assume that you want to use the 'this' context, because the same handler will deal with many possible objects. In this case, see the Great AddEvent script from the quirksmode recoding contest. ( http://www.quirksmode.org/blog/archives/2005/09/addevent_recodi.html ). This code allowed me to get the latest from javascript from html. More importantly, it seems to work on all the browsers I tested. Simple and compact.

Answer 6

Additional note: Sometimes IE (e.g. 7) returns undefined for event.target, so it won’t even evaluate it as true or false (whether in or in the ternary operator). In addition, even if you try typeof event.target == 'undefined' , there will still be an error: "event.target is undefined". This is, of course, stupid, because that is what you are testing.
This seems to be a problem with passing events to functions in older IE. What do you do to fix this:

 event = event ? event : window.event; if (typeof event.target == 'undefined') { var target = event.srcElement; } else { var target = event.target; } 

Please note that you are rewriting the event in standards compliant browsers and capturing the global event for IE.

Answer 7

This function creates currentTarget if it is IE, so you no longer need to fix the code!

 function eventListener(e,t,f) { if(e.addEventListener) e.addEventListener(t,f); else e.attachEvent('on' + t, function(a){ a.currentTarget = e; f(a); }); } 

Regular JS (does not work in IE below 9):

 function myfunction(e) { alert(e.currentTarget.id); } e = document.getElementById('id'); e.AddEventListener(e,'mouseover',myfunction); 

Using this function (will work in IE below 9):

 function myfunction(e) { alert(e.currentTarget.id); } e = document.getElementById('id'); eventListener(e,'mouseover',myfunction); 

Answer 8

With Prototype JS, you can use:

 var target = Event.element(event); 

Answer 9

Internet Explorer 6-8 does not implement event.currentTarget.

Quote from the Mozilla Developer Network :

In Internet Explorer 6 through 8, the event model is different. Event listeners are connected with the non-standard element.attachEvent method. There is no event.currentTarget equivalent in this model, and it is a global object. One solution to emulating the event.currentTarget function is to transfer your handler to a function that calls the handler using Function.prototype.call with the element as the first argument. So this will be the expected value.

If you use jQuery anyway, then jQuery will take care of normalizing the event object and its properties (as indicated many times in other answers). Quote from jQuery API docs :

The jQuerys event system normalizes the event object to W3C standards.

Answer 10

The currentTarget property is supported from IE version 9 and later .

Try this sample in IE9 +

Answer 11

I would like to give a simpler answer: meat is the same as meat in anas' and user1515360 answers:

 if (browserDoesNotUnderstandCurrentTarget) { someElement.onclick = function (e) { if (!e) { var e = window.event; } e.currentTarget = someElement; yourCallback(e); } } else { someElement.onclick = yourCallback; } 

Replace onclick for any event you want, of course.

This makes e.currentTarget available in browsers that do not support currentTarget.

Answer 12

I’m not sure, but this could be a solution: since the child specified by srcElement should not have an event, because it will interfere with the event on the parent and not the other top item before the top item where the event statement is (for example, onmosedown = "" ), so this is the code:

 if (!event) event = window.event; if (event.currentTarget) element = event.currentTarget; else{element = event.srcElement; while(element.onmousedown==null) element = element.parentNode;} if(element.nodeType==3) element=element.parentNode; // defeat Safari bug 

It seems that this still works with me, please correct me if u find the cz problem I need a solution for this I don't want to use jquery ..

Answer 13

You can always use closure and pass the element to which the event handler is bound. Something like that ...

 function handlerOnClick (currentTarget) { return function () { console.log(currentTarget); } } var domElement = document.createElement('DIV'); domElement.innerHTML = 'Click me!'; domElement.onclick = handlerOnClick(domElement); document.body.appendChild(domElement);