CODEWITHSUNDEEP
htmlinternet-explorereventsinternet-explorer-9dom
Ian Boyd
Ian Boyd

Reputation: 256911

How to access Event.target in IE9?

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:

enter image description here

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

Upvotes: 11

Views: 21119

Answers (6)

Crisoforo Gaspar
Crisoforo Gaspar

Reputation: 3830

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.

Upvotes: 1

Robert Siemer
Robert Siemer

Reputation: 34737

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)

Upvotes: 0

lll
lll

Reputation: 3

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

Upvotes: -2

webketje
webketje

Reputation: 10996

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

Upvotes: 2

Teemu
Teemu

Reputation: 23406

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.

Upvotes: 4

Rob Sedgwick
Rob Sedgwick

Reputation: 5226

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

Upvotes: 13

Related Questions