JQuery'de bir öğe tarafından tetiklenen tüm olayları nasıl günlüğe kaydedersiniz?

Bir kullanıcı onunla etkileşim kurarken bir giriş alanı tarafından tetiklenen tüm olayları görmek istiyorum . Bu, aşağıdaki gibi şeyleri içerir:

1. Üzerine tıklamak.
2. Tıklayarak.
3. İçine giriyor.
4. Ondan uzaklaşıyor.
5. Ctrlklavyede + Cve Ctrl+ V.
6. Sağ tıklayın -> Yapıştır.
7. Sağ tıklayın -> Kes.
8. Sağ tıklayın -> Kopyala.
9. Başka bir uygulamadan metin sürükleyip bırakma.
10. Javascript ile değiştirmek.
11. Firebug gibi bir hata ayıklama aracıyla değişiklik yapmak.

Kullanarak görüntülemek istiyorum console.log. Javascript / jQuery'de bu mümkün müdür ve eğer öyleyse, bunu nasıl yaparım?

$(element).on("click mousedown mouseup focus blur keydown change",function(e){
     console.log(e);
});

Bu size, bir olayın tetiklenip tetiklenmediğine dair bilgilerin çoğunu (ancak hepsini değil) alacaktır ... bunu manuel olarak kodlamaktan başka, bunu yapmanın başka bir yolunu düşünemiyorum.

Bunu neden kimsenin kullanmadığı hakkında hiçbir fikrim yok ... (belki de sadece bir webkit olayı olduğu içindir)

Konsolu açın:

monitorEvents(document.body); // logs all events on the body

monitorEvents(document.body, 'mouse'); // logs mouse events on the body

monitorEvents(document.body.querySelectorAll('input')); // logs all events on inputs

.Data ('etkinlikler') koleksiyonunu kullanmanın güzel bir genel yolu var:

function getEventsList($obj) {
    var ev = new Array(),
        events = $obj.data('events'),
        i;
    for(i in events) { ev.push(i); }
    return ev.join(' ');
}

$obj.on(getEventsList($obj), function(e) {
    console.log(e);
});

Bu, jQuery tarafından öğeye zaten bağlanmış olan her olayı, bu belirli olay tetiklendiği anda günlüğe kaydeder. Bu kod benim için birçok kez çok yardımcı oldu.

Btw: Bir nesnede tetiklenen her olası olayı görmek istiyorsanız firebug kullanın: html sekmesindeki DOM öğesine sağ tıklayın ve "Olayları Günlüğe Kaydet" i kontrol edin. Her olay daha sonra konsola kaydedilir (bu bazen biraz can sıkıcıdır çünkü her fare hareketini kaydeder ...).

$('body').on("click mousedown mouseup focus blur keydown change mouseup click dblclick mousemove mouseover mouseout mousewheel keydown keyup keypress textInput touchstart touchmove touchend touchcancel resize scroll zoom focus blur select change submit reset",function(e){
     console.log(e);
}); 

Cevabın buna zaten kabul edildiğini biliyorum, ancak önceden olayın adını bilmek zorunda olmadığınız biraz daha güvenilir bir yol olabileceğini düşünüyorum. Bu sadece yerel etkinlikler için işe yarıyor, bildiğim kadarıyla, eklentiler tarafından oluşturulan özel etkinlikler için değil. İşleri biraz basitleştirmek için jQuery kullanımını atlamayı seçtim.

let input = document.getElementById('inputId');

Object.getOwnPropertyNames(input)
  .filter(key => key.slice(0, 2) === 'on')
  .map(key => key.slice(2))
  .forEach(eventName => {
    input.addEventListener(eventName, event => {
      console.log(event.type);
      console.log(event);
    });
  });

Umarım bu, bunu okuyan herkese yardımcı olur.

DÜZENLE

Bu yüzden burada benzer olan başka bir soru gördüm , bu nedenle başka bir öneri aşağıdakileri yapmak olacaktır:

monitorEvents(document.getElementById('inputId'));

Eski iplik, biliyorum. Ayrıca olayları izlemek için bir şeye ihtiyacım vardı ve bu çok kullanışlı (mükemmel) çözümü yazdım. Bu kanca ile tüm olayları izleyebilirsiniz (Windows programlamada buna kanca denir). Bu kanca, yazılımınızın / programınızın çalışmasını etkilemez.

Gelen konsolunda oturum böyle bir şey görebilirsiniz:

Ne gördüğünüzün açıklaması:

Konsol günlüğünde, seçtiğiniz tüm olayları göreceksiniz (aşağıda "nasıl kullanılır" bölümüne bakın ) ve nesne türünü, sınıf adlarını, kimliği, <: işlevin adı>, <: olay adı> 'nı gösterir. Nesnelerin biçimlendirmesi css gibidir.

Bir düğmeyi veya bağlantılı herhangi bir olayı tıkladığınızda, bunu konsol günlüğünde göreceksiniz.

Yazdığım kod:

function setJQueryEventHandlersDebugHooks(bMonTrigger, bMonOn, bMonOff)
{
   jQuery.fn.___getHookName___ = function()    
       {
          // First, get object name
         var sName = new String( this[0].constructor ),
         i = sName.indexOf(' ');
         sName = sName.substr( i, sName.indexOf('(')-i );    

         // Classname can be more than one, add class points to all
         if( typeof this[0].className === 'string' )
         {
           var sClasses = this[0].className.split(' ');
           sClasses[0]='.'+sClasses[0];
           sClasses = sClasses.join('.');
           sName+=sClasses;
         }
         // Get id if there is one
         sName+=(this[0].id)?('#'+this[0].id):'';
         return sName;
       };

   var bTrigger        = (typeof bMonTrigger !== "undefined")?bMonTrigger:true,
       bOn             = (typeof bMonOn !== "undefined")?bMonOn:true,
       bOff            = (typeof bMonOff !== "undefined")?bMonOff:true,
       fTriggerInherited = jQuery.fn.trigger,
       fOnInherited    = jQuery.fn.on,
       fOffInherited   = jQuery.fn.off;

   if( bTrigger )
   {
    jQuery.fn.trigger = function()
    {
     console.log( this.___getHookName___()+':trigger('+arguments[0]+')' );
     return fTriggerInherited.apply(this,arguments);
    };
   }

   if( bOn )
   {
    jQuery.fn.on = function()
    {
     if( !this[0].__hooked__ ) 
     {
       this[0].__hooked__ = true; // avoids infinite loop!
       console.log( this.___getHookName___()+':on('+arguments[0]+') - binded' );
       $(this).on( arguments[0], function(e)
       {
         console.log( $(this).___getHookName___()+':'+e.type );
       });
     }
     var uResult = fOnInherited.apply(this,arguments);
     this[0].__hooked__ = false; // reset for another event
     return uResult;
    };
   }

   if( bOff )
   {
    jQuery.fn.off = function()
    {
     if( !this[0].__unhooked__ ) 
     {
       this[0].__unhooked__ = true; // avoids infinite loop!
       console.log( this.___getHookName___()+':off('+arguments[0]+') - unbinded' );
       $(this).off( arguments[0] );
     }

     var uResult = fOffInherited.apply(this,arguments);
     this[0].__unhooked__ = false; // reset for another event
     return uResult;
    };
   }
}

Nasıl kullanılacağına örnekler:

Tüm olayları izleyin:

setJQueryEventHandlersDebugHooks();

Yalnızca tüm tetikleyicileri izleyin:

setJQueryEventHandlersDebugHooks(true,false,false);

Yalnızca tüm AÇIK olayları izleyin:

setJQueryEventHandlersDebugHooks(false,true,false);

Yalnızca tüm KAPALI çözmeleri izle:

setJQueryEventHandlersDebugHooks(false,false,true);

Açıklamalar / Uyarı:

• Bunu yalnızca hata ayıklamak için kullanın, ürünün son sürümünde kullanırken kapatın
• Tüm olayları görmek istiyorsanız, jQuery yüklendikten hemen sonra bu işlevi çağırmanız gerekir.
• Yalnızca daha az etkinlik görmek istiyorsanız, ihtiyacınız olan zamanda işlevi çağırabilirsiniz.
• Otomatik olarak yürütmek istiyorsanız, place () (); etrafında fonksiyon

Umarım yardımcı olur! ;-)

https://github.com/robertleeplummerjr/wiretap.js

new Wiretap({
  add: function() {
      //fire when an event is bound to element
  },
  before: function() {
      //fire just before an event executes, arguments are automatic
  },
  after: function() {
      //fire just after an event executes, arguments are automatic
  }
});

Sadece bunu sayfaya ekleyin ve başka endişelenmeyin, gerisini sizin için halledecektir:

$('input').live('click mousedown mouseup focus keydown change blur', function(e) {
     console.log(e);
});

İşi kolaylaştırmak için console.log ('Giriş olayı:' + e.type) da kullanabilirsiniz.

1. ADIM: Check eventsbir için HTML elementüzerinde developer console:

ADIM 2: eventsYakalamak istediğimizi dinleyin :

$(document).on('ch-ui-container-closed ch-ui-container-opened', function(evt){
 console.log(evt);
});

İyi şanslar...

Yakın zamanda bu pasajı, tekrar bulamadığım mevcut bir SO gönderisinden buldum ve değiştirdim, ancak çok yararlı buldum

// specify any elements you've attached listeners to here
const nodes = [document]

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

  const RecentlyLoggedDOMEventTypes = {}

  Object.keys(AllEvents).forEach((DOMEvent) => {
    const DOMEventTypes = AllEvents[DOMEvent]

    if (Object.prototype.hasOwnProperty.call(AllEvents, DOMEvent)) {
      DOMEventTypes.forEach((DOMEventType) => {
        const DOMEventCategory = `${DOMEvent} ${DOMEventType}`

        nodes.forEach((node) => {
          node.addEventListener(
            DOMEventType,
            (e) => {
              if (RecentlyLoggedDOMEventTypes[DOMEventCategory]) return

              RecentlyLoggedDOMEventTypes[DOMEventCategory] = true

              // NOTE: throttle continuous events
              setTimeout(() => {
                RecentlyLoggedDOMEventTypes[DOMEventCategory] = false
              }, 1000)

              const isActive = e.target === document.activeElement

              // https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement
              const hasActiveElement = document.activeElement !== document.body

              const msg = [
                DOMEventCategory,
                'target:',
                e.target,
                ...(hasActiveElement
                  ? ['active:', document.activeElement]
                  : []),
              ]

              if (isActive) {
                console.info(...msg)
              }
            },
            true,
          )
        })
      })
    }
  })
}
logBrowserEvents()
// export default logBrowserEvents

function bindAllEvents (el) {
  for (const key in el) {
      if (key.slice(0, 2) === 'on') {
          el.addEventListener(key.slice(2), e => console.log(e.type));
      }
  }
}
bindAllEvents($('.yourElement'))

Bu, güzellik için biraz ES6 kullanır, ancak eski tarayıcılar için de kolayca çevrilebilir. Olay dinleyicilerine ekli işlevde, şu anda sadece ne tür bir olayın meydana geldiğini oturumu kapatıyor, ancak burası ek bilgileri yazdırabileceğiniz veya üzerinde bir anahtar durumu kullanarak e.type, yalnızca belirli olaylarla ilgili bilgileri yazdırabilirsiniz.

Burada, kodunuzla ve monitorEvents () kullanmadan konsoldaki etkinlikleri izlemenin jquery olmayan bir yolu vardır, çünkü bu yalnızca Chrome Developer Console'da çalışır. No_watch dizisini düzenleyerek belirli olayları izlememeyi de seçebilirsiniz.

    function getEvents(obj) {
    window["events_list"] = [];
    var no_watch = ['mouse', 'pointer']; // Array of event types not to watch
    var no_watch_reg = new RegExp(no_watch.join("|"));

    for (var prop in obj) {
        if (prop.indexOf("on") === 0) {
            prop = prop.substring(2); // remove "on" from beginning
            if (!prop.match(no_watch_reg)) {
                window["events_list"].push(prop);
                window.addEventListener(prop, function() {
                    console.log(this.event); // Display fired event in console
                } , false);
            }
        }
    }
    window["events_list"].sort(); // Alphabetical order 

}

getEvents(document); // Put window, document or any html element here
console.log(events_list); // List every event on element