identifizieren, welches Element das Ereignis aufgerufen

Question

Ich habe folgende HTML-Code

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

jetzt in meinem Javascript i ein, ob Schaltfläche identifizieren möge geklickt wurde oder Taste 2. Wie kann ich es tun?

Answer 1

Wenn Sie Ihren Inline-Handler ändern Sie die .call() Methode zu verwenden, die Einstellung der Kontext der Funktion this:

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

... dann in Ihrer Funktion , this wird diejenige darstellen, die das Ereignis erhalten hat.

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

---

Andernfalls könnten Sie this als Argument übergeben:

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

... und Referenz dieses Argument:

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

Answer 2

Lassen Sie Ihre msg() - Funktion ein Objekt aufnehmen. Dann, wenn Sie es nennen, passieren in

msg(this); 

Answer 3

Sie sollten nicht JavaScript mischen direkt in Ihr HTML mit JavaScript-Attributen wie onclick. Stattdessen sollten Sie Ihre Handler programmgesteuert mit JavaScript verknüpfen. Am einfachsten:

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; 

Eventhandler werden ein Ereignisobjekt als ersten Parameter (außer bei sehr alten IE-Versionen, die eine globale event Eigenschaft) übergeben. Der Unterschied zwischen den currentTarget und target Eigenschaften hat mit Event Bubbling zu tun. Wenn ein Ereignis für ein untergeordnetes Element auftritt, aber dann zu einem Vorgänger mit einem Handler für dieses Ereignis übergeht, ist die Eigenschaft currentTarget das untergeordnete Element und die target-Eigenschaft der Vorgänger mit dem Ereignishandler.

Alte Versionen von IE haben keine currentTarget oder target Eigenschaften, sondern srcElement verwenden das gleiche wie target bedeuten.

Wenn Sie nun Ihre Event-Handler in Code direkt an Elemente anhängen (ohne Bubbling), haben Sie bereits (an einem Punkt) einen Verweis auf das Element. Also hier ist die Alternative, mehr fortgeschrittene-but-einfachere Methode:

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); 
    } 
}; 

Answer 4

Aus der Lektüre Antworten/Kommentaren finde ich, dass Sie Dojo verwenden. Sie können es über das Ereignisobjekt referenzieren. Ich habe getestet nur diese in Chrom, FF, und IE8 aber dies schien zu funktionieren:

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