Eventos

Cada acción (click, change, …) que ocurre en el navegador es comunicada (a quien quiera escuchar) en forma de evento Desde Javascript podemos escuchar estos eventos y engancharle una función (event handler) que se ejecutará cuando ocurra este evento

Events

Cuando hacemos click en un link (a), tambien hacemos click en su contenedor (li,ul), en el body y en ultima instancia en el document. Esto es lo que se llama la propagación del evento

Capturando eventos

function callback(evt) {
    // prep work
    evt = evt || window.event;
    var target = (typeof evt.target !== 'undefined') ? evt.target :
    evt.srcElement;

    // actual callback work
    console.log(target.nodeName);
}
// start listening for click events
if (document.addEventListener){ // FF
    document.addEventListener('click', callback, false);
} else if (document.attachEvent){ // IE
    document.attachEvent('onclick', callback);
} else {
    document.onclick = callback;
}

Modelo Tradicional

Podemos capturar eventos con el modelo tradicional

Este modelo consiste en asignar una función a la propiedad onclick, onchange,... del elemento del DOM 

<button onclick="myFunction()">Click me</button>
<button onclick="document.bgColor='lightgreen'">Click me</button>
<button onclick="getElementById('demo').innerHTML=Date()">What is the time?</button>

<A HREF="#" onClick="alert('Hello out there!')";>Some Text</A>

window.onclick = myFunction;
// If the user clicks in the window, set the background color of <body> to yellow
function myFunction() {
    document.getElementsByTagName("BODY")[0].style.backgroundColor = "yellow";
}

Con este metodo sólo podemos asignar UNA funcion a cada evento
Este metodo funciona igual en TODOS los navegadores

Modelo Avanzado

Tambien podemos capturar eventos con el modelo avanzado

Con este metodo podemos asignar varias funciones a un mismo evento

Este modelo se aplica distinto según el navegador

Para enganchar/desenganchar una funcion a un evento con este modelo se utiliza:

Le pasamos 2 parametros:

1. _Tipo de Evento_ : `click`, `change`,...
2. _Funcion a ejecutar_ (_handler_, _callback_) : Recibe un objeto `e` con info sobre el evento  
    - En `e.target` tenemos el [elemento que lanzó el evento](http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-Event)

Deteniendo el flujo de los eventos

Algunos elementos tienen un comportamiento por defecto (por ejemplo al hacer click sobre un link nos lleva a su URL).

Esta acción por defecto se ejecuta al final (si tenemos otras funciones asignadas al evento)

Para desactivar la acción por defecto utilizamos el metodo e.preventDefault(). En IE pondriamos a false la propiedad returnValue.aspx) de window.event

Podemos detener la propagacion del evento con el metodo e.stopPropagation()
Cuando la función asignada al evento devuelve false se aplica automaticamente e.preventDefault() y e.stopPropagation()

Delegación de eventos

Aprovechando el bubbling y la deteccion del target podemos optimizar (en algunos casos) nuestra gestión de eventos con la delegación de eventos

Para el caso en que tengamos que capturar los eventos de muchos elementos (por ejemplo los clicks en celdas de una tabla), podemos capturar el evento de su contenedor (la tabla) y detectar luego cual de sus hijos (qué celda) provocó el evento,

Las principales ventajas de este sistema son:

  • Hay muchas menos definiciones de eventos: menos espacio en memoria y mayor performance
  • No hay que re-capturar los eventos de los elementos añadidos dinamicamente

Eventos con jQuery

Con jQuery podemos realizar nuestra gestion de eventos sin tener que preocuparnos de las diferencias entre navegadores:

$().on() y $().off()

El $().bind()/$().unbind() cross-functional and cross-browsing

.on( events [, selector ] [, data ], handler )
.off( events [, selector ] [, handler ] )

El handler recibe un objeto event propio de jQuery

Los tipos de eventos que podemos capturar son blur, focus, focusin, focusout, load, resize, scroll, unload, click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress, keyup, error

Tambien podemos crearnos nuestros propios tipos de eventos

$().trigger()

Nos permite ejecutar todos los handlers asociados a un evento

.trigger( eventType, extraParameters )

$().toggle()

Adjunta varias funciones a un elemento que seran ejecutadas en sucesivos clicks

.toggle( handler(eventObject), handler(eventObject), [ handler(eventObject) ] )

event.preventDefault()

El e.preventDefault cross-browsing

event.stopPropagation()

El e.stopPropagation cross-browsing

event.stopImmediatePropagation()

Además de hacer e.stopPropagation cross-browsing, detiene el resto de handlers asociados al mismo evento

event.target

El e.target (elemento que provocó el evento) cross-browsing

event.type

El tipo de evento lanzado

results matching ""

    No results matching ""