Question

我有一些像这样的div：

.test {
  height: 50px;
  width: 50px;
  border-radius: 4px;
  display: inline-block;
  background-color: lightgreen;
  margin: 5px;
  line-height: 50px;
  text-align: center;
}

<div class="test" id="one">1</div>
<div class="test" id="two">2</div>
<div class="test" id="three">3</div>
<div class="test" id="four">4</div>
<div class="test" id="five">5</div>
<div class="test" id="six">6</div>
<div class="test" id="seven">7</div>

他们的（id）s不同但我在它们上应用了相同的类名，所以，我现在可以像这样访问它们

var box = document.getElementsByClassName("clsname");

这创建了一个名为box的数组。我想编写一个JavaScript函数，它返回数组中单击的元素。例如，当我单击任何一个框并且将返回单击的框（div）元素时，将触发该函数。

我想用纯JS做，没有jquery，请：）

由于

Answer 1

这是循环它们并添加事件监听器的简单方法：

var testList = document.getElementsByClassName("clsname");

for(var i = 0; i < testList.length; i++) {
    testList[i].addEventListener('click', function() {
        console.log(this.id);
    });
}

这里有一个JSBin，上面有一个例子。

代码执行的操作是循环NodeList，然后在单击时添加事件侦听器以记录其ID。这是一个片段：

＆＃13;

var testList = document.getElementsByClassName("test");

for(var i = 0; i < testList.length; i++) {
    testList[i].addEventListener('click', function() {
        console.log(this.id);
    });
}

＆＃13;

.test {
  height: 50px;
  width: 50px;
  border-radius: 4px;
  display: inline-block;
  background-color: lightgreen;
  margin: 5px;
  line-height: 50px;
  text-align: center;
}

＆＃13;

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
    <div id="one" class="test">1</div>
    <div id="two" class="test">2</div>
    <div id="three" class="test">3</div>
    <div id="four" class="test">4</div>
    <div id="five" class="test">5</div>
    <div id="six" class="test">6</div>
    <div id="seven" class="test">7</div>
</body>
</html>

＆＃13;

如果需要，可以使用Array中的forEach循环，如下所示：

var testList = document.getElementsByClassName("clsname");

Array.prototype.forEach.call(testList, function(element, index) {
    element.addEventListener('click', function() {
        console.log(this.id);
    });
});

Answer 2

在 DOMContentLoaded for document.getElementsByClassName（“clsname”）的每个元素上添加事件处理程序：

window.addEventListener('DOMContentLoaded', function(e) {
  Array.prototype.slice.call(document.getElementsByClassName("clsname")).forEach(function (element, index) {
    element.addEventListener('click', function (e) {
      console.log(this.id);
    });
  });
})

<div id="one" class="clsname">  111111111111</div>
<div id="two" class="clsname">  222222222222</div>
<div id="three" class="clsname">333333333333</div>
<div id="four" class="clsname"> 444444444444</div>
<div id="five" class="clsname"> 555555555555</div>
<div id="six" class="clsname">  666666666666</div>
<div id="seven" class="clsname">7777777777777</div>

Answer 3

我认为最有效的方法是将事件委托给父包装器。

<!-- add a surrounding div -->
<div id="myDiv">
  <div id="one" class="clsname"></div>
  <div id="two" class="clsname"></div>
  ...
</div>

<script>
  document.getElementById("myDiv").addEventListener("click",function(e) {
    // e.target was the clicked element, do something interesting with it.
    console.log(e.target);
  });
</script>

如果你想获得幻想，可以使用Element match API来确保你拥有正确的元素，而不是div的子元素。

var el = e.target;
while(!el.matches("div.clss")) {
  el = el.parentNode;
}

// should always be the div and not some child element that was clicked.
console.log(el);

JavaScript - 如何在单击数组后从数组中获取元素

3 个答案: