我如何绑定DOM元素上的所有事件？

我如何使用jQuery绑定DOM元素上的所有事件（即， click ， keypress ， mousedown ），而不单独列出每个事件？

例：

 $('#some-el').bind('all events', function(e) { console.log(e.type); }); 

Answer 1

有一个简单的（但不准确）的方式来testing所有的事件：

 function getAllEvents(element) { var result = []; for (var key in element) { if (key.indexOf('on') === 0) { result.push(key.slice(2)); } } return result.join(' '); } 

然后绑定像这样的所有事件：

 var el = $('#some-el'); el.bind(getAllEvents(el[0]), function(e) { /* insert your code */ }); 

Answer 2

您也可以重新定义jQuery.event.trigger来捕获每个事件，但是，我认为，这种方式仅适用于探索外部API，而不适用于生产：

 var oldJQueryEventTrigger = jQuery.event.trigger; jQuery.event.trigger = function( event, data, elem, onlyHandlers ) { console.log( event, data, elem, onlyHandlers ); oldJQueryEventTrigger( event, data, elem, onlyHandlers ); } 

Answer 3

如果要将多个事件绑定到同一个函数，只需用空格分隔它们即可。

 $("#test").bind("blur focus focusin focusout load resize scroll unload click " + "dblclick mousedown mouseup mousemove mouseover mouseout mouseenter " + "mouseleave change select submit keydown keypress keyup error", function(e){ $("#r").empty().text(e.type); }); 

简单的例子在jsfiddle

Answer 4

jQuery改变了它保存事件的方式，有几种方法可以根据你使用的版本来提取列表 。 我已经将“最新”版本封装在一个插件中 ，但基本上你需要：

 var events = $._data($('yourelement')[0], "events"); 

这给出了一个由“base”事件（没有命名空间）分组的所有绑定事件的嵌套列表。

不过，我只是意识到你想要所有的本地jQuery事件 – 你可以检查$.event ，其中有一些在$.event.special ，但接受的答案可能仍然是你最好的select。 你也可以看看jQuery列出了可能的绑定函数 。

Answer 5

这是jQuery的一个小扩展：

 $.fn.onAny = function(cb){ for(var k in this[0]) if(k.search('on') === 0) this.on(k.slice(2), function(e){ // Probably there's a better way to call a callback function with right context, $.proxy() ? cb.apply(this,[e]); }); return this; }; 

用法：

 $('#foo').onAny(function(e){ console.log(e.type); }); 

你也可以使用浏览器控制台（从这个答案 ）：

 monitorEvents($0, 'mouse'); // log all events of an inspected element monitorEvents(document.body); // log all events on the body monitorEvents(document.body, 'mouse'); // log mouse events on the body monitorEvents(document.body.querySelectorAll('input')); // log all events on inputs 

Answer 6

我不认为jQuery支持任何通配符（这将是困难和充满危险），但标准事件的列表是有限的（虽然可悲的是有点散开DOM2事件规范 ， DOM2 HTML规范 ，和DOM3事件规范 ），你总是可以简单地列出它们。 jQuery允许你给多个事件名称绑定（空格分隔），例如：

 $('#some-el').bind('click dblclick mouseover mouseout' /* etc.*/,function(e){ console.log(e.type); }); 

Answer 7

我已经采取了马克·科尔曼的剧本，并加强了一点为我的需要。

我想分享给你： http : //jsfiddle.net/msSy3/65/

 var lastEvent = null, countEvent = 0; $("#test").bind("blur focus focusin focusout load resize scroll unload click" + " dblclick mousedown mouseup mousemove mouseover mouseout mouseenter " + "mouseleave change select submit keydown keypress keyup error", function (e) { if (lastEvent !== e.type) { countEvent++; $("#r").prepend("<span>" + countEvent + ": " + e.type + "<br></span>"); $("#r > span:nth-child(21)").remove(); lastEvent = e.type; } });