如何在jQuery中记录元素触发的所有事件？

Question

我希望当用户与之交互时,输入字段会触发所有事件.这包括以下内容:

1. 点击它.
2. 点击它.
3. 插入它.
4. 从中脱颖而出.
5. Ctrl键盘上的+ C和Ctrl+ V.
6. 右键单击 - >粘贴.
7. 右键单击 - >剪切.
8. 右键单击 - >复制.
9. 从另一个应用程序拖放文本.
10. 用Javascript修改它.
11. 使用调试工具(如Firebug)修改它.

我想用它来显示它console.log.这可能在Javascript/jQuery中,如果是这样,我该怎么做？

Answer 1

我不知道为什么没有人使用这个...(也许是因为它只是一个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

Answer 2

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

如果一个事件被触发,这将获得很多(但不是全部)信息...除了像这样手动编码,我想不出有任何其他方法可以做到这一点.

Answer 3

使用.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元素并选中"Log Events".然后每个事件都会被记录到控制台(这有时会有点烦人,因为它会记录每次鼠标移动...).

Answer 4

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

Answer 5

我知道答案已经被接受了,但我认为可能会有一种更可靠的方式,你不必事先知道事件的名称.这仅适用于本机事件,尽管据我所知,而不是由插件创建的自定义事件.我选择省略使用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'));

Answer 6

老线程,我知道.我还需要一些东西来监控事件,并编写了这个非常方便(优秀)的解决方案.您可以使用此挂钩监视所有事件(在Windows编程中,这称为挂钩).此挂钩不会影响软件/程序的运行.

在控制台日志中,您可以看到如下内容:

你所看到的解释:

在控制台日志中,您将看到您选择的所有事件(请参阅下面的"如何使用"),并显示对象类型,类名,ID,<:函数名称>,<: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后直接调用此函数
• 如果您只想查看较少的事件,可以在需要时调用该功能
• 如果要自动执行它,请放置()(); 围绕功能

希望能帮助到你!;-)