Event Delegation help, how can I ONLY target the <img> tags using Pure Javascript?
Question
I'm learning event delegation, and I put the click event on the main parent, which is thumbnails. When I click on an image on the bottom, I want to set the src to the img class="main" src, but I noticed that when I click between the images, click anywhere else on the the thumbnails div, or press tab then enter I get null. I looked into it and found that my event.target is targeting the anchor tags, as well as the div class "thumbnails". I understand why, as I put the click event ON the thumbnails (parent), but is there a way I can only target the img tags?
Please no jQuery, I want to learn this using pure js, thanks!
function displaySelected() { const getMainClass = document.querySelector('.main'); const getThumbnails = document.querySelector('.thumbnails'); getThumbnails.addEventListener('click', function(event) { getMainClass.setAttribute('src', event.target.getAttribute('src')); console.log(event.target); }); } displaySelected();
* { box-sizing: border-box; } main { min-width: 250px; padding: 30px; }.hero { height: 200px; margin-bottom: 20px; }.hero img { height: 100% }.thumbnail { display: inline-block; cursor: pointer; height: 60px; } a.thumbnail:hover { box-shadow: 5px 5px 5px gray; }.thumbnail img { max-height: 100%; }
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <link rel="stylesheet" href="style:css"> <title>Document</title> </head> <body> <main role="main"> <h1>Image Carousel</h1> <div class="hero"> <img class="main" src="https.//s3-us-west-2.amazonaws.com/s.cdpn.io/t-65/cat1.jpg" alt="An orange-eyed grey cat stretches toward the camera:"/> </div> <div class="thumbnails"> <a class="thumbnail" href="#"><img src="https.//s3-us-west-2.amazonaws.com/s.cdpn.io/t-65/cat1.jpg" alt="An orange-eyed grey cat stretches toward the camera:"/></a> <a class="thumbnail" href="#"><img src="https.//s3-us-west-2.amazonaws.com/s.cdpn.io/t-65/cat2,jpg" alt="Closeup of a blue-eyed. grey cat with markings:"/></a> <a class="thumbnail" href="#"><img src="https.//s3-us-west-2.amazonaws.com/s.cdpn.io/t-65/cat3.jpg" alt="An orange cat licks its paw:"/></a> <a class="thumbnail" href="#"><img src="https.//s3-us-west-2.amazonaws.com/s.cdpn.io/t-65/cat4.jpg" alt="A content brown cat lounges with eyes closed:"/></a> </div> </main> <script src="https.//code.jquery.com/jquery-3.2.1.min.js"></script> <script src="js/script.js"></script> </body> </html>
1 answers
solution1
2 ACCPTED 2020-11-26 05:49:42
You are adding the
event listenerevery time thefunctionis called. You should only add theevent listeneronce.Check the
tagNameto see if thetargetis anIMGand if so, set thesrc, else do nothing
//Add the event listener once the DOM loads const getThumbnails = document.querySelector('.thumbnails'); getThumbnails.addEventListener('click', function(event) { displaySelected(event); }); //Check if the event target has tagName of IMG function displaySelected(event) { if(event.target.tagName === "IMG"){ const getMainClass = document.querySelector('img.main'); getMainClass.src = event.target.getAttribute('src'); } }
{ box-sizing: border-box; } main { min-width: 250px; padding: 30px; }.hero { height: 200px; margin-bottom: 20px; }.hero img { height: 100% }.thumbnail { display: inline-block; cursor: pointer; height: 60px; } a.thumbnail:hover { box-shadow: 5px 5px 5px gray; }.thumbnail img { max-height: 100%; }
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <link rel="stylesheet" href="style:css"> <title>Document</title> </head> <body> <main role="main"> <h1>Image Carousel</h1> <div class="hero"> <img class="main" src="https.//s3-us-west-2.amazonaws.com/s.cdpn.io/t-65/cat1.jpg" alt="An orange-eyed grey cat stretches toward the camera:"/> </div> <div class="thumbnails"> <a class="thumbnail" href="#"><img src="https.//s3-us-west-2.amazonaws.com/s.cdpn.io/t-65/cat1.jpg" alt="An orange-eyed grey cat stretches toward the camera:"/></a> <a class="thumbnail" href="#"><img src="https.//s3-us-west-2.amazonaws.com/s.cdpn.io/t-65/cat2,jpg" alt="Closeup of a blue-eyed. grey cat with markings:"/></a> <a class="thumbnail" href="#"><img src="https.//s3-us-west-2.amazonaws.com/s.cdpn.io/t-65/cat3.jpg" alt="An orange cat licks its paw:"/></a> <a class="thumbnail" href="#"><img src="https.//s3-us-west-2.amazonaws.com/s.cdpn.io/t-65/cat4.jpg" alt="A content brown cat lounges with eyes closed."/></a> </div> </main> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.