How to access Event.target in IE9?

Question

The HTML DOM object model defines an Event object with a target property.

Looking at MSDN, Microsoft documents a target property. They also document srcElement as an alias of target from earlier versions of Internet Explorer:

The target property is similar to srcElement in Windows Internet Explorer 8 and earlier versions.

---

So here i am in Internet Explorer, sitting at a click breakpoint:

<div class="day" onclick="divClick(this)">

function divClick(sender)
{
   var divCell = sender;

And at the F12 Tools console i can ask for the global event object:

>> event 
{
    actionURL : "",
    altKey : false,
    altLeft : false,
    behaviorCookie : 0,
    behaviorPart : 0,
    bookmarks : null,
    boundElements : {...},
    button : 0,
    buttonID : 0,
    cancelBubble : false
    ...
} 

And i can ask for the event.srcElement object:

>> event.srcElement 
{
    align : "",
    noWrap : false,
    dataFld : "",
    dataFormatAs : "",
    dataSrc : "",
    currentStyle : {...},
    runtimeStyle : {...},
    accessKey : "",
    className : "header",
    contentEditable : "inherit"
    ...
} 

But event.target is empty:

>> event.target 

And if i watch event, there is no target property:

So how do i access the target property of an event object in Internet Explorer (9 (Document Mode: IE9 Standards (Browser Mode: IE9)))?

Solution 1

If you want to use event.target in IE9, you'll need to use addEventListener()-method to assign eventhandler to the element.

<div id="day" class="day"></div>

document.getElementById('day').addEventListener('click',divClick,false);

function divClick(e){
   alert(e.target);
   divCell=this;
   :
}

In divClick() you can refer day simply using keyword this. Argument e contains a reference to the event-object itself.

BTW, in MSDN you can find maybe more suitable IE-documentation for Web development instead of Windows development.

Solution 2

event.target ?

Do you need to check on it and assign that to a variable and use that instead ..

  var target = event.target ? event.target : event.srcElement;

might be missing the point...

Solution 3

Here goes for my investigation (tested in IE9, IE10 & Edge browser modes on IE11, IE8 unfortunately breaks jsFiddle). In IE9 mode (IE11) event.target was available as a local variable to the function, don't know if it differs from the real IE9.

You cannot access event in any browser with an inline function. The problem is that when you do

<element onclick="someFunc(this)">

and you pass this as parameter, this === event.target (or srcElement), namely a [HTML Object], not an [Event Object].

So in practice that means that this:

<div id="foo" onclick="alert(this)"></div>

is the same as:

// note that onclick perfectly works, you don't necessarily need addEventListener
document.getElementById('foo').onclick = function(e) { alert(e.target) } //or
document.getElementById('foo').addEventListener('click', function(e) { alert(e.target) }, false);

So you access event target either directly inline as the parameter, either through javascript as the object parameter's target || srcElement property. You can test the results for yourself here: http://jsfiddle.net/kevinvanlierde/tg6FP/2/

Note: In case you attach inline, the position of your scripts is crucial (right before closing body tag)
Note: In case you attach inline, given that event.target is the 'root' of the object passed, you cannot access other event properties, like event.type.
Note: Be careful with IE Developer mode. I've known it to be deceiving (eg, not correctly displaying DOM content in the element tree until you click 'Edit as HTML')

Solution 4

The easy way to archive this is by using:

var target = event.target || event.srcElement;

• Avoid to use a ternary operator.

The way this works is because:

1. Test if event.target is a truthy which if does not exist in that browser will evaluate to false.
2. If evaluates to false then it will move to the next operator which in this case is event.srcElement.

And with this you will end up with the first value that is present on the current browser where the code is executed.

View more solutions

Comments

[mistertodd]

Since IE(9) says it supports event.target, i was hoping to use (just) event.target, but i don't see any event.target.

[mistertodd]

"IF you want to use event.target is IE9, you'll need to use addEventListener()" Is there any reference on this that i may read more about? i've scoured the IEBlog, but can find no mention - nor does the MSDN page on event.target mention it. i'd like to find the original description that says assigning onclick is "wrong".

[Teemu]

Well... I'm sorry, I can't point you any exact reference, but this is what I've learn about IE9 by using it, and it works... onclick is not wrong, but in IE9 it's just reserved to act exactly like in older IE-versions.

[Hitesh]

@Teemu : Can I achieve the same in jQuery ??

[Teemu]

@hitesh Yes, jQuery normalizes some Event properties (like .target), but you have to set listeners with jQuery.