How to add one event listener for nested elements

Question

I have the HTML below:

<!DOCTYPE html>
        <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <meta charset="utf-8" />
            <title></title>
        </head>
        <body>
            <div>
                <section>
                    <a>first</a>
                    <a>second</a>
                </section>
            </div>
            <section>
                <a>third</a>
                <a>fourth</a>
            </section>
            <section>
                <div>
                    <a>fifth</a>
                    <a>sixth</a>
                </div>
            </section>
        <script src="ex-2-a.js"></script>
        <!--<script src="ex-2-b.js"></script>-->
        </body>
        </html>

I'm looking to add only one event listener to the whole document that would catch only 'a' tags that have a 'div' as ancestors. This means that if I click first, second, fifth and sixth I would get a message saying "cool".

Any ideas on that matter since there's no id and working with only tagnames?

well if you want one listener, than you need to look into event delegation. — epascarello
– epascarello, Commented May 21, 2018 at 16:23

YannB · Accepted Answer · 2018-05-22 07:08:19Z

1

Thanks to @Scott Marcus for helping out. I submitted the answer and it worked. I also found a new approach using .closest(). let me know your thoughts

document.addEventListener('click',(e)=>{
let currElm = e.target;
if (currElm.closest('div')) {
  console.log(currElm);
 }
});

answered May 22, 2018 at 7:08

YannB

831 gold badge2 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Scott Marcus · Accepted Answer · 2018-05-21 16:40:29Z

0

Using "event delegation" (setting an event handler on an element high up in the DOM tree and allowing events from elements lower in the tree to bubble up and be caught), we can set up just one event handler at the body level and then we can check the actual source of the bubbled event against a collection of elements that match your criteria.

See inline comments for more:

// Set the event listener at the <body> and wait for other
// events to bubble up to it.
document.body.addEventListener("click", function(evt){
  // Get an array of all the <a> elements that are descendants of <div> elements
  let matches = Array.prototype.slice.call(document.querySelectorAll("div a"));
  
  // Test to see if array contains the one that was clicked
  if(matches.includes(evt.target)){
    console.log("You clicked an <a> that is a descendant of a <div>!");
  }
});

<div>
  <section>
    <a>first</a>
    <a>second</a>
  </section>
</div>

<section>
  <a>third</a>
  <a>fourth</a>
</section>

<section>
  <div>
    <a>fifth</a>
    <a>sixth</a>
  </div>
</section>

edited May 21, 2018 at 16:40

answered May 21, 2018 at 16:25

Scott Marcus

66k6 gold badges54 silver badges81 bronze badges

5 Comments

Scott Marcus Over a year ago

@YannB Actually, I just thought of a more simplified approach. I will update the answer.

YannB Over a year ago

document.addEventListener('click',(e)=>{ let divA = document.querySelectorAll('div a'); divA.forEach((evt)=>{ if (evt === e.target) { console.log(e.target); } }) });

YannB Over a year ago

here's what I did

Scott Marcus Over a year ago

@YannB See updated answer. We don't even need the loop.

YannB Over a year ago

Ohh wow I didn't even know about the include. Thanks a bunch!

Collectives™ on Stack Overflow

How to add one event listener for nested elements

2 Answers 2

Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related