一個類的事件監聽器？

Question

我有一個引用 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>

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

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

Answer 3

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

Answer 4

您可以為這些元素中的每一個分配一個類，並使用 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>