Question

我有以下HTML代码

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

现在在我的javascript中我想确定是否点击了按钮或按钮2.我该怎么做？

Answer 1

如果您更改内联处理程序以使用.call()方法，请将函数的上下文设置为this：

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

...然后在您的函数中，this将代表收到该事件的那个。

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

否则，您可以将this作为参数传递：

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

...并引用该论点：

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

Answer 2

让你的msg（）函数接受一个对象。然后当你打电话时，传入

msg(this);

Answer 3

从阅读答案/评论中我发现你正在使用道场。您可以通过事件对象引用它。我只用chrome，FF和ie8测试了这个，但这似乎有效：

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

Answer 4

您不应将JavaScript直接混合到具有JavaScript onclick等JavaScript属性的HTML中。您应该使用JavaScript以编程方式附加处理程序。最简单的是：

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;

事件处理程序作为第一个参数传递一个事件对象（非常旧的IE版本除外，它设置了全局event属性）。

currentTarget和target属性之间的差异与事件冒泡有关。如果在子元素上发生事件，但随后冒泡到某个具有该事件处理程序的祖先，则currentTarget属性是子元素，target属性是具有该事件的祖先处理程序。

旧版本的IE没有currentTarget或target属性，而是使用srcElement表示与target相同的内容。

现在，如果您将代码中的事件处理程序直接附加到元素（不使用冒泡），则您（已经在某一点上）已经引用了该元素。所以这是替代的，更先进但更简单的方法：

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

确定调用该事件的元素

4 个答案: