web-dev-qa-db-ja.com

jQueryの要素によって発生したすべてのイベントをどのように記録しますか？

ユーザーが操作するときに入力フィールドによって起動されるすべてのイベントを確認したいと思います。これには次のようなものが含まれます。

  1. それをクリックします。
  2. クリックしてください。
  3. それにタブ移動します。
  4. それからタブ移動します。
  5. Ctrl+C そして Ctrl+V キーボードで。
  6. 右クリック->貼り付け。
  7. 右クリック->切り取り。
  8. 右クリック->コピー。
  9. 別のアプリケーションからテキストをドラッグアンドドロップします。
  10. JavaScriptで変更します。
  11. Firebugなどのデバッグツールを使用して変更します。

console.logを使用して表示したいと思います。これはJavascript/jQueryで可能ですか？もし可能なら、どうすればいいですか？

javascripteventsjavascript-eventsjquery
86
Daniel T.
$(element).on("click mousedown mouseup focus blur keydown change",function(e){
     console.log(e);
});

これにより、イベントが発生したかどうかに関する多くの（しかしすべてではない）情報が得られます。

59
Joseph Marikle

誰もこれを使わない理由がわかりません...

コンソールを開く：

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
183
sidonaldson

.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を使用します。htmlタブでDOM要素を右クリックし、[イベントのログ]をオンにします。その後、すべてのイベントがコンソールに記録されます（マウスの動きをすべて記録するため、これは少し面倒です...）。

30
Simon
$('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);
});
16
maudulus

これに対する答えはすでに受け入れられていることは知っていますが、イベントの名前を事前に知る必要はない、もう少し信頼できる方法があると思います。これはネイティブイベントでのみ機能しますが、私の知る限りでは、プラグインによって作成されたカスタムイベントでは機能しません。物事を少し単純化するために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'));
12
Patrick Roberts

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

console logには次のようなものがあります：

console log

表示される説明：

コンソールログには、選択したすべてのイベントが表示され（下記「使用方法」を参照）、object-type、classname（s）、id、<：name of関数>、<：イベント名>。オブジェクトのフォーマットは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);

すべてのオフのバインド解除のみを監視：

setJQueryEventHandlersDebugHooks(false,false,true);

備考/注意：

  • これはデバッグのみに使用し、製品の最終バージョンで使用する場合はオフにします
  • すべてのイベントを表示する場合は、jQueryがロードされた後にこの関数を直接呼び出す必要があります
  • より少ないイベントのみを表示する場合は、必要なときに関数を呼び出すことができます
  • 自動実行する場合は、（）（）;を配置します。周辺機能

それが役に立てば幸い！ ;-)

8
Codebeat

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
  }
});
4
Robert Plummer

これをページに追加するだけで、他の心配はありません。残りを処理します：

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

Console.log（ 'Input event：' + e.type）を使用して簡単にすることもできます。

2
Shawn Khameneh

ステップ1：HTML elementのdeveloper consoleのeventsを確認します：

enter image description here

ステップ2：キャプチャするeventsを聞きます：

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

幸運を...

1
Akash