Question

问题：

我有134个必须附加onclick事件的元素。我现在正在这样做，每个人都是eeeeeee（并且他们也附上了ondbclick事件！）：

<div id="id1" class="name" onclick="functionName(this.id)"></div>
<div id="id2" class="name" onclick="functionName(this.id)"></div>
<div id="id3" class="name" onclick="functionName(this.id)"></div>

但是在Eloquent Javascript（第14章）中读到这被认为是不好的做法，因为它混合了html和javascript。

所以我想我可以找到一种方法将onclick事件连接到所有这些事件上。我搜索了几个小时并尝试了一些事情，例如:(从＆＃39;如何将JavaScript onclick事件设置为具有css＆＃39的类;这里是stackoverflow）

window.onload = function() {
    var elements = document.getElementsByClassName('nameOfTheClass');
    for(var i = 0; i < elements.length; i++) {
        var OneElement = elements[i];
        OneElement.onclick = function() {
           //do something
        }
    }
}

点击了解元素，但不是我的功能。

我的原始函数正在接收两个值，即被点击的元素的id和innerHTML，现在我找不到访问该信息的方法。

我尝试使用OneElement.id和OneElement.innerHTML来发现它获取了文档中最后一个元素的id和innerHTML。

任何线索？非常感谢任何帮助！：）

Answer 1

在JavaScript中触发事件时，JavaScript会将事件对象传递给回调函数。将其传递给签名，您将获得对元素属性的访问权。

window.onload = function() {
    var elements = document.getElementsByClassName('nameOfTheClass');
    for(var i = 0; i < elements.length; i++) {
        var OneElement = anchors[i];
        OneElement.onclick = function(e) {
           //do something
           console.log(e.target.id, e.target.innerHTML);
        }
    }
}

Answer 2

<div id="id1" class="name">first</div>
<div id="id2" class="name">second</div>
<div id="id3" class="name">third</div>
<script type="text/javascript">
  var nodes = document.querySelectorAll('.name');
  Array.from(nodes).forEach(function (node) {
    node.addEventListener('click', function (event) {
      alert('you clicked' + event.target.textContent + ' with id: ' + event.target.getAttribute('id'));
      // you might also use event.target.innerHTML here
    });
  });
</script>

Answer 3

我建议你使用两种DOM apis：

document.querySelector和document.querySelectorAll以及
element.addEventListener('click', event => {/* ... */});

这些是我对“vanilla js”dom操纵的蠢事。

请参阅下面的示例，了解您的需求。

Array.from(document.querySelectorAll('.name')).forEach(element => {
  // for each element that matches the querySelector `.name`
  element.addEventListener('click', clickEvent => {
    // call your function when the element is clicked
    // see the properties of a Dom Element here:
    // https://developer.mozilla.org/en-US/docs/Web/API/Element
    yourFunction(element.id, element.innerHTML);
  });
})

function yourFunction(id, innerHtml) {
  // use the values!
  console.log({id, innerHtml});
}

<div id="id1" class="name">[click me] inner html 1</div>
<div id="id2" class="name">[click me] inner html 2</div>
<div id="id3" class="name">[click me] inner html 3</div>

将onclick事件设置为一类元素：如何获取单击的id？仅限javascript

3 个答案: