Recorrido del Evento

Es bueno que tengamos claro cual es el recorrido de un evento. Si un elemento y uno de sus padres tienen un controlador de eventos para el mismo tipo de evento, ¿ cual de ellos se ejecuta primero?

Algunos navegadores utilizan el event capturing, que lanza los listeners desde el padre mas alto hasta el elemento en cuestión. (outside -> in).

Otros navegadores prefieren el event bubbling, que lanza los listeners propagando hasta el mas alto de los padres. (inside -> out)

El event bubbling es el mas común de los sistemas.

Utilizando el tercer argumento de addEventListener(), useCapture, del que hablaba en el anterior post, podemos escoger entre event bubbling (false) o event capturing (true).

Para entender mejor lo del event bubbling pongamos de ejemplo el siguiente ejemplo:

<ul>
<li>Lorem ipsum dolor sit amet consectetuer.</li>
<li>Aenean commodo ligula eget dolor.</li>
<li>Aenean massa cum sociis natoque penatibus.</li>
</ul>

Si tenemos asociado un listener para el evento click para los <li> y otro para los <ul>, cuando hagamos click sobre una de los <li> tambien los estamos haciendo sobre la <ul>. Primero se ejecutara la funcion asociada al click del <li> y despues la funcion asociada al click del <ul>

Recorrido del Evento

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión /  Cambiar )

Google photo

Estás comentando usando tu cuenta de Google. Cerrar sesión /  Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión /  Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión /  Cambiar )

Conectando a %s