target/srcElement

**gkrueger** · Sep 26, 2003, 11:41

For some reason I can't get access to the target/srcElement in IE when an event is triggered on the window/document element.

For example, this does not work in IE (does work in Moz/NS):

<script language="Javascript">

window.onfocus=focusHandler;
window.onblur=blurHandler;

function focusHandler(e) {
if (!e) var e = window.event;
var targ;
if (e.target) targ = e.target;
else if (e.srcElement) targ = e.srcElement;
self.status="Focus - Target: " + targ;

}

function blurHandler(e) {
if (!e) var e = window.event;
var targ;
if (e.target) targ = e.target;
else if (e.srcElement) targ = e.srcElement;
self.status="Blur - Target: " + targ;
}
</script>

The following DOES work in IE (and Moz/NS):

<table border="1">
<tr>
<td onfocus="focusHandler()" onblur="blurHandler()">
Some Text
</td>
</tr>
</table>

Does anyone have any thoughts on this, or encountered it before. It is probably just due to my lack of understanding of IE's object model, but I can't seem to find any clear answers anywhere.

Just for reference, the reason I want to find the target/srcElement is to compensate for IE's event bubbling. I only want the handler to do something when it is fired by the element I registered it on, not by any of its sub-elements.

Hope this makes sense.
Thanks in advance.

**awestmoreland** · Sep 29, 2003, 01:53

The script you say doesn't work in IE calls the functions without the parentheses on the end and I wouldn't honestly have expected that to work in any browser. The second version looks correct to me and -as you say - that works.

**gkrueger** · Sep 29, 2003, 07:08

thanks for the response awestmoreland, but thats not exactly what I'm looking for. both ways of assigning events are perfectly valid. the first way is 'inline', the second 'traditional'. (http://www.xs4all.nl/~ppk/js/events_compinfo.html).

The real difference is actually what object/element the event is assigned to. In the first case it is the window/body object, in the second it is the 'td' element.

**MikeFoster** · Sep 29, 2003, 10:28

According to IE and W3C docs, those events do not bubble. However, there is no 'standard' relating to these events on the window or document object and I saw different behavior in the different browsers I tried. I experimented with the following, but I was not able to find any definite answers.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" id='html1'>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title></title>
<style type='text/css'>
html {
  margin:0; padding:10px; background:#ccc;
}
body {
  color:#000; background:#fff; margin:0; padding:10px;
  font-family:verdana,arial,sans-serif; font-size:12px;
}
div {margin:10px; padding:10px; background:#ccc;}
</style>
<script type='text/javascript'>
window.onload = function() {
  window.id = 'window1';
  document.id = 'document1';
  window.onfocus = handler;
  window.onblur = handler;
}
function handler(e) {
  var ev = e ? e : window.event;
  var target = ev.target ? ev.target : ev.srcElement;
  document.getElementById('textarea1').value +=
    ev.type + ": " + (target ? target.id : 'target is null') + '\n'; 
} 
</script>
</head>

<body id='body1'>

<h1 id='hdr1'>Testing blur/focus events</h1>

<div id='div1'>
  <form id='form1'>
    <p>text1:</p>
    <input type='text' id='text1' onblur='handler()' onfocus='handler()'>
    <p>textarea1:</p>
    <textarea id='textarea1' rows='30' cols='30' onblur='handler()' onfocus='handler()'></textarea>
  </form>
</div>
  
<div id='div2'>
  <form id='form2'>
    <p>text2:</p>
    <input type='text' id='text2' onblur='handler()' onfocus='handler()'>
    <p>textarea2:</p>
    <textarea id='textarea2' rows='10' cols='30' onblur='handler()' onfocus='handler()'></textarea>
  </form>
</div>
  
</body>
</html>

User Tag List

Thread: target/srcElement

Thread Tools

Display

target/srcElement

Bookmarks

Bookmarks

Posting Permissions