向具有相同类的元素添加单击事件侦听器

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 。 它返回 NodeList，但是querySelector只返回第一个找到的元素：

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

然后你会循环：

for (var i = 0; i < deleteLink.length; i++) {
    deleteLink[i].addEventListener('click', function(event) {
        if (!confirm("sure u want to delete " + this.title)) {
            event.preventDefault();
        }
    });
}

此外，只有在confirm === false时才应该 preventDefault 。

还值得注意的是， return false/true仅对与onclick = function() {...}绑定的事件处理程序有用。 对于addEventListening您应该使用event.preventDefault() 。

演示： http : //jsfiddle.net/Rc7jL/3/

---

ES6版本

通过使用Array.prototype.forEach迭代而不是 for 循环，您可以使它更简洁（更安全的闭环循环）：

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

Array.from(deleteLinks).forEach(link => {
    link.addEventListener('click', function(event) {
        if (!confirm(`sure u want to delete ${this.title}`)) {
            event.preventDefault();
        }
    });
});

_{上面的示例使用Array.from和 ES2015 标准中的模板字符串。}

Answer 2

使用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 3

一个简短而甜蜜的解决方案，使用 ES6：

document.querySelectorAll('.input')
      .forEach(input => input.addEventListener('focus', this.onInputFocus));

Answer 4

您必须使用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;
        }
    });
}

Answer 5

(ES5) 我使用 forEach 迭代 querySelectorAll 返回的集合，它运行良好：

document.querySelectorAll('your_selector').forEach(item => { /* do the job with item element */ });