<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"/> <title>Events: Task 3</title> <style> p { color: purple; margin: 0.5em 0; } * { box-sizing: border-box; } button { display: block; margin: 20px 0 20px 20px; } .button-bar { padding: 20px 0; } </style> <link rel="stylesheet" href="../styles.css" /> </head> <body> <section class="preview"> </section> <div class="button-bar"> <button data-color="red">Red</button> <button data-color="yellow">Yellow</button> <button data-color="green">Green</button> <button data-color="purple">Purple</button> </div> <script> const buttonBar = document.querySelector('.button-bar'); // Add your code here let btn = document.querySelector('button'); btn.addEventListener('click', (e) => { console.log(e.target.getAttribute('data-color')); }); </script> </body> </html>en esto, hay varios elementos de botón, pero cuando agrego un detector de eventos al botón cada vez que se hace clic, muestra su valor de color de datos, pero el evento solo se activa para el primer botón, no para otros. Si alguien pudiera decir por qué se está comportando así sería de gran ayuda gracias.
En lugar de adjuntar un oyente a cada botón, agregue uno al contenedor. Al usar la delegación de eventos , puede capturar el evento del elemento en el que se hizo clic a medida que aparece en el DOM y registrar su color.
const buttonBar = document.querySelector('.button-bar'); buttonBar.addEventListener('click', handleClick, false); function handleClick(e) { // Get the nodeName, and color from // dataset of the clicked element const { nodeName, dataset: { color = 'none' } } = e.target; // If the clicked element is a button // log the colour if (nodeName === 'BUTTON') { console.log(color); } } p { color: purple; margin: 0.5em 0; } * { box-sizing: border-box; } button { display: block; margin: 20px 0 20px 20px; } .button-bar { padding: 20px 0; } <div class="button-bar"> <button data-color="red">Red</button> <button data-color="yellow">Yellow</button> <button>Empty</button> <button data-color="green">Green</button> <button data-color="purple">Purple</button> </div>