0:00:00.461,0:00:05.742
Ahora quiero mostrarles una cosa más que podrían hacer con un evento en un objeto.

0:00:05.742,0:00:09.936
Esta página web que hice, responde a la eterna pregunta:

0:00:09.936,0:00:12.150
¿Qué es lo que dice el chico "Oh Noes"?

0:00:12.150,0:00:16.599
O más específicamente, ¿cómo sonaría si pudieras oirlo?

0:00:16.599,0:00:20.589
Si presionas el ratón en el enlace, el navegador te llevará a un archivo mp3,

0:00:20.589,0:00:25.163
que se debería ejecutar en el navegador y responder esa pregunta ardiente.

0:00:25.163,0:00:30.009
Sin embargo, no quisiera que el usuario dejara esta página web.

0:00:30.009,0:00:33.445
Deberías poder escucharlo directamente en esta página.

0:00:33.445,0:00:37.891
Podemos hacer eso con JavaScript, ejecutando una etiqueta ""

0:00:37.891,0:00:40.957
tan pronto como el usuario presione el ratón en el enlace.

0:00:40.957,0:00:45.109
En primer lugar, vamos a almacenar el enlace en una variable.

0:00:45.109,0:00:55.178
'var ohnoesEl = document.getElementById("ohnoes");'

0:00:55.770,0:00:58.099
Ahora vamos a definir la función de tipo "callback".

0:00:58.099,0:01:03.735
Que va a ser una función muy interesante.

0:01:03.735,0:01:10.165
Así que en esta función "callback", queremos crear una etiqueta "" dinámicamente.

0:01:10.165,0:01:15.363
'var audioEl = document.createElement("audio");'

0:01:15.816,0:01:19.825
Y ésta es una etiqueta nueva disponible en los navegadores modernos.

0:01:19.825,0:01:26.104
Y luego "audio.src" es igual a..., y vamos a hacerla igual a

0:01:26.104,0:01:32.563
lo que tenemos aquí arriba en "href", la etiqueta "" es muy parecida a la etiqueta "".

0:01:32.563,0:01:37.335
Y luego también vamos a escribir: 'audioEl.autoplay = "true";'

0:01:37.335,0:01:40.333
que va a hacer que se ejecute tan pronto como la añadamos a la página.

0:01:40.333,0:01:42.953
Y finalmente, la añadimos a la página.

0:01:42.953,0:01:45.574
Y en realidad no importa dónde la ponga,

0:01:45.574,0:01:48.064
porque no la estamos viendo.

0:01:48.064,0:01:52.295
Así que ahora, cuando presionen el ratón, se creará un audio, se asignará la fuente,

0:01:52.295,0:01:55.387
se asignará el "autoplay" (autoejecutar), y se añadirá a la página.

0:01:55.387,0:01:59.444
Finalmente, nos aseguramos de que se llame al detector de eventos,

0:01:59.444,0:02:01.376
cuando se presione el ratón en el enlace.

0:02:01.376,0:02:08.143
'ohnoesEl.addEventListener("click",'...

0:02:08.283,0:02:12.951
... y luego sólo pasamos el nombre de la función.

0:02:12.951,0:02:17.385
Ok, ya sabes cuál es el acuerdo: pausa la guía paso a paso y pruébalo.

0:02:17.385,0:02:19.729
"tu-tu-tu"

0:02:19.729,0:02:21.110
¿Qué pasó?

0:02:21.110,0:02:26.337
Yo escuché ese sonido bajo y profundo del gruñido de "Oh Noes",

0:02:26.337,0:02:29.789
pero el enlace todavía se abrió en una ventana nueva.

0:02:29.789,0:02:33.476
Idealmente, una vez que el sonido se reproduce, el navegador no debería

0:02:33.476,0:02:37.548
tratar de mandar al usuario a navegar al enlace, porque ya lo escuchó.

0:02:37.548,0:02:42.920
La manera de hacer esto es diciéndole al navegador que cancele ese comportamiento predeterminado.

0:02:42.920,0:02:47.148
Ves que, por defecto, cuando un usuario presiona el ratón en un enlace,

0:02:47.148,0:02:50.321
el navegador envía al usuario a navegar a ese enlace.

0:02:50.321,0:02:54.226
Pero si redefinimos la forma en que el enlace funciona, en JavaScript,

0:02:54.226,0:02:58.004
muchas veces no queremos que el navegador nos mande a otro lado.

0:02:58.004,0:03:02.731
Podemos decirle que se detenga, usando un método en la propiedad "event",

0:03:02.731,0:03:05.299
llamado "preventDefault()".

0:03:05.299,0:03:09.897
Así que tenemos que referirnos a ese objeto de evento que nos pasan,

0:03:09.897,0:03:15.830
y luego aquí dentro escribimos: "e.preventDefault();".

0:03:15.830,0:03:19.420
Esto le dice al navegador que evite el comportamiento predeterminado

0:03:19.420,0:03:21.399
asociado a este evento.

0:03:21.399,0:03:25.995
Ahora, pausa la guía paso a paso, y prueba de nuevo.

0:03:25.995,0:03:28.385
Sólo escuchaste el sonido, ¿cierto?

0:03:28.385,0:03:30.949
Ésta es una experiencia para el usuario mucho más agradable.

0:03:30.949,0:03:34.959
Y eso es lo que se conoce como "mejora progresiva",

0:03:34.959,0:03:39.514
a partir de una página web como HTML con un comportamiento predeterminado del navegador,

0:03:39.514,0:03:44.650
pero luego mejorada con JavaScript para hacer una mejor experiencia.

0:03:44.650,0:03:48.361
A menudo querrás utilizar "preventDefault" cuando

0:03:48.361,0:03:50.445
estés adjuntando detectores de eventos al presionar el ratón en enlaces.

0:03:50.445,0:03:54.447
Y probablemente también te veas usándolo cuando proceses formularios,

0:03:54.447,0:03:57.485
debido a que el navegador tiene algunos comportamientos predeterminados en ese caso,

0:03:57.485,0:03:59.264
cuando los envías a un servidor.

0:03:59.264,0:04:02.640
Lo importante es mantener la experiencia del usuario en mente,

0:04:02.640,0:04:06.730
y si esa experiencia del usuario no es la óptima en tu página web,

0:04:06.730,0:04:08.953
encontrar la manera de mejorar.

0:04:08.953,0:04:11.366
Puede ser que no te enseñemos todo aquí,

0:04:11.366,0:04:15.499
pero en Internet hay miles de respuestas para ti.