Manejadores de Eventos Javascript

Estas dos funciones sirven básicamente para lo mismo. Añadir un manejador de eventos a un objeto Web. Debido a las diferencias en el manejo de eventos y en el modelo DOM de Internet Explorer, este ah desarrollado métodos que hacen lo mismo pero de una manera distinta, como es el caso de este ejemplo.

En el modelo W3C, tenemos el método addEventListener(), a quien le debemos pasar tres parámetros al momento de ejecutar. Los que serían: evento, función y un booleano quien determinará en que momento el evento debe ser ejecutado (si al ser capturado o liberado).

elemento.addEventListener(‘click’, loQueEjecuta, false);

Podemos Agregar cuantos eventos queramos o cuantas funciones queremos que se ejecuten para un mismo evento. Incluso podemos entregar funciones anónimas.

elemento.addEventListener(‘click’, function() {

            lo que haya que hacer;

}, false);

En el modelo Microsoft, por otro lado, el método attackEvent(), cumple la anterior función. La forma y su uso es similar también.

elemento.addEventListener(‘onclick’, loQueEjecuta);

Las diferencias a la vista son el modo en el que invocan el evento (click / onclick) y que no hay forma de especificar en que momento se ejecuta el evento, siempre lo hace al momento de liberarse el evento (igual a poner ‘false’ en el modelo W3C).

Otra diferencia importante es que, en este caso ‘loQueEjecuta’ no es una instancia de la función sino una referencia a la misma. Por lo mismo, no es transparente el hecho de conocer quien esta gatillando el evento.

Y es AQUÍ donde se presenta el mayor problema. Ya que no podemos pasarle parámetros a una instancia de función

Por ejemplo:

Teniendo un elemento html, llamado ‘elemento’

<elemento id=”001” />

Y la función.


function loQueEjecuta(obj) {

            alert(obj.id);

}

elemento.attachEvent(‘onclick’, loQueEjecuta);

al no poder pasarle parámetros el elemento quedaría asi.

<elemento id=”001” onclick=”loQueEjecuta()” />

O en otro caso, teniendo la función:

function loQueEjecuta() {

            alert(this.id);

}

Aquí tampoco funciona, porque como ya dijimos, se crea una referencia a la función y no una copia de esta, así que la llave ‘this’ siempre en estos casos hará referencia al objeto ‘windows’ y no sirve.

Fuente, quirksmode.org