SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Hybrid View

  1. #1
    SitePoint Member
    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.

  2. #2
    American't awestmoreland's Avatar
    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.

  3. #3
    SitePoint Member
    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.

  4. #4
    I'll take mine raw silver trophy MikeFoster's Avatar
    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>


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •