Question

我有以下代码段。问题是onclick事件不会触发第二个标签，它与第一个标签具有相同的类别。这是为什么？我在网上搜索并找到了多个解决方案，但所有解决方案都在jQuery中。但我希望它在纯JavaScript中。有谁知道我在这里做错了什么？

var label = document.getElementsByClassName('text');
label[0].onclick = function() {
	console.log(true);
};

<label class="text">Hello</label>
<label class="text">World!</label>

PS：我知道这个问题已在这里被多次询问（但解决方案是针对jQuery的）。所以请不要将此问题标记为重复：/

Answer 1

您可以使用event delegation：

document.body.onclick = function (ev) {
  if (ev.target.getAttribute("class") == "text") {
    console.log(true);
  }
};

<label class="text">Hello</label>
<label class="text">World!</label>

由于事件委派，新标签也可以点击：

var nLabels = 2;

document.body.onclick = function (ev) {
  var newLabel;
  if (ev.target.getAttribute("class") == "text") {
    console.log(ev.target.textContent);
  } else if (ev.target.id == "btn-add-label") {
    newLabel = document.createElement("label");
    newLabel.setAttribute("class", "text");
    newLabel.textContent = " new label #" + (nLabels++);
    document.body.appendChild(newLabel);
  }
};

<button type="button" id="btn-add-label">Add label</button>
<label class="text">Hello</label>
<label class="text">World!</label>

Answer 2

label是包含类text的所有元素的数组，因此label[0]仅适用于文档中的第一个元素。最简单的方法可能是使用循环，例如

for (var i = 0; i<label.length; i++){
    label[i].onclick = function() {
        console.log(true);
};

Answer 3

var label = document.getElementsByClassName('text');
for (var i = 0; i<label.length; i++) {
  label[i].oncllick = function () { console.log(true); };
}

Answer 4

试试这个

var label = document.getElementsByClassName('text');
for (var i = 0; i < label.length; i++) {
    label[i].onclick = function() {
        console.log(true);
    };
}

JavaScript：单击相同类名称的事件

4 个答案: