Question

var keys = document.getElementsByClassName("small_key");

for(i=0; i<keys.length; i++) {
    keys[i].addEventListener("click", keyClick);
}

我有上面的代码，想知道如何编写函数＆＃34; keyClick＆＃34;所以我知道点击了哪一个元素。

function keyClick(){}

这个问题不是双重问题，因为另一个问题是document.getElementById和document.getElementsByClass。除此之外，getElementById返回一个元素，而getElementsByClass返回一个或多个元素。当你用同一个监听器放置多个元素时，我不知道它是否是一样的...

Answer 1

在keyClick中，this将引用您挂钩事件的元素。（它也可以在事件对象currentTarget收到的keyClick上获得。）如果你想知道实际点击了什么元素（例如，如果它是{{1的后代元素）您连接处理程序的元素，即事件对象上的.small_key。如果点击直接位于target元素（不是后代），.small_key和currentTarget将是相同的。

示例：

＆＃13;

target

＆＃13;

var keys = document.getElementsByClassName("small_key");

for(var i=0; i<keys.length; i++) {
    keys[i].addEventListener("click", keyClick);
}

function keyClick(e) {
  console.log("this.id = " + this.id);
  console.log("e.currentTarget.id = " + e.currentTarget.id);
  console.log("e.target.id = " + e.target.id);
}

＆＃13;

Answer 2

尝试Fiddle

您可以使用this来引用正在举起活动的当前对象。

var keys = document.getElementsByClassName("small_key");

for(i=0; i<keys.length; i++) {
    keys[i].addEventListener("click", function(){ var ctrl = this; keyClick(this); });
}

function keyClick(obj){
    console.log(obj);
}

希望这适合你。

如何知道从ElementsByClassName（Javascript）中单击了哪个元素

2 个答案: