添加 class 所针对的 onclick

Question

Rather than adding onClick to each and every link as below, is there a cleaner way to target all links (.tabs a) by adding a short script above or below, and how would this be coded? Thanks in advance for all help:)

<ul class="tabs">
    <li><a href="#all" onClick="window.scrollTo(0, 0);">All</a></li>
    <li><a href="#category-1" onClick="window.scrollTo(0, 0);">Category 1</a></li>
    <li><a href="#category-2" onClick="window.scrollTo(0, 0);">Category 2</a></li>
</ul>

Answer 1

You can use document.querySelectorAll to obtain all of the elements matching a selector and add event listeners to all of them.

 document.querySelectorAll('ul.tabs > li > a').forEach(a => a.addEventListener("click", e=>{ window.scrollTo(0, 0); }));

 ul.tabs { margin-top: 1000px; }

 <ul class="tabs"> <li><a href="#all">All</a></li> <li><a href="#category-1">Category 1</a></li> <li><a href="#category-2">Category 2</a></li> <li><span>Clicking me has no effect</span></li> </ul>

Alternatively, you can use event delegation by only adding a single event listener to the parent <ul> and checking the event's target to determine if it was an anchor tag.

 document.querySelector('ul.tabs').addEventListener("click", e=>{ if(e.target.matches("li > a")){ window.scrollTo(0, 0); } });

 ul.tabs { margin-top: 1000px; }

 <ul class="tabs"> <li><a href="#all">All</a></li> <li><a href="#category-1">Category 1</a></li> <li><a href="#category-2">Category 2</a></li> <li><span>Clicking me has no effect</span></li> </ul>

Answer 2

You can get the element with the class via querySelector and then iterate over the children

    function onClick() {
        window.scrollTo(0, 0);
    }
    var element = document.querySelector(".tabs");
    element.childNodes.forEach(function(node) {
        node.addEventListener("click", onClick);
    });

Answer 3

You can do something like this:

 <ul class="tabs"> <li><a href="#all">All</a></li> <li><a href="#category-1">Category 1</a></li> <li><a href="#category-2"">Category 2</a></li> </ul> <script> [...document.querySelectorAll('.tabs > li > a')].forEach(element => { element.addEventListener('click', () => { // window.scrollTo(0, 0) alert('Hello') }); }); </script>

You get all the elements with document.querySelectorAll('.tabs > li > a') and then for each elements you add an click event listener.

Answer 4

 // Class selector const elements = document.getElementsByClassName("clickMe"); // Function const fn = () => console.log('click'); // Loop for(let i = 0; i < elements.length; i++) { elements[i].addEventListener('click', fn, false); }

 <ul class="tabs"> <li><a data-myattribute="link1" href="#all" class="clickMe">All</a></li> <li><a data-myattribute="link2" href="#category-1" class="clickMe">Category 1</a></li> <li><a data-myattribute="link3" href="#category-2" class="clickMe">Category 2</a></li> </ul>