你如何loggingjQuery中的一个元素触发的所有事件？

我希望在用户与其交互时看到input字段触发的所有事件。 这包括像这样的东西：

1. 点击它。
2. 点击它。
3. 选中它。
4. 远离它。
5. 键盘上的Ctrl + C和Ctrl + V.
6. 右键单击 – >粘贴。
7. 右键单击 – >剪切。
8. 右键单击 – >复制。
9. 从另一个应用程序中拖放文本。
10. 用Javascript修改它。
11. 使用debugging工具（如Firebug）修改它。

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

Answer 1

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

这会给你很多（但不是全部）关于事件是否被触发的信息…除了像这样手动编码之外，我想不出有任何其他的方式来做到这一点。

Answer 2

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

这会logging插件已经绑定到元素的每个事件，或者这个特定事件被触发的时刻。 这段代码对我来说非常有帮助。

顺便说一句：如果你想看到每个可能的事件被触发对象使用firebug：只需右键单击html标签中的DOM元素，并检查“日志事件”。 每一个事件然后被logging到控制台（这有时是有点烦人，因为它logging每个鼠标移动…）。

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

我知道答案已经被接受，但我认为可能有一个稍微可靠的方法，你不必事先知道事件的名称。 尽pipe据我所知，这只适用于本地事件，而不是由插件创build的自定义事件。 我select忽略使用jQuery来简化一些事情。

 var input = document.getElementById('inputId'); Object.getOwnPropertyNames(input).filter(function(key){ return key.slice(0,2)=='on'; }).map(function(key){ return key.slice(2); }).forEach(function(eventName){ input.addEventListener(eventName, function(event){ console.log(event.type); console.log(event); }); }); 

我希望这可以帮助任何读这个的人。

编辑

所以我在这里看到另外一个类似的问题，所以另一个build议是做以下的事情：

 monitorEvents(document.getElementById('inputId')); 

Answer 6

robertleeplummerjr/wiretap.html

 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 } }); 

Answer 7

老线程，我知道。 我还需要一些东西来监视事件，并写出这个非常方便（优秀）的解决scheme。 你可以用这个钩子来监视所有事件（在windows编程中这被称为钩子）。 这个挂钩不影响你的软件/程序的操作。

在控制台日志中，您可以看到如下所示的内容：

你看到的解释：

在控制台日志中，您将看到您select的所有事件（参见下面的“如何使用” ），并显示对象types，类名，id，<：函数名称，<：eventname>。 对象的格式是类似于css的。

当你点击一个button或任何绑定的事件，你会看到它在控制台日志。

我写的代码是：

 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); 

备注/注意事项：

• 仅用于debugging，在产品最终版本中使用时closures
• 如果你想看到所有的事件，你必须在jQuery加载后直接调用这个函数
• 如果你只想看到更less的事件，你可以在需要的时候调用这个函数
• 如果你想自动执行它，place（）（）; 周围的function

希望能帮助到你！ 😉

Answer 8

只要加上这个页面，别担心，会为你处理rest：

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

你也可以使用console.log（'Input event：'+ e.type）来简化它。