EventListener для класса?

Question

У меня есть EventListener, который ссылается на Id, и он работает хорошо, единственная проблема заключается в том, что у меня есть по крайней мере дюжина мест, где этот EventListener должен ссылаться, поэтому я не хочу иметь дюжину сценариев, которые все одинаковы, но имеют другой идентификатор. Есть ли способ иметь 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> 

Answer 1

Да, используя классы. Каждый элемент должен иметь общий класс. И с JQuery вы можете сделать так:

$(document).ready(function() { 
    $(".className").click(function (e) { 
    e.preventDefault(); 
    }); 
}); 

Получить более подробную информацию о $.click() и $.ready(). Как вы добавили jquery, я дал решение jQuery.

Использование ванили 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

Если ваш referrring в 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

Счастливого Coding

Answer 4

вы можете назначить класс к каждому из этих элементов и использовать цикл для перебора и место 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>