javascript - create - Obtenga detectores de eventos conectados al nodo mediante addEventListener

create event javascript

Question

Ya he visto estas preguntas:

• ¿Cómo encontrar detectores de eventos en un nodo DOM al depurar o desde el código JavaScript?
• ¿Puedo examinar y modificar mediante programación los controladores de eventos de Javascript en elementos html?
• Cómo depurar enlaces de eventos de JavaScript / jQuery con Firebug (o una herramienta similar)

sin embargo, ninguno de ellos responde cómo obtener una lista de oyentes de eventos conectados a un nodo mediante addEventListener , sin modificar el prototipo addEventListener antes de que se creen los detectores de eventos.

VisualEvent no muestra todos los detectores de eventos (iphone específicos) y quiero hacer esto (algo) programáticamente.

Answer 1

Chrome DevTools, Safari Inspector y Firebug son compatibles con getEventListeners(node) .

Answer 2

Como no existe una forma nativa de hacerlo, aquí hay una solución menos intrusiva que encontré (no agregue ningún método de prototipo "antiguo"):

var ListenerTracker=new function(){
    var is_active=false;
    // listener tracking datas
    var _elements_  =[];
    var _listeners_ =[];
    this.init=function(){
        if(!is_active){//avoid duplicate call
            intercep_events_listeners();
        }
        is_active=true;
    };
    // register individual element an returns its corresponding listeners
    var register_element=function(element){
        if(_elements_.indexOf(element)==-1){
            // NB : split by useCapture to make listener easier to find when removing
            var elt_listeners=[{/*useCapture=false*/},{/*useCapture=true*/}];
            _elements_.push(element);
            _listeners_.push(elt_listeners);
        }
        return _listeners_[_elements_.indexOf(element)];
    };
    var intercep_events_listeners = function(){
        // backup overrided methods
        var _super_={
            "addEventListener"      : HTMLElement.prototype.addEventListener,
            "removeEventListener"   : HTMLElement.prototype.removeEventListener
        };

        Element.prototype["addEventListener"]=function(type, listener, useCapture){
            var listeners=register_element(this);
            // add event before to avoid registering if an error is thrown
            _super_["addEventListener"].apply(this,arguments);
            // adapt to ''elt_listeners'' index
            useCapture=useCapture?1:0;

            if(!listeners[useCapture][type])listeners[useCapture][type]=[];
            listeners[useCapture][type].push(listener);
        };
        Element.prototype["removeEventListener"]=function(type, listener, useCapture){
            var listeners=register_element(this);
            // add event before to avoid registering if an error is thrown
            _super_["removeEventListener"].apply(this,arguments);
            // adapt to ''elt_listeners'' index
            useCapture=useCapture?1:0;
            if(!listeners[useCapture][type])return;
            var lid = listeners[useCapture][type].indexOf(listener);
            if(lid>-1)listeners[useCapture][type].splice(lid,1);
        };
        Element.prototype["getEventListeners"]=function(type){
            var listeners=register_element(this);
            // convert to listener datas list
            var result=[];
            for(var useCapture=0,list;list=listeners[useCapture];useCapture++){
                if(typeof(type)=="string"){// filtered by type
                    if(list[type]){
                        for(var id in list[type]){
                            result.push({"type":type,"listener":list[type][id],"useCapture":!!useCapture});
                        }
                    }
                }else{// all
                    for(var _type in list){
                        for(var id in list[_type]){
                            result.push({"type":_type,"listener":list[_type][id],"useCapture":!!useCapture});
                        }
                    }
                }
            }
            return result;
        };
    };
}();
ListenerTracker.init();

Answer 3

No puedes.

La única forma de obtener una lista de todos los detectores de eventos conectados a un nodo es interceptar la llamada de enlace del oyente.

DOM4 addEventListener

Dice

Agregue un detector de eventos a la lista asociada de oyentes de eventos con tipo configurado a tipo, oyente configurado a oyente y capturado a capturar, a menos que ya haya un oyente de eventos en esa lista con el mismo tipo, oyente y captura.

Lo que significa que un oyente de eventos se agrega a la "lista de oyentes de eventos". Eso es todo. No hay idea de lo que debería ser esta lista ni cómo debería accederla.

Answer 4

Puede obtener todos los eventos jQuery usando $ ._ data ($ (''[selector]'') [0], ''events''); cambia [selector] a lo que necesitas.

Hay un complemento que reúne todos los eventos conectados por jQuery llamado eventsReport.

También escribo mi propio complemento que hace esto con un mejor formato.

Pero de todos modos parece que no podemos reunir eventos agregados por el método addEventListener. Puede ser que podamos envolver la llamada addEventListener para almacenar eventos agregados después de nuestra llamada de enlace.

Parece la mejor forma de ver eventos agregados a un elemento con herramientas de desarrollo.

Pero no verá eventos delegados allí. Entonces, necesitamos jQuery eventsReport.

ACTUALIZACIÓN: AHORA PODEMOS ver eventos agregados por el método addEventListener VEA LA RESPUESTA CORRECTA A ESTA PREGUNTA.