将Click事件侦听器添加到具有相同类的元素

Question

我有一个删除ID的列表视图。我想为具有特定类的所有元素添加一个侦听器，并发出确认警报。我的问题是，这似乎只会将侦听器添加到具有找到的类的第一个元素。我尝试使用，querySelectorAll但是没有用。var deleteLink = document.querySelector('.delete');deleteLink.addEventListener('click', function(event) {    event.preventDefault();    var choice = confirm("sure u want to delete?");    if (choice) {        return true;    }});列表：<?php     while($obj=$result->fetch_object())    {        echo '<li><a class="delete" href="removeTruck.php?tid='.$obj->id.'">'.$obj->id.'</a>'            . '<a href="#" class="delete"></a>                      </li>'."\n";    }    /* free result set */    $result->close();           $mysqli->close();?>

Answer 1

使用querySelectorAll和for循环的问题在于，它为数组中的每个元素创建了一个全新的事件处理程序。

有时候，这正是您想要的。但是，如果您有许多元素，则创建单个事件处理程序并将其附加到容器元素可能会更有效。然后，您可以event.target用来引用触发事件的特定元素：

document.body.addEventListener("click", function (event) {

  if (event.target.classList.contains("delete")) {

    var title = event.target.getAttribute("title");

    if (!confirm("sure u want to delete " + title)) {

      event.preventDefault();

    }

  }

});

在此示例中，我们仅创建一个附加到该body元素的事件处理程序。每当body点击内的元素时，click事件就会冒泡到我们的事件处理程序中。

Answer 2

您必须使用querySelectorAll需要选择带有所述类的所有元素，这又querySelectorAll是一个数组，因此您需要对其进行迭代并添加事件处理程序

var deleteLinks = document.querySelectorAll('.delete');

for (var i = 0; i < deleteLinks.length; i++) {

    deleteLinks[i].addEventListener('click', function (event) {

        event.preventDefault();

        var choice = confirm("sure u want to delete?");

        if (choice) {

            return true;

        }

    });

}