Identifying which element invoked the event

I have following html code

<input type="button"  id ="b1" value="Click me" onclick="msg()" />
<input type="button" id="b2"   value="Click me" onclick="msg()" />
开发者_如何学Go

now in my javascript i want to identify whether button one was clicked or button 2. How can i do it?

---

If you change your inline handler to use the .call() method, setting the context of the function to this:

<input type="button"  id ="b1" value="Click me" onclick="msg.call( this )" />

...then in your function, this will represent the one that received the event.

function msg() {
    alert( this.id );
}

---

Otherwise, you could pass this as an argument:

<input type="button"  id ="b1" value="Click me" onclick="msg( this )" />

...and reference that argument:

function msg( elem ) {
    alert( elem.id );
}

---

Have your msg() function take in an object. Then when you call it, pass in

msg(this);

---

From reading answers/comments I find that you're using dojo. You could reference it via the event object. I've only tested this in chrome,FF, and ie8 but this seemed to work:

templateString: "<div>" + '<button id="button1" dojoAttachEvent="onclick: msg">press me1</button><button id="button2" dojoAttachEvent="onclick: msg">press me2</button></div>',
msg:function(e){
    alert(e.currentTarget.id);   
}

Live example

---

You should not mix JavaScript directly into your HTML with JavaScript attributes such as onclick. You should instead programmatically attach your handlers using JavaScript. At the simplest:

function msg = function( evt ){
  // For old IE versions that don't pass in the event, 
  // get the global event object.
  if (!evt) evt = window.event;

  // Use currentTarget if available, target if not,
  // and srcElement for old versions of IE
  var receiver = evt.currentTarget || evt.target || evt.srcElement;

  alert( receiver.id );
};
document.getElementById('b1').onclick = msg;

Event handlers are passed an event object as their first parameter (except for very old IE versions, which set a global event property).

The difference between the currentTarget and target properties has to do with event bubbling. If an event occurs on a child element, but then bubbles up to some ancestor that has a handler for that event, the currentTarget property is the child element and the target property is the ancestor that has the event handler.

Old versions of IE do not have currentTarget or target properties, but instead use srcElement to mean the same thing as target.

Now, if you are attaching your event handlers in code to elements directly (not using bubbling), you already (at one point) have a reference to the element. So here's the alternative, more-advanced-but-simpler method:

var inputs = document.getElementsByTagName('input');
for (var i=0,len=inputs.length;i<len;++i){
  if (inputs[i].type=='button'){
    inputs[i].onclick = (function(i){
      return function(){
        alert(inputs[i].id);
      }
    })(i);
  }
};