[英]EventListener for a class?
我有一个引用 Id 的 EventListener 并且它运行良好,唯一的问题是我至少有十几个地方需要引用这个 EventListener,所以我不想有十几个完全相同但具有不同 Id 的脚本. 有没有办法让 EventListener 引用一个我可以在我需要的所有地方使用的类。 谢谢
爪哇脚本:
document.getElementById("chartJump").addEventListener("click", function (e) { e.preventDefault() });
HTML:
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenuGraphOne">
<!--DROPDOWN MENU-->
<li role="presentation"><a role="menuitem" tabindex="-1" id="chartJumpOne" href="#graphOneChart">Chart</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" id="tableJumpOne" href="#graphOneData">Data</a></li>
</ul>
是的,使用类。 每个元素都应该有一个公共类。 使用 jQuery,您可以这样做:
$(document).ready(function () {
$(".className").click(function (e) {
e.preventDefault();
});
});
获取有关$.click()
和$.ready()
更多信息。 当您添加jquery 时,我已经给出了 jQuery 解决方案。
使用 vanilla JavaScript,您可以通过两种方式实现相同的功能:
对于旧浏览器:
window.onload = function () {
list = document.getElementsByClassName("className");
for (var i = 0; i < list.length; i++) {
list[i].addEventListener("click", function (e) {
e.preventDefault();
});
}
};
对于新浏览器:
window.onload = function () {
list = document.querySelectorAll(".className");
for (var i = 0; i < list.length; i++) {
list[i].addEventListener("click", function (e) {
e.preventDefault();
});
}
};
如果您不使用jQuery
,则可以使用querySelectorAll
:
var els = document.querySelectorAll(".chartJump");
for (var i = 0; i < els.length; i++) {
els[i].addEventListener("click", function (e) {
e.preventDefault()
eventHandler();
});
};
如果你已经jQuery
,你可以使用on
:
$(".chartJump").on('click', function () {
// Your code
});
如果您在脚本中引用了 jQuery 库,那么为什么要使用原始 JS 代码,这很难编写。
首先为所有元素添加一个类名,然后使用相同的类选择器附加一个事件侦听器,例如click
它
HTML代码:
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenuGraphOne">
<!--DROPDOWN MENU-->
<li role="presentation"><a role="menuitem" tabindex="-1" class='jumpChart' href="#graphOneChart">Chart</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" class='jumpChart' href="#graphOneData">Data</a></li>
JS代码:
$('.jumpChart').on('click',function(){
//handle the event here
});
有关更多信息,请参阅 jQuery 论坛: http : //api.jquery.com
您可以为这些元素中的每一个分配一个类,并使用 for 循环遍历并放置一个 eventListener。
var elements = document.querySelectorAll('.className');
for (i = 0; i < elements.length; ++i) {
elements[i].addEventListener('click', function() {
// Do something amazing
});
}
通过: http : //pencilscoop.com/2014/06/using-eventlisteners-on-multiple-elements
或者您可以单独将 onclick 添加到您的元素中
<a role="menuitem" tabindex="-1" href="#graphOneChart" onclick="function1()">Chart</a>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.