-
Ahora quiero mostrarles una cosa más que podrían hacer con un evento en un objeto.
-
Esta página web que hice, responde a la eterna pregunta:
-
¿Qué es lo que dice el chico "Oh Noes"?
-
O más específicamente, ¿cómo sonaría si pudieras oirlo?
-
Si presionas el ratón en el enlace, el navegador te llevará a un archivo mp3,
-
que se debería ejecutar en el navegador y responder esa pregunta ardiente.
-
Sin embargo, no quisiera que el usuario dejara esta página web.
-
Deberías poder escucharlo directamente en esta página.
-
Podemos hacer eso con JavaScript, ejecutando una etiqueta ""
-
tan pronto como el usuario presione el ratón en el enlace.
-
En primer lugar, vamos a almacenar el enlace en una variable.
-
'var ohnoesEl = document.getElementById("ohnoes");'
-
Ahora vamos a definir la función de tipo "callback".
-
Que va a ser una función muy interesante.
-
Así que en esta función "callback", queremos crear una etiqueta "" dinámicamente.
-
'var audioEl = document.createElement("audio");'
-
Y ésta es una etiqueta nueva disponible en los navegadores modernos.
-
Y luego "audio.src" es igual a..., y vamos a hacerla igual a
-
lo que tenemos aquí arriba en "href", la etiqueta "" es muy parecida a la etiqueta "".
-
Y luego también vamos a escribir: 'audioEl.autoplay = "true";'
-
que va a hacer que se ejecute tan pronto como la añadamos a la página.
-
Y finalmente, la añadimos a la página.
-
Y en realidad no importa dónde la ponga,
-
porque no la estamos viendo.
-
Así que ahora, cuando presionen el ratón, se creará un audio, se asignará la fuente,
-
se asignará el "autoplay" (autoejecutar), y se añadirá a la página.
-
Finalmente, nos aseguramos de que se llame al detector de eventos,
-
cuando se presione el ratón en el enlace.
-
'ohnoesEl.addEventListener("click",'...
-
... y luego sólo pasamos el nombre de la función.
-
Ok, ya sabes cuál es el acuerdo: pausa la guía paso a paso y pruébalo.
-
"tu-tu-tu"
-
¿Qué pasó?
-
Yo escuché ese sonido bajo y profundo del gruñido de "Oh Noes",
-
pero el enlace todavía se abrió en una ventana nueva.
-
Idealmente, una vez que el sonido se reproduce, el navegador no debería
-
tratar de mandar al usuario a navegar al enlace, porque ya lo escuchó.
-
La manera de hacer esto es diciéndole al navegador que cancele ese comportamiento predeterminado.
-
Ves que, por defecto, cuando un usuario presiona el ratón en un enlace,
-
el navegador envía al usuario a navegar a ese enlace.
-
Pero si redefinimos la forma en que el enlace funciona, en JavaScript,
-
muchas veces no queremos que el navegador nos mande a otro lado.
-
Podemos decirle que se detenga, usando un método en la propiedad "event",
-
llamado "preventDefault()".
-
Así que tenemos que referirnos a ese objeto de evento que nos pasan,
-
y luego aquí dentro escribimos: "e.preventDefault();".
-
Esto le dice al navegador que evite el comportamiento predeterminado
-
asociado a este evento.
-
Ahora, pausa la guía paso a paso, y prueba de nuevo.
-
Sólo escuchaste el sonido, ¿cierto?
-
Ésta es una experiencia para el usuario mucho más agradable.
-
Y eso es lo que se conoce como "mejora progresiva",
-
a partir de una página web como HTML con un comportamiento predeterminado del navegador,
-
pero luego mejorada con JavaScript para hacer una mejor experiencia.
-
A menudo querrás utilizar "preventDefault" cuando
-
estés adjuntando detectores de eventos al presionar el ratón en enlaces.
-
Y probablemente también te veas usándolo cuando proceses formularios,
-
debido a que el navegador tiene algunos comportamientos predeterminados en ese caso,
-
cuando los envías a un servidor.
-
Lo importante es mantener la experiencia del usuario en mente,
-
y si esa experiencia del usuario no es la óptima en tu página web,
-
encontrar la manera de mejorar.
-
Puede ser que no te enseñemos todo aquí,
-
pero en Internet hay miles de respuestas para ti.
