< Return to Video

Evitando el comportamiento predeterminado de eventos (Versión en Video)

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

more » « less
Video Language:
English
Duration:
04:17

Spanish, Mexican subtitles

Revisions