"El diseño es el embajador silencioso de tu marca"
- Paul Brand

Manejadores en Angular

Hace tiempo hablamos en un esta entrada como funcionan los manejadores de eventos en jquery y la manera mas rápida y eficiente de usarlos, los eventos se usan en cualquier aplicacion web y por supuesto no todas las webs usan jquery, evidentemente podemos escucharlos sin usar jquery usando la sintaxis que nos provee javascript pero lo habitual es usar algún tipo de framework o librería para ello y otra de las más conocidas y usadas es Angular.

Para que tengamos claro el concepto, un evento es algo que sucede en nuestra pagina, una acción como por ejemplo hacer click en un elemento, hacer scroll, redimensionar la ventana o pasar el puntero por encima de algo, etc…

El Handler o Manejador de eventos es el encargado de escucharlos, y por escuchar nos referimos a que esta pendiente de que sucedan para ejecutar el codigo que nosotros le hayamos puesto.

El otro elemento envuelto seria el Dispatch o el Disparador de eventos, este lo dispara, es decir fuerza su ejecución, ya que hay eventos creados por nosotros que no responden necesariamente a una acción que estemos haciendo sobre la pagina y que por tanto necesitan de ser ejecutados mediante esto.

Sin embargo el tema de los disparadores lo trataremos en futuros posts.

 

Como trata angular los handlers?

En angular no se definen mediante código js como veíamos con el ‘.on’ de jquery sino que son directivas, no quiere decir que las directivas sean handlers sino que una función de las directivas es escuchar eventos, hay unas directivas que valen para esto y otras que hacen otras funciones, como por ejemplo definir un controlador o un modelo de datos.

Las directivas son la forma en que extendemos nuestro código html declarando dentro de este lenguaje elementos que son reutilizables, esta es una de las filosofías hacia las que apunta la web moderna, el uso de web components.

Explicado asi parece un poco confuso, veamos un ejemplo práctico de cómo declaramos una directiva que haga de handler del evento click, supongamos que tenemos un div con la clase “pulsame”

Mientras que si no trabajamos con angular y tendríamos que referenciar ese manejador mediante código js de esta manera:

Con Angular se haría asi…

Como se ve, estamos respetando la definición que damos de lo que era una directiva, decíamos que extendía nuestro código html, y asi lo estamos haciendo ya que no existe un atributo ng-click en HTML5, y es reutilizable en cualquier otro elemento del código, pasándole de esta manera una función que definirá el comportamiento del elemento en este caso cuando hagas click sobre él.

En este caso por cierto estamos usando la directiva como un atributo pero también es posible usarla como un elemento, y luego pasarle variables en forma de atributos, pero no es el caso.

Asociadas al ratón tenemos estas directivas para escuchar eventos:

ng-dblclick – cuando hacemos doble click encima de un elemento aquí su doc.

ng-mousedown – cuando pulsamos un botón del ratón (permite distinguir cual)

ng-mouseup – cuando soltamos un botón del ratón (permite distinguir cual)

ng-mouseenter – se dispara cuando el mouse entra en el elemento, y no se volveria a lanzar a menos que saliera y vuelva a entrar

ng-mouseleave – se dispara cuando el mouse sale en el elemento, y no se volveria a lanzar a menos que entrara y vuelva a salir

ng-mousemove – cuando se mueva el ratón

ng-mouseover – al igual que el mouseenter se dispara cuando el mouse entra al elemento, se diferencia de el porque se sigue ejecutando mientras que se mueva dentro del elemento.

Además de estos existen otros eventos que no voy a explicar como keydown, keyup, keypress, submit, focus, blur, copy, cut y paste.

The following two tabs change content below.
Especialista en diseño web responsive, programador html5, css3, jquery, php y java.

Latest posts by Óscar Lijó (see all)