Estoy tratando de agregar un detector de eventos a varios elementos que creé antes en mi secuencia de comandos.
He probado ese método primero:
document.body.addEventListener('click', function (event) {
if (event.target.class === "deleteCommentButton"){
deleteComment();
}
})
Pero parece que no funciona, así que ahora estoy tratando de hacerlo con este método, que parece ser mejor:
const addEventTobutton = () => {
document.querySelectorAll('.deleteCommentButton').addEventListener('click', deleteComment);
document.querySelectorAll('.modifyCommentButton').addEventListener('click', modifyComment);
}
¿Alguien tiene una explicación para que entienda por qué mi código no funciona?
Gracias
en su primer código, está agregando un detector de eventos al cuerpo del documento, en lugar de su elemento. no es la forma ideal de crear un detector de eventos, ya que es bastante ineficiente. en su lugar, agregue el oyente al elemento en el que desea detectar el evento.
const newElement = document.createElement( 'div' );
newElement.addEventListener( 'click', () => {} );
además de eso, para detectar la clase de un elemento, debe usar classList.contains()
if ( newElement.classList.contains( 'deleteCommentButton' ) ) {
QuerySelectorAll es una matriz y, por lo tanto, no pude agregarle un evento. Necesito hacer un bucle con algo como:
arrayDeleteButton.forEach(deleteBtn => {
deleteBtn.addEventListener('click', deleteComment)
});
arrayModifyButton.forEach(modifyBtn => {
modifyBtn.addEventListener('click', modifyComment);
})
¿Es esta una solución mejor que la que ustedes propusieron o debo seguir su camino?
La respuesta es fácil, debe usar className en lugar de class para el primer enfoque de trabajo.
Eso dará todas las clases de un elemento.
para eso puedes usar
event.target.className.contains("deleteCommentButton")