how to use javascript to check which element was clicked using its id ?

[jd2007]

how to use javascript to check which element was clicked using its id ?

[Philip]

Why not just include it with the onClick();?

 

Like:

<a href="backifnojs.html" onclick="getID(link1)" id="link1">link 1</a>
<a href="backifnojs2.html" onclick="getID(link2)" id="link2">link 2</a>

 

Thats just how I would do it.

[roopurt18]

You should not be placing any Javascript directly into your HTML.  If you read up on the proper way to use the JS event model you can determine the DOM node that caused the event without passing anything to the event handler.

 

I don't feel like typing up an extended example right now, but this should get you started:

http://www.quirksmode.org/js/introevents.html

 

There are two basic event models you should support, the IE model and the DOM Level 2 model.  At this stage of the game I think you can safely ignore the Level 0 model.

[mainewoods]

The latest 'standards' event model sucks! you lose the use of the 'this' keyword and you have to double code for ie and everyone else.  I hate to say it but it's a big step backwards. 

 

He would have to write a bunch of ugly 'standards' code to replace:

<a href="backifnojs.html" onclick="getID(this.id)" id="link1">link 1</a>
<a href="backifnojs2.html" onclick="getID(this.id)" id="link2">link 2</a>

--the id will be passed as the parameter to getID, use it in a "document.getElementById()" statement

[roopurt18]

The latest 'standards' event model sucks! you lose the use of the 'this' keyword and you have to double code for ie and everyone else.  I hate to say it but it's a big step backwards.

 

That's why I wrapped it up in my own Javascript events interface that creates a single client interface despite the browser being used.  All of my Javascript is much cleaner and more concise.

 

function someHandler(oEvent){
  alert(oEvent.node.value);
}

Events.addEvent( document, "load", function(oEvent){
  // I can add events two ways, with the element or with it's ID
  var el = document.getElementById("some_textbox");
  Events.addEvent( el, "change", someHandler );

  Events.addEvent( "other_textbox", "change", someHandler );
});

[mainewoods]

but none of that allows the 'this' word in IE does it roopurt?  Like say I wanted to access this property from within the handler:

this.style.backgroundColor = 

the bottom of this page show that the 'this' is not available in IE in the modern event registration model:

http://www.quirksmode.org/js/events_advanced.html

[roopurt18]

Once you have the event object, either passed to the function with the DOM L2 model or through the global window.event object in IE, you can access the node that triggered the event.

 

  function handler(oEvent){
    oEvent = oEvent || window.event;  // Get the proper event object
    var oNode = oEvent.target || oEvent.srcElement; // Get the proper node object

    oNode.value = "Hello, World!";
    // Or if it's a list box
    alert(oNode.options[oNode.selectedIndex].value);
  }

 

If you use the event models correctly, you don't need the this keyword.  In addition, the node object will have all the properties of the this keyword in addition to the DOM methods as well.  Your statement about having to handle multiple models being a pain is correct, but that doesn't absolve you from being a good programmer and working with what is the current standard.

 

My suggestion:  Learn how to use the event models and get your Javascript out of your HTML; it just makes it ugly.