How do you log all events fired by an element in jQuery

Question

I d like to see all the events fired by an input field as a user interacts with it  This includes stuff like         Clicking on it    Clicking off it    Tabbing into it    Tabbing away from it    Ctrl C and Ctrl V on the keyboard    Right click -  Paste    Right click -  Cut    Right click -  Copy    Dragging and dropping text from another application    Modifying it with Javascript    Modifying it with a debug tool  like Firebug       I d like to display it using console log  Is this possible in Javascript jQuery  and if so  how do I do it

User · Answer

I recently found and modified this snippet from an existing SO post that I have not been able to find again but I ve found it very useful      specify any elements you ve attached listeners to here const nodes    document      https   developer mozilla org en-US docs Web Events const logBrowserEvents        gt      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    gt        const DOMEventTypes   AllEvents DOMEvent       if  Object prototype hasOwnProperty call AllEvents  DOMEvent           DOMEventTypes forEach  DOMEventType    gt            const DOMEventCategory      DOMEvent    DOMEventType            nodes forEach  node    gt              node addEventListener              DOMEventType               e    gt                  if  RecentlyLoggedDOMEventTypes DOMEventCategory   return                RecentlyLoggedDOMEventTypes DOMEventCategory    true                   NOTE  throttle continuous events               setTimeout      gt                    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

User · Answer

I know the answer has already been accepted to this  but I think there might be a slightly more reliable way where you don t necessarily have to know the name of the event beforehand  This only works for native events though as far as I know  not custom ones that have been created by plugins  I opted to omit the use of jQuery to simplify things a little   let input   document getElementById  inputId     Object getOwnPropertyNames input     filter key   gt  key slice 0  2       on      map key   gt  key slice 2      forEach eventName   gt        input addEventListener eventName  event   gt          console log event type         console log event                   I hope this helps anyone who reads this   EDIT  So I saw another question here that was similar  so another suggestion would be to do the following   monitorEvents document getElementById  inputId

User · Answer

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

User · Answer

There is a nice generic way using the  data  events   collection   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         This logs every event that has been already bound to the element by jQuery the moment this specific event gets fired  This code was pretty damn helpful for me many times   Btw  If you want to see every possible event being fired on an object use firebug  just right click on the DOM element in html tab and check  Log Events   Every event then gets logged to the console  this is sometimes a bit annoying because it logs every mouse movement

User · Answer

I have no idea why no-one uses this     maybe because it s only a webkit thing   Open console   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

User · Answer

element  on  click mousedown mouseup focus blur keydown change  function e        console log e         That will get you a lot  but not all  of the information on if an event is fired    other than manually coding it like this  I can t think of any other way to do that

User · Answer

STEP 1  Check the events for an HTML element on the developer console     STEP 2  Listen to the events we want to capture     document  on  ch-ui-container-closed ch-ui-container-opened   function evt    console log evt         Good Luck

User · Answer

Old thread  I know  I needed also something to monitor events and wrote this very handy  excellent  solution  You can monitor all events with this hook  in windows programming this is called a hook   This hook does not affects the operation of your software program   In the console log you can see something like this      Explanation of what you see   In the console log you will see all events you select  see below  how to use   and shows the object-type  classname s   id   lt  name of function    lt  eventname   The formatting of the objects is css-like   When you click a button or whatever binded event  you will see it in the console log    The code I wrote   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                  Examples how to use it   Monitor all events   setJQueryEventHandlersDebugHooks      Monitor all triggers only   setJQueryEventHandlersDebugHooks true false false     Monitor all ON events only   setJQueryEventHandlersDebugHooks false true false     Monitor all OFF unbinds only   setJQueryEventHandlersDebugHooks false false true     Remarks Notice    Use this for debugging only  turn it off when using in product final version  If you want to see all events  you have to call this function directly after jQuery is loaded  If you want to see only less events  you can call the function on the time you need it  If you want to auto execute it  place         around function   Hope it helps   -

User · Answer

function bindAllEvents  el      for  const key in el          if  key slice 0  2       on               el addEventListener key slice 2   e   gt  console log e type                  bindAllEvents     yourElement      This uses a bit of ES6 for prettiness  but can easily be translated for legacy browsers as well  In the function attached to the event listeners  it s currently just logging out what kind of event occurred but this is where you could print out additional information  or using a switch case on the e type  you could only print information on specific events

User · Answer

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

User · Answer

Just add this to the page and no other worries  will handle rest for you      input   live  click mousedown mouseup focus keydown change blur   function e         console log e         You can also use console log  Input event     e type  to make it easier

User · Answer

Here is a non-jquery way to monitor events in the console with your code and without the use of monitorEvents   because that only works in Chrome Developer Console  You can also choose to not monitor certain events by editing the no watch array       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

[javascript] How do you log all events fired by an element in jQuery?

Examples related to javascript

Examples related to jquery

Examples related to events

Examples related to dom-events