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)))?

Answer 1

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...

Answer 2

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.

Answer 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')

Answer 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.

Answer 5

The problem here was not that you didn’t use addEventListener() (because old-school .onclick-assignment works as well). The problem was that divClick got this (which equals eventobj.target), but you want the entire eventobj.

In the following two cases you only get eventobj.target under the name of this and you have no access to the arguments passed to the onclick-handler.

<div id=xyz onclick="divClick(this);">
document.getElementById("xyz").onclick = function () { divClick(this); };

You get the entire eventobj as normal parameter with the following line:

document.getElementById("xyz").onclick = divClick;

This is how an event is launched on the xyz element in IE9+ and other browsers:

document.getElementById("xyz").onclick(eventobj)

Answer 6

use:

var target = (event.target !== undefined)? event.target.name : event.srcElement.tagName;

then:

if ( target === 'A' || target === '...') {
    ...
}

OR: simple use:

var target = event.srcElement.tagName;

tested on Chrome 35 :)