sirve - javascript onload page

¿Es posible atrapar programáticamente todos los eventos en la página en el navegador?

Question

Primero que nada, aquí hay una lista de tipos de eventos que están definidos por los estándares W3C. (Esta lista se basa en los atributos onevent definidos en el estándar HTML5. Supongo que hay docenas de otros tipos de eventos, pero esta lista es lo suficientemente larga como es).

• abortar
• afterprint
• anteprint
• beforeunload
• difuminar
• Poder jugar
• canplaythrough
• cambio
• hacer clic
• Menú de contexto
• dupdo
• cuecambiar
• cortar
• dblclick
• DOMContentLoaded
• arrastrar
• dragend
• dragenter
• dragleave
• dragover
• dragstart
• soltar
• duracióncambiar
• vaciado
• terminado
• error
• atención
• concéntrate en
• focusout
• formacambiar
• forminput
• hashchange
• entrada
• inválido
• keydown
• presionar tecla
• tecla Arriba
• carga
• loadeddata
• loadedmetadata
• loadstart
• mensaje
• ratón hacia abajo
• mouseenter
• mouseleave
• movimiento del ratón
• mouseout
• ratón sobre
• mouseup
• rueda de ratón
• desconectado
• en línea
• página oculta
• pageshow
• pegar
• pausa
• jugar
• jugando
• popstate
• Progreso
• tasa de cambio
• Readystatecambiar
• rehacer
• Reiniciar
• redimensionar
• voluta
• buscado
• buscando
• seleccionar
• espectáculo
• estancado
• almacenamiento
• enviar
• suspender
• timeupdate
• deshacer
• descargar
• volumencambiar
• esperando

Ahora, ¿es posible definir un controlador de eventos global que se invoque cuando ocurra un evento originalmente en cualquier elemento de la página? (En este caso, no quiero contar los eventos que ocurrieron en los elementos porque surgieron de un elemento descendiente; por eso escribí "se produce originalmente").

Si eso no es posible, ¿es al menos posible definir un controlador de eventos que se invoque cuando surja un evento hasta la raíz del árbol DOM (que es el objeto del document o el objeto window , ambos deberían funcionar)? (Sé que es posible dejar de burbujear programáticamente, pero usaría este controlador de eventos en una página que no tiene otros controladores definidos en ningún otro elemento). (Además, creo que algunos eventos no aparecen, pero ignorémoslos). casos por el bien de este argumento.)

Sé que puedo hacer esto (usando jQuery):

$(document).bind(''abort afterprint beforeprint beforeunload etc.'', function() {
    // handle event
});

pero esa sería una solución bastante indeseable para mí.

Por cierto, no necesito una solución de navegador cruzado. Si funciona en un solo navegador, estoy bien.

Además, Firebug puede registrar eventos , pero me gustaría poder ver el evento mediante programación (a través de JavaScript) en lugar de tenerlos simplemente conectados en la consola.

Answer 1

Dudo mucho que haya una forma de hacer esto en Firefox. Mirando el código fuente de Firebug (particularmente el método attachAllListeners ), resulta que iterar a través de una lista de nombres de eventos obviamente es el camino a seguir, pero esto no resuelve los problemas de burbujeo.

Answer 2

No parece haber ningún ''camino fácil'' para hacer eso.

Mi idea: sabes cuáles son todos los eventos, para que puedas manejar todos los eventos para cada elemento DOM:

var events =
[   
    "onabort",
    "onafterprint",
    "onbeforeprint",
    "onbeforeunload",
    ...

];

var root = document.body;
var elms = root.childNodes;

for(var i = 0; i < elms.length; i++)
{
    for(var j = 0; j < events.length; j++)
    {
        elms[i][events[j]] = globalHandler;
    }
}

function globalHandler()
{
    alert("Global handler called");
}

Esa es la ''idea intuitiva'' pero no parece ser muy eficiente. Sin embargo, debería funcionar.

Buena suerte.

Answer 3

Para la última versión del sitio web de MDN:

(function getAllEventTypes(){
  if(location.href !=''https://developer.mozilla.org/en-US/docs/Web/Events'') return;

  var types = {};
  $(''.standard-table'').map(function(){
    if($(this).find(''caption'').length > 0){
        var type = $(this).find(''caption'')[0].innerHTML || ''OtherEvent'';
    types[type] = types[type] || [];     
    $(this).find(''tbody tr td code a'').each(function(el){
        if(this.innerText) types[type].push(this.innerText);
    });
    }
  });
  for(var t in types) types[t] = types[t].join('' '');
  return "var DOMEvents = "+JSON.stringify(types, null, 4).replace(/"(/w+)/":/ig, ''$1:'');
})();

Answer 4

Puede recorrer todas las propiedades del elemento dom y seleccionar las que coincidan con el patrón /on(.*)/ (por ejemplo, onclick o onmousemove):

var events = [];
for (var property in element) {
    var match = property.match(/^on(.*)/)
    if (match) { 
        events.push(match[1]);
    }
}
console.log(events.join('' ''))

Answer 5

/*

function getAllEventTypes(){

  if(location.href !=''https://developer.mozilla.org/en-US/docs/Web/Events'') return;

  var types = {};
  $(''.standard-table:eq(0) tr'').find(''td:eq(1)'').map(function(){
    var type = $.trim(this.innerText) || ''OtherEvent'';
    types[type] = types[type] || [];     
    var event = $.trim(this.previousElementSibling.innerText);
    if(event) types[type].push(event);
  });
  for(var t in types) types[t] = types[t].join('' '');
  return "var DOMEvents = "+JSON.stringify(types, null, 4).replace(/"(/w+)/":/ig, ''$1:'');
}

*/

var DOMEvents = {
UIEvent: "abort DOMActivate error load resize scroll select unload",
ProgressEvent: "abort error load loadend loadstart progress progress timeout",
Event: "abort afterprint beforeprint cached canplay canplaythrough change chargingchange chargingtimechange checking close dischargingtimechange DOMContentLoaded downloading durationchange emptied ended ended error error error error fullscreenchange fullscreenerror input invalid languagechange levelchange loadeddata loadedmetadata noupdate obsolete offline online open open orientationchange pause pointerlockchange pointerlockerror play playing ratechange readystatechange reset seeked seeking stalled submit success suspend timeupdate updateready visibilitychange volumechange waiting",
AnimationEvent: "animationend animationiteration animationstart",
AudioProcessingEvent: "audioprocess",
BeforeUnloadEvent: "beforeunload",
TimeEvent: "beginEvent endEvent repeatEvent",
OtherEvent: "blocked complete upgradeneeded versionchange",
FocusEvent: "blur DOMFocusIn  Unimplemented DOMFocusOut  Unimplemented focus focusin focusout",
MouseEvent: "click contextmenu dblclick mousedown mouseenter mouseleave mousemove mouseout mouseover mouseup show",
SensorEvent: "compassneedscalibration Unimplemented userproximity",
OfflineAudioCompletionEvent: "complete",
CompositionEvent: "compositionend compositionstart compositionupdate",
ClipboardEvent: "copy cut paste",
DeviceLightEvent: "devicelight",
DeviceMotionEvent: "devicemotion",
DeviceOrientationEvent: "deviceorientation",
DeviceProximityEvent: "deviceproximity",
MutationNameEvent: "DOMAttributeNameChanged DOMElementNameChanged",
MutationEvent: "DOMAttrModified DOMCharacterDataModified DOMNodeInserted DOMNodeInsertedIntoDocument DOMNodeRemoved DOMNodeRemovedFromDocument DOMSubtreeModified",
DragEvent: "drag dragend dragenter dragleave dragover dragstart drop",
GamepadEvent: "gamepadconnected gamepaddisconnected",
HashChangeEvent: "hashchange",
KeyboardEvent: "keydown keypress keyup",
MessageEvent: "message message message message",
PageTransitionEvent: "pagehide pageshow",
PopStateEvent: "popstate",
StorageEvent: "storage",
SVGEvent: "SVGAbort SVGError SVGLoad SVGResize SVGScroll SVGUnload",
SVGZoomEvent: "SVGZoom",
TouchEvent: "touchcancel touchend touchenter touchleave touchmove touchstart",
TransitionEvent: "transitionend",
WheelEvent: "wheel"
}

var RecentlyLoggedDOMEventTypes = {};

for(DOMEvent in DOMEvents){

  var DOMEventTypes = DOMEvents[DOMEvent].split('' '');

  DOMEventTypes.filter(function(DOMEventType){
    var DOMEventCategory = DOMEvent + '' ''+DOMEventType;  
    document.addEventListener(DOMEventType, function(e){
      if(RecentlyLoggedDOMEventTypes[DOMEventCategory]) return;
      RecentlyLoggedDOMEventTypes[DOMEventCategory] = true;
      setTimeout(function(){ RecentlyLoggedDOMEventTypes[DOMEventCategory] = false }, 5000);
      var isActive = e.target==document.activeElement;
      if(isActive) {
        console.info(DOMEventCategory, 
          '' target='', e.target, 
          '' active='', document.activeElement, 
          '' isActive='', true );
      } else {
        console.log(DOMEventCategory, 
          '' target='', e.target,
          '' active='', document.activeElement, 
          '' isActive='', false );
      }

    }, true);
  });

}