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

我如何使用jQuery绑定DOM元素上的所有事件(即, clickkeypressmousedown ),而不单独列出每个事件?

例:

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

有一个简单的(但不准确)的方式来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 */ }); 

您也可以重新定义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 ); } 

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

 $("#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

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

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

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

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

这是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 

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

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

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

我想分享给你: 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; } });