4

Si le asocié a un botón el evento on click ¿Cómo compruebo que ya lo tiene para evitar volver a asociarle el evento? por ejemplo, si tengo este código:

document.querySelector("#boton").addEventListener("click", () => {
  console.log("Hola");
});
<button id="boton">Click </button>

Una vez asociado el evento como puedo saber si ya eta asociado seleccionando el elemento con document.querySelector

5 respuestas 5

4

Buen Día...

El código que te presento a continuación enumera la cantidad de eventos que hay en el dom.

Aquí el código:

<script>
        function listAllEventListeners() {
            const allElements = Array.prototype.slice.call(document.querySelectorAll('*'));
            allElements.push(document);
            allElements.push(window);
          
            const types = [];
          
            for (let ev in window) {
              if (/^on/.test(ev)) types[types.length] = ev;
            }
          
            let elements = [];
            for (let i = 0; i < allElements.length; i++) {
              const currentElement = allElements[i];
              for (let j = 0; j < types.length; j++) {
                if (typeof currentElement[types[j]] === 'function') {
                  elements.push({
                    "node": currentElement,
                    "type": types[j],
                    "func": currentElement[types[j]].toString(),
                  });
                }
              }
            }
          
            return elements.sort(function(a,b) {
              return a.type.localeCompare(b.type);
            });
          }
          console.table(listAllEventListeners())
    </script>

Ahora bien, si solo necesitas saber de un elemento cambia el querySelectorAll por el document.getElementById

Array.prototype.slice.call(document.getElementById('boton'));
3

Seleciona el elemento con la consola de desarrollo, puedes abrir la consola y luego presionar el icono de la flecha que se encuentra arriba a la izquierda en chrome y despues debes seleccionar el elemento o puedes usar el atajo de Ctrl+shift+c para selecionar el elemento.

Despues ve a la pestaña de "Event Listener" o "Eventos"

A continuacion podras ver todos los elementos asociados a elemento selecionado.

En tu caso ve a los eventos de tipo "click" y busca el nombre del archivo donde esta escrito el codigo de tu evento.

2

Es un poco complicado trabajar con funciones anónimas al asignar eventos, si no tienes control sobre el momento en que los asignar, se pueden ir acumulando como en este ejemplo:

document.querySelector("#boton").addEventListener("click", () => {
  console.log("Hola");
});
// Se acumula al volver a asignar
document.querySelector("#boton").addEventListener("click", () => {
  console.log("Hola");
});
<button id="boton">Click </button>

Es mejor usar funciones con nombre que, aparte de evitar acumulación, también permite eliminar el evento:

// Declarar función con nombre
function btnClick(e) {
    console.log('Hola');
}

document.querySelector("#boton").addEventListener("click", btnClick);
// No se acumula al volver a asignar
document.querySelector("#boton").addEventListener("click", btnClick);

// Se puede dejar de escuchar el evento
function noClick(e) {
    document.querySelector("#boton").removeEventListener("click", btnClick);
    console.log('El primer botón ya no tiene evento');
}

document.querySelector("#boton2").addEventListener("click", noClick);
<button id="boton">Click </button>
<button id="boton2">No click</button>

1

Si entiendo bien la pregunta, querés saber que eventos se puede usar con este. Entonces simplemente asocia en consolo.log() al evento click y ya muestra una extensa lista:

document.querySelector("#boton").addEventListener("click", (e) => {
  // this.console.log(e);
  console.log(e)
});
<button id="boton">Click </button>

Pero si necesitas que el click actue solamente a éste botón, y no a los demás, entonces prueba el siguiente código.

En caso de que haya muchos botones con el mismo ID, recorre todos con querySelectorAll, y luego con this ya se le da lo que queremos hacer.

todos = document.querySelectorAll("#boton").forEach(function(este) {
 
  este.addEventListener('click', function() {

this.style.backgroundColor = "red";
console.log("coloreado");
  })
  
});
<button id="boton">Click </button>

1
  • Por favor, si te funciono la repuesta recuerda "ACEPTAR" para que otros Usuarios se beneficien de ella. Commented el 10 mar. 2022 a las 17:20
1

Mi respuesta llega un poco tarde, pero actualmente con las DevTools podemos ver eso.

Inspeccionas en el elemento que quieres analizar y luego te vienes a la pestaña "Procesadores de Eventos" en la misma barra que los "Estilos" y ahi podras ver los eventos.

Te muestro un ejemplo en el que podemos ver los eventos de tipo Click asociados a un elemento, y debajo todos los demás eventos de otros tipos, focus, focusIn, etc. introducir la descripción de la imagen aquí

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.