Question

我有一个list id的列表视图。我想为具有特定类的所有元素添加一个监听器并执行确认警报。

我的问题是，这似乎只是将侦听器添加到它找到的第一个类中。我试图使用querySelectorAll，但它不起作用

 <script>
        var deleteLink = document.querySelector('.delete');

        deleteLink.addEventListener('click', function(event) {
         event.preventDefault();

         var choice = confirm("sure u want to delete?");
            if (choice) {
                 return true;
             }
            });
    </script>

列表：

<?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时阻止默认。

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

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

ES6版本

使用closure-in-loop wise迭代而不是for循环，可以使它更清晰（更安全Array.prototype.forEach）：

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();
        }
    });
});

<子> 上面的示例使用ES2015标准中的Array.from和template strings。

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 */ });

Answer 6

我发现使用如下所示的内容更方便：

document.querySelector('*').addEventListener('click',function(event){

    if( event.target.tagName != "IMG"){
        return;
    }

    // HANDLE CLICK ON IMAGES HERE
});

javascript将click事件监听器添加到类中

6 个答案: