Contenido principal
Curso: Programación de computadoras > Unidad 7
Lección 5: Eventos del DOM con jQuery- Agregar detectores de eventos con jQuery
- Desafío: clics en los cocodrilos
- Usar propiedades de eventos en jQuery
- Desafío: haz un dálmata
- ¿Qué eventos y propiedades del DOM existen?
- Revisar la disponibilidad del DOM con jQuery
- Revisión: eventos del DOM en jQuery
- Proyecto: cambio de escena
© 2024 Khan AcademyTérminos de usoPolítica de privacidadAviso de cookies
Revisión: eventos del DOM en jQuery
Agregar un detector de eventos
Puedes agregar un detector de eventos al usar
on()
: $("#save-button").on("click", function() {
// manejar evento de clic
});
Si necesitas acceder a los detalles acerca del evento, puedes encontrarlos en el objeto de evento de jQuery que se le pasa a la función callback:
$("#face-pic").on("click", function(event) {
var mouseX = event.pageX;
var mouseY = event.pageY;
});
Desencadenar eventos
Puedes desencadenar un evento manualmente en un objeto desde tu JavaScript usando trigger:
$("#save-button").trigger("click");
Eso puede ser útil cuando estés probando nueva funcionalidad o cuando quieras que cierto código se ejecute tanto cuando la página cargue como después de un evento en particular.
Revisar la disponibilidad del DOM
Si quieres estar seguro de que el navegador no ejecute tu código JS hasta que el DOM esté completamente cargado y listo, entonces puedes pasar tu código a
ready()
: $(document).ready(function() {
$("h1").text("¿Están listos para esto?");
});
Una versión más corta de eso es pasarle tu código a la función jQuery:
$(function() {
$("h1").text("¿Están listos para esto?");
});
Sin embargo, ese código no es tan legible como la versión larga, así que recomendamos usar la función
ready()
.Observa que si incluyes tu JS en una etiqueta de
<script>
hasta abajo de la página, entonces tu DOM debe estar totalmente listo para cuando el navegador ejecute tu JS. Sin embargo, si quieres estar doblemente seguro, entonces siempre puedes escoger revisar la disponibilidad del DOM.Mas técnicas de eventos
Para un resumen más extenso y una inmersión más profunda en los eventos de jQuery, lee los Fundamentos de Eventos de jQuery en su documentación.
¿Quieres unirte a la conversación?
Sin publicaciones aún.