SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Aug 2007
    Posts
    23
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    eventListener issue

    Hi guys,

    Can you see whats wrong with my code? I get the following error:

    element has not properties.

    Code:
    function test()
    {
      document.getElementById("statusbar").innerHTML = this.id;
    }
    
    // Handles all elements
    
    function init()
    {
       //var elm_right = document.getElementById("right");
       var element = document.getElementById("left");
    
       element.addEventListener('click', test, false);
    }
    
    window.onload=init();

  2. #2
    SitePoint Wizard bronze trophy
    Join Date
    Jul 2006
    Location
    Augusta, Georgia, United States
    Posts
    4,139
    Mentioned
    16 Post(s)
    Tagged
    3 Thread(s)
    Well this refers to the event not the object which the listener is attached.

    Maybe something like this:

    Code:
    function test(e)
    {
      var el;
      if(window.event && window.event.srcElement) el = window.event.srcElement;
      else if(e && e.target) el = e.target; else return;
      document.getElementById("statusbar").innerHTML = el.id;
    }
    You could also pass the object as an argument in the event.


    Code:
    element.addEventListener('click', getEventObject(element), false);
    
    function getEventObject(object) {
      return function(e) {test(e,object);};
    }

  3. #3
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    1) You're not assigning a window.onload event handler with that code since init() doesn't return a function. Read more here.

    2) Are you aware that IE doesn't support addEventListener()?

    3) oddz is right that it's best to avoid using the this keyword to refer to elements when you use the advanced event models.

    I'd write test() like this though:
    Code:
    function test(e){
      e = e||window.event;
      var el=e.target||e.srcElement;
      document.getElementById("statusbar").innerHTML = el.id;
    }
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  4. #4
    SitePoint Member
    Join Date
    Aug 2007
    Posts
    23
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks guys!

    I got it working. As for IE not supporting addEventListener, i am aware. I am not making this app for commercial use but rather an academic exercise. So i am sticking to the W3C standards and making certain assumptions (ie browser is W3C compliant).

  5. #5
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You're welcome

    In that case you could change
    Code:
      e = e||window.event;
      var el=e.target||e.srcElement;
    to
    Code:
      var el=e.target;
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.


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
  •