Disparar un evento asignado con Event.observe

arathael · #1 (**permalink**) 04/03/2008, 03:23

Saludos banda...

Ya son 3 y media de la mañana y mi ardilla ya está bien dormida... espero que me puedan ayudar con esto..

Estoy desarrollando una aplicación web implementando Prototype 1.5.1 y tengo varios event observers asignados a varios botones..

Por ejemplo:

Código:

Event.observe('menu_1', 'click', function(event) {
     // algo
});

En teoría este modelo del asignación de observadores de evento es el aconsejado por el DOM... todos pasamos por el javascript obtrusivo y después por el no-obstrusivo pero asignando funciones a los eventos directamente... me agarró la maña de hacer esto bien y ya me atoré

Aquí la duda es esta: ¿Cómo puedo disparar programáticamente este evento?

Si hubiera asignado mi funcion de esta manera:

Código:

$(menu_1').onclick = function() {
    // algo
}

Bien podría hacer esto:

Código:

$('menu_1').onclick()

y se dispararía mi evento perfectamente... pero al haberlo asignado a un event listener no tengo la opción de llamarlo así pues la función onclick() NO EXISTE!!

Hasta donde me he informado (san Google), esto no puede hacerse debido a la distinta implementación del DOM en los navegadores (una vez más..) puesto que Internet Explorer simula el accionamiento del evento con fireEvent y Geckos lo simulan con dispatchEvent ... y mi ardilla murió entonces...

Si alguien tiene la respuesta le voy a agradecer muchísimo...

Gracias..

Panino5001 · #2 (**permalink**) 04/03/2008, 05:24

Antes de nada: lamento lo de tu ardilla.
No uso esa librería, de manera que no sé cómo maneja los eventos. Pero te digo que la manera de asignarlos con DOM es esta:

Código PHP:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>test</title>
<script>
function addEvent(obj, evType, fn, useCapture){
 
 if (obj.addEventListener){
    obj.addEventListener(evType, fn, useCapture);
    
  } else if (obj.attachEvent){
    obj.attachEvent("on"+evType, fn);
   
  } else {
   obj['on'+evType]=fn;
  }
}
function decirHola(){
alert('hola!');
}
window.onload=function(){
    addEvent(document.getElementById('pp'), 'click', decirHola, false);
}
</script>
</head>

<body>
<div id="pp">click</div>
</body>
</html>

La función addEvent comprueba si es posible asignar el evento con addEventListener para navegadores serios, si no intenta asignarlo con attachEvent (para Explorer), y si no puede asignarlo de ninguna de las dos maneras, asigna el evento de la manera tradicional.
Lo que supongo que hace tu librería, además de aplicar los eventos de esa misma manera, es guardar en un array los eventos asignados a cada objeto, para luego, usando el evento onunload de window, eliminar esa asignación para prevenir fugas de memoria en Explorer. Pero dependiendo de tu aplicación, es muy probable que esa precaución no sea necesaaria.

arathael · #3 (**permalink**) 04/03/2008, 13:02

Saludos..

Si, bien.. ahora ya tenemos un alias de la función para registrar eventos.. básicamente Event.observe() estandariza el registro de eventos al nivel de DOM (mas o menos lo que tu función hace pero optimizando memoria)..

La pregunta de los 64, tal vez aquí no me entendiste muy bien... es que necesito DISPARAR un evento.. simularlo.. hacer que mediante una línea de código javascript se disparen todos los eventos asociados a mi evento click del elemento..

Saludos de nuevo y gracias...

Panino5001 · #4 (**permalink**) 04/03/2008, 13:49

Bueno, la solución para eso creo que tu librería ya te la aporta: registra en un vector todas las funciones y todos los eventos que las disparan seguramente, de manera que tendrás que recorrer ese vector, determinar cuál es la función que te interesa y luego llamarla de esta manera (call) o con apply:

Código PHP:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>test</title>
<script>
function addEvent(obj, evType, fn, useCapture){
 
 if (obj.addEventListener){
    obj.addEventListener(evType, fn, useCapture);
    
  } else if (obj.attachEvent){
    obj.attachEvent("on"+evType, fn);
   
  } else {
   obj['on'+evType]=fn;
  }
}
function decirHola(){
alert('hola!');
}
function simular(obj){
decirHola.call(obj)
}
window.onload=function(){
    addEvent(document.getElementById('pp'), 'click', decirHola, false);
    simular(document.getElementById('pp'));
}
</script>
</head>

<body>
<div id="pp">click</div>
</body>
</html>

arathael · #5 (**permalink**) 04/03/2008, 14:32

Pero, en caso de que quiera disparar todos los eventos asociados a ese evento.. de lo contrario tendría

Ya se que hay muchos workarounds... pero por ejemplo en este caso estoy utilizando funciónes anónimas..

Debería de haber algún método como obj.triggerEvent('click') o obj.fireEvent('click')... por default en el DOM.

Seguiré investigando.. en todo caso tendré que extender el objeto Event de Prototype para hacer alguna función que recorra la matriz de listeners y simule el evento

Gracias por el último aproach..

derkenuke · #6 (**permalink**) 04/03/2008, 15:49

Hola arathael y Panino:

He buscado, y aunque me ha costado encontrarlo bastante he dado más o menos con lo que se pide en el primer post:

Código PHP:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>test</title>

 
 
<script>

function addEvent(obj, evType, fn, useCapture){

 

 if (obj.addEventListener){

    obj.addEventListener(evType, fn, useCapture);

    

  } else if (obj.attachEvent){

    obj.attachEvent("on"+evType, fn);

   

  } else {

   obj['on'+evType]=fn;

  }

}

function hablar(e) { 

    // Lo único que hago es tener una lista de propiedades, y si el objeto e posee las propiedades de la lista se alertan.

    var s = '', wantedprops=',type,target,currentTarget,bubbles,cancelable,windowObject,detail,screenX,screenY,clientX,clientY,ctrlKey,altKey,shiftKey,metaKey,button,relatedTarget,';

    for(p in e) {

        if(wantedprops.indexOf(','+p+',')+1) {

            s+='\n'+p+': '+((typeof(e[p])=='object')?'The \"A\" element':e[p]);

        }

    }

    alert('Event fired:\n'+s+'\nThere may be more, but I have not included all of it.'); 

}

 
 
window.onload=function() {

    // Coloco el evento click

    addEvent(document.getElementById('pp'), 'click', hablar, false);

    // Lo lanzo forzosamente

    if( document.fireEvent ) {                            // IE

        document.getElementById('pp').fireEvent("onclick");

    }

    else if( document.dispatchEvent ) {                    // estándar

        var evObj = document.createEvent('MouseEvents');                                // creamos el evento de tipo MouseEvents

        evObj.initMouseEvent( 'click', true, true, window, 1, 12, 345, 7, 220, false, false, true, false, 0, null );    // le damos características

        document.getElementById('pp').dispatchEvent(evObj); 

    }

    else

        alert("No puedo lanzar evento");

}

</script>

 
 
</head>

 
<body>

<div id="pp">click</div>

</body>

</html>

Ésto yo no lo conocía (tampoco he tenido que usarlo). Está sacado de aqui. Es un sitio interesantillo, cuenta bastantes cosas nuevas para mi.

Bueno, ahí está mi aporte, y funciona en IE y FF.

Un saludo

Panino5001 · #7 (**permalink**) 04/03/2008, 16:40

Muy buen aporte!

En Ópera también funciona.

derkenuke · #8 (**permalink**) 04/03/2008, 17:40

Está bien saber que funciona en Opera

Ahora me pregunto si es posible forzar un click en un enlace por ejemplo, lo he intentado por el método que he posteado, pero sólo se lanza la función a la que está asignada el evento click, y no el click en sí.

Saludos.