it-swarm.cn

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

我想看一下输入字段在用户与之交互时触发的所有事件。这包括以下内容:

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

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

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

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

57
Joseph Marikle

我不知道为什么没有人使用这个...(也许是因为它只是一个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
181
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已绑定到元素的每个事件。这段代码对我很有帮助很多次。

顺便说一句:如果你想看到在一个对象上触发的每个可能事件都使用firebug:只需右键单击html选项卡中的DOM元素并选中“Log Events”。然后每个事件都会被记录到控制台(这有时会有点烦人,因为它会记录每次鼠标移动...)。

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'));
10
Patrick Roberts

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

console log 你可以看到这样的东西:

console log 

你所看到的解释:

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

希望能帮助到你! ;-)

7
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('输入事件:'+ e.type)来简化操作。

2
Shawn Khameneh

第1步:在HTML element上检查events是否有developer console

enter image description here 

第2步:听取我们想捕获的events

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

祝好运...

1
Akash