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によって要素に既にバインドされているすべてのイベントをログに記録します。このコードは私にとって何度も役に立ちました。

ところで：オブジェクトで発生する可能性のあるすべてのイベントを確認するには、firebugを使用します。[html]タブでDOM要素を右クリックし、[イベントのログ]を確認します。その後、すべてのイベントがコンソールに記録されます（これは、すべてのマウスの動きを記録するので、これは少し面倒なことがあります...）。

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

古い糸、私は知っています。イベントを監視するための何かも必要で、この非常に便利な（優れた）ソリューションを作成しました。このフックですべてのイベントを監視できます（Windowsプログラミングではこれをフックと呼びます）。このフックは、ソフトウェア/プログラムの動作には影響しません。

でコンソールログインあなたはこのような何かを見ることができます：

あなたが見るものの説明：

コンソールログには、選択したすべてのイベントが表示されます（以下の「使用方法」を参照））が表示され、オブジェクトタイプ、クラス名、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);

すべてのOFFバインド解除のみを監視します。

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）を使用して簡単にすることもできます。

STEP 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、特定のイベントの情報のみを出力したりできます。

コードで、monitorEvents（）を使用せずにコンソールでイベントを監視する非jqueryの方法を次に示します。これは、Chromeデベロッパーコンソールでのみ機能するためです。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