Contenido principal
Curso: Programación de computadoras > Unidad 6
Lección 5: Eventos del DOM- Hacer páginas web interactivas con eventos
- Agregar detectores de eventos
- Desafío: acaricia al gato
- Tipos de eventos del DOM
- Usar las propiedades del evento
- Desafío: bigote gatuno
- Procesar formularios con eventos
- Desafío: Mad Libs
- Evitar el comportamiento predeterminado de eventos
- Resumen: eventos del DOM
© 2024 Khan AcademyTérminos de usoPolítica de privacidadAviso de cookies
Resumen: eventos del DOM
Agregar detectores de eventos
Para asegurarte de que el navegador llame a una función particular cuando ocurre un evento en un elemento, debes utilizar
document.addEventListener:var buttonEl = document.getElementById("clicker");
var onButtonClick = function() {
console.log("Oh vaya vaya, hiciste clic sobre mí");
};
buttonEl.addEventListener("click", onButtonClick);Puedes pasar muchas cadenas válidas como el primer argumento, consulta el artículo de tipos de eventos.
Si quieres información acerca del evento que ocurrió, puedes ver el objeto de evento que el navegador le pasa a la función callback:
var faceEl = document.getElementById("face");
var onFaceClick = function(e) {
console.log("Hiciste clic en " + e.clientX + " , " + e.clientY);
};
faceEl.addEventListener("click", onFaceClick);Hay muchas propiedades en el objeto de evento, puedes ver una lista completa aquí.
Si estás anulando el comportamiento de hacer clic en un vínculo o el de enviar un formulario, quizá quieras llamar a
event.preventDefault() para evitar el comportamiento predeterminado del navegador.Quitar detectores de eventos
Si ya no necesitas un detector de eventos en particular, lo puedes quitar por medio de
removeEventListener:var faceEl = document.getElementById("face");
var onFaceClick = function(e) {
console.log("Hiciste clic en " + e.clientX + " , " + e.clientY);
};
faceEl.addEventListener("click", onFaceClick);
// después...
faceEl.removeEventListener("click", onFaceClick);¿Quieres unirte a la conversación?
¿Alguien entendió bien lo de la "e" dentro de la función?(6 votos)
Buenas, establecer e dentro de la función lo que te permite es tener acceso al evento producido como objeto. Puedes acceder a sus propiedades y demás información simplemente con e.[propiedad[.
Saludos.(8 votos)
el removedor de eventos (removeListener) es para cuando solo necesitas que un evento se ejecute solo un numero determinado de veces ?(4 votos)- O si antes se hace algo que hace innecesario/inconveniente que se detecte.
Es decir que si por la razón que sea a partir de cierto momento no quieres que el usuario/usuaria pueda hacer algo lo desactivas.
Me ha salido enrevesado pero más o menos.(3 votos)