SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Enthusiast Quark's Avatar
    Join Date
    Sep 2006
    Posts
    39
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    how to get the element that fires the event?

    Hi,
    I have the following html:

    <div id="div1">
    <button id="bt1">click me</button>
    </div>

    and in script I attach events:

    div1.attachEvent("onclick", handler );
    bt1.attachEvent("onclick", handler );

    where

    function handler( e )
    {
    if ( !e ) e = window.event;
    var elem = e.srcElement;
    }

    So handler is attached to the div and the button. I CLICK the button. In the function handler() e.srcElement gives me the object that started the event: the button.
    However, how do I get the object that fires the current event. So when the onclick is fired for the div (the onclick bubbles), what gives me the div element in this function? Because e.srcElement always gives me the button even when the onclick is fired for the div.

    thx

  2. #2
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Nelson BC
    Posts
    2,310
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    How about
    Code:
    function handler( e )
    {
    alert(this.tagName);
    }

  3. #3
    SitePoint Enthusiast Quark's Avatar
    Join Date
    Sep 2006
    Posts
    39
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by jimfraser View Post
    How about
    Code:
    function handler( e )
    {
    alert(this.tagName);
    }
    thx for the response. That's what I thought, but some how it does not work. It gives "undefined" at the alert. I'm use IE. Any idea's what I'm doing wrong? Thx: My code:
    Code:
    <html>
    <head>
      
    </head>
    
    <style>
    .container
    {
        width:100px;
        height:100px;
        border:solid blue 2px;
    }
    </style>
    
    <body>
    <div id="div1" class="container"> <button id="bt1">test</button> </div>
    </body> <script type="text/javascript"> div1.attachEvent("onclick", handler ); bt1.attachEvent("onclick", handler ); function handler( e ) { if ( !e ) e = window.event; alert(this.tagName); } </script> </html>

  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)
    If you use attachEvent, "this" (in the listener) will not be what you expect. Use event.srcElement in IE, and event.target for DOM2 browsers.

    If you want to use "this" in the listener then use DOM0 event handlers:
    Code:
    window.onload = function()
    {
      var ele = document.getElementById('div1');
      if (ele) ele.onclick = handler;
    }

  5. #5
    SitePoint Enthusiast Quark's Avatar
    Join Date
    Sep 2006
    Posts
    39
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thx, for the response. Unfortunately, I need more than one onclick event on the element. So attachEvent (ie6) is a must for me.
    Which brings me back to the original question: How can I get the element that had the onclick event attached in the function handler(e)? This is not e.srcElement, cause that's the element clicked. The event bubbles from the button to the div.
    So in this example div causes the onclick event to fire, how do I get the div in handler(e)? thx

  6. #6
    SitePoint Evangelist
    Join Date
    Mar 2006
    Location
    Sweden
    Posts
    451
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Loop it, and in the loop check if the tag name is 'div'. If it's not, go to the parent, etc. Something like:

    while( elem.tagName.toLowerCase() != 'div' ) elem = elem.parentNode;

  7. #7
    SitePoint Enthusiast Quark's Avatar
    Join Date
    Sep 2006
    Posts
    39
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thx, but that's not what I meant. In the handler(e) function I do not know anything about the node that had the event attached to it. So in this example it is a div, but it can be anything. Sorry for the confusion.
    But I think I have found it:
    Code:
    div1.attachEvent("onclick", handler(div1) );
    function handler( elem )
    {
        return function()
    {
        var e = elem.ownerDocument.parentWindow.event;
        //e is the event, and elem is the element with the event attached
    }
    }
    So I can pass the element as a variable

  8. #8
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Nelson BC
    Posts
    2,310
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I guess when you are assigning the events you could pass the element in question as a param...
    Code:
    <html>
    <head>
    <script type="text/javascript">
    window.onload = function () {
    	document.getElementById("div1").attachEvent("onclick", function (e) { handler(e, document.getElementById("div1")); } );
    	document.getElementById("bt1").attachEvent("onclick", function (e) { handler(e, document.getElementById("bt1")); } );
    }
    function handler( e, obj ) {
    	if ( !e ) e = window.event;
    	var elem = e.srcElement;
    	if (obj !== elem) {
    		alert("handler was called from div");
    	} else {
    		alert("handler was called from button");
    	}
    }
    </script>
    </head>
    <body>
    <div id="div1">
    <button id="bt1">click me</button>
    </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
  •