类的事件监听器？答案

【问题标题】：EventListener for a class?类的事件监听器？
【发布时间】：2015-06-19 13:31:13
【问题描述】：

我有一个引用 Id 的 EventListener，它运行良好，唯一的问题是我至少有十几个这个 EventListener 需要引用的地方，所以我不想有十几个相同但有的脚本一个不同的 ID。有没有办法让 EventListener 引用一个我可以在我需要的所有地方使用的类。谢谢

JAVASCRIPT：

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>

【问题讨论】：

标签： javascript jquery html class addeventlistener

【解决方案1】：

是的，使用类。每个元素都应该有一个公共类。使用 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 答案对我不起作用，但我使用了新的浏览器 javascript。谢谢！
@PraveenKumar querySelectorAll 比 getElementsByClassName 有更好的浏览器支持。虽然我建议getElementsByClassName可能更好用，考虑到他只是匹配类。
@PraveenKumar 如果您单击该页面上的“显示全部”按钮，您会看到不幸的是它们不是。这并不奇怪，但这些天没有人关心 8，更不用说 7

【解决方案2】：

如果你不使用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
});

【讨论】：

【解决方案3】：

您可以为这些元素中的每一个分配一个类，并使用 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>

【讨论】：

【解决方案4】：

如果您在脚本中引用 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

【讨论】：