คุณบันทึกเหตุการณ์ทั้งหมดที่ยิงโดยองค์ประกอบใน jQuery ได้อย่างไร

ฉันต้องการเห็นเหตุการณ์ทั้งหมดที่เกิดจากไฟล์ ป้อนข้อมูลเมื่อผู้ใช้โต้ตอบกับเหตุการณ์นั้น ซึ่งรวมถึงสิ่งต่างๆเช่น:

1. คลิกที่มัน
2. คลิกปิดมัน
3. แตะลงไป
4. หลีกหนีจากมัน
5. Ctrl+ CและCtrl+Vบนแป้นพิมพ์
6. คลิกขวา -> วาง
7. คลิกขวา -> ตัด
8. คลิกขวา -> คัดลอก
9. การลากและวางข้อความจากแอปพลิเคชันอื่น
10. แก้ไขด้วย Javascript
11. แก้ไขด้วยเครื่องมือดีบักเช่น Firebug

ฉันต้องการแสดงโดยใช้console.logไฟล์. เป็นไปได้ไหมใน Javascript / jQuery และถ้าเป็นเช่นนั้นฉันจะทำอย่างไร

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

นั่นจะทำให้คุณได้รับข้อมูลจำนวนมาก (แต่ไม่ใช่ทั้งหมด) ในกรณีที่เหตุการณ์ถูกไล่ออก ... นอกเหนือจากการเข้ารหัสด้วยตนเองเช่นนี้ฉันไม่สามารถคิดวิธีอื่นที่จะทำ

ฉันไม่รู้ว่าทำไมไม่มีใครใช้สิ่งนี้ ... (อาจเป็นเพราะมันเป็นเพียงสิ่งที่ Webkit)

เปิดคอนโซล:

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 ('events'):

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);
});

สิ่งนี้จะบันทึกทุกเหตุการณ์ที่ถูกผูกไว้กับองค์ประกอบโดย jQuery เมื่อเหตุการณ์เฉพาะนี้เริ่มทำงาน รหัสนี้ค่อนข้างมีประโยชน์สำหรับฉันหลายครั้ง

Btw: หากคุณต้องการเห็นเหตุการณ์ที่เป็นไปได้ทั้งหมดที่เกิดขึ้นบนวัตถุให้ใช้ firebug: เพียงคลิกขวาที่องค์ประกอบ DOM ในแท็บ html แล้วเลือก "บันทึกเหตุการณ์" จากนั้นทุกเหตุการณ์จะเข้าสู่คอนโซล (บางครั้งก็น่ารำคาญเล็กน้อยเพราะบันทึกทุกการเคลื่อนไหวของเมาส์ ... )

$('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);
}); 

ฉันรู้ว่าคำตอบนี้ได้รับการยอมรับแล้ว แต่ฉันคิดว่าอาจมีวิธีที่น่าเชื่อถือกว่าเล็กน้อยซึ่งคุณไม่จำเป็นต้องรู้ชื่อของงานก่อน สิ่งนี้ใช้ได้กับเหตุการณ์ดั้งเดิมเท่านั้นเท่าที่ฉันรู้ไม่ใช่เหตุการณ์ที่กำหนดเองที่สร้างขึ้นโดยปลั๊กอิน ฉันเลือกที่จะละเว้นการใช้ jQuery เพื่อทำให้สิ่งต่างๆง่ายขึ้นเล็กน้อย

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);
    });
  });

ฉันหวังว่านี่จะช่วยทุกคนที่อ่านสิ่งนี้

แก้ไข

ดังนั้นฉันเห็นคำถามอื่นที่นี่ที่คล้ายกันดังนั้นข้อเสนอแนะอื่นที่จะทำดังต่อไปนี้:

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

กระทู้เก่านะรู้ยัง ฉันต้องการบางสิ่งเพื่อตรวจสอบเหตุการณ์และเขียนวิธีแก้ปัญหาที่มีประโยชน์ (ยอดเยี่ยม) นี้ คุณสามารถตรวจสอบเหตุการณ์ทั้งหมดด้วย hook นี้ (ในการเขียนโปรแกรม windows เรียกว่า hook) ตะขอนี้ไม่มีผลต่อการทำงานของซอฟต์แวร์ / โปรแกรมของคุณ

ในบันทึกของคอนโซลคุณจะเห็นสิ่งนี้:

คำอธิบายสิ่งที่คุณเห็น:

ในบันทึกของคอนโซลคุณจะเห็นเหตุการณ์ทั้งหมดที่คุณเลือก (ดูด้านล่าง"วิธีใช้" ) และแสดงประเภทออบเจ็กต์, ชื่อคลาส, id, <: name of function>, <: eventname> การจัดรูปแบบของวัตถุเป็นเหมือน css

เมื่อคุณคลิกปุ่มหรือเหตุการณ์ที่ผูกไว้คุณจะเห็นสิ่งนั้นในบันทึกของคอนโซล

รหัสที่ฉันเขียน:

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;
    };
   }
}

ตัวอย่างวิธีใช้:

ตรวจสอบเหตุการณ์ทั้งหมด:

setJQueryEventHandlersDebugHooks();

ตรวจสอบทริกเกอร์ทั้งหมดเท่านั้น:

setJQueryEventHandlersDebugHooks(true,false,false);

ตรวจสอบเหตุการณ์ ON ทั้งหมดเท่านั้น:

setJQueryEventHandlersDebugHooks(false,true,false);

ตรวจสอบปิดทั้งหมด unbinds เท่านั้น:

setJQueryEventHandlersDebugHooks(false,false,true);

หมายเหตุ / ประกาศ:

• ใช้สำหรับการดีบักเท่านั้นปิดเมื่อใช้ในเวอร์ชันสุดท้ายของผลิตภัณฑ์
• หากคุณต้องการดูเหตุการณ์ทั้งหมดคุณต้องเรียกใช้ฟังก์ชันนี้โดยตรงหลังจากโหลด jQuery แล้ว
• หากคุณต้องการดูเฉพาะเหตุการณ์น้อยลงคุณสามารถเรียกใช้ฟังก์ชันได้ตามเวลาที่ต้องการ
• หากคุณต้องการเรียกใช้งานอัตโนมัติให้วาง () (); รอบ ๆ ฟังก์ชั่น

หวังว่าจะช่วยได้! ;-)

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
  }
});

เพียงเพิ่มสิ่งนี้ลงในหน้าและไม่ต้องกังวลอื่น ๆ จะจัดการส่วนที่เหลือให้คุณ:

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

คุณยังสามารถใช้ console.log ('Input event:' + e.type) เพื่อให้ง่ายขึ้น

ขั้นตอนที่ 1: ตรวจสอบeventsการHTML elementบนdeveloper console:

ขั้นตอนที่ 2: ฟังสิ่งที่eventsเราต้องการบันทึก:

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

โชคดี...

ฉันเพิ่งพบและแก้ไขตัวอย่างข้อมูลนี้จากโพสต์ SO ที่มีอยู่ซึ่งฉันไม่สามารถหาได้อีก แต่พบว่ามีประโยชน์มาก

// 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'))

สิ่งนี้ใช้ ES6 เล็กน้อยเพื่อความสวยงาม แต่สามารถแปลได้อย่างง่ายดายสำหรับเบราว์เซอร์เดิมเช่นกัน ในฟังก์ชั่นที่แนบมากับตัวฟังเหตุการณ์ตอนนี้มันเพิ่งออกจากระบบว่าเหตุการณ์ประเภทใดเกิดขึ้น แต่นี่คือที่ที่คุณสามารถพิมพ์ข้อมูลเพิ่มเติมหรือใช้เคสสวิตช์ในe.typeคุณสามารถพิมพ์ข้อมูลเกี่ยวกับเหตุการณ์เฉพาะได้เท่านั้น

ต่อไปนี้เป็นวิธีที่ไม่ใช้ jquery ในการตรวจสอบเหตุการณ์ในคอนโซลด้วยโค้ดของคุณและไม่ต้องใช้ monitorEvents () เนื่องจากใช้ได้ใน Chrome Developer Console เท่านั้น คุณยังสามารถเลือกที่จะไม่ตรวจสอบเหตุการณ์บางอย่างได้โดยแก้ไขอาร์เรย์ no_watch

    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