SitePoint Sponsor |
|
User Tag List
Results 1 to 4 of 4
Thread: target/srcElement
-
Sep 26, 2003, 11:41 #1
- Join Date
- Sep 2003
- Location
- Narnia
- Posts
- 7
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
target/srcElement
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.
-
Sep 29, 2003, 01:53 #2
- Join Date
- Sep 2002
- Location
- Grand Rapids, MI
- Posts
- 1,168
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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.
From the English nation to a US location.
-
Sep 29, 2003, 07:08 #3
- Join Date
- Sep 2003
- Location
- Narnia
- Posts
- 7
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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.
-
Sep 29, 2003, 10:28 #4
- Join Date
- Dec 2002
- Location
- Alabama, USA
- Posts
- 2,560
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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>
Cross-Browser.com, Home of the X Library
Bookmarks