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.