JavaScript添加点击事件监听器类
我有一个删除ID的列表视图。 我想添加一个监听器到一个特定的类的所有元素,并确认提醒。
我的问题是,这似乎只是将侦听器添加到它find的第一个类。 我试图使用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(); ?>
你应该使用querySelectorAll
。 它返回NodeList,但是querySelector
只返回find的第一个元素:
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
您才应该预防DefaultDefault。
还值得注意的是, return false/true
只对与onclick = function() {...}
绑定的事件处理程序有用。 对于addEventListening
你应该使用event.preventDefault()
。
演示: http : //jsfiddle.net/Rc7jL/3/
ES6版本
你可以通过使用Array.prototype.forEach迭代而不是for-loop来使它更简洁(更安全的闭环循环 ):
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和模板string 。
使用querySelectorAll
和for
循环的问题是,它为数组中的每个元素创build一个全新的事件处理程序。
有时候这正是你想要的。 但是,如果您有很多元素,创build一个事件处理程序并将其附加到容器元素可能会更有效。 然后可以使用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(); } } });
在这个例子中,我们只创build一个附加到body
元素的事件处理程序。 每当单击body
内部的元素, click
事件就会冒泡到我们的事件处理程序。
您必须使用querySelectorAll
因为您需要使用所述类select所有元素,因为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; } }); }