如何使用jQuery绑定DOM元素上的所有事件(即click
,keypress
,mousedown
),而不单独列出每个事件?
示例:
$('#some-el').bind('all events', function(e) {
console.log(e.type);
});
答案 0 :(得分:52)
有一种简单(但不准确)的方法来测试所有事件:
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 */
});
答案 1 :(得分:48)
你也可以重新定义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 );
}
答案 2 :(得分:9)
jQuery改变了保存事件的方式,a couple ways to extract the list取决于您使用的版本。我encapsulated the "most recent" version in a plugin,但基本上你想要:
var events = $._data($('yourelement')[0], "events");
这给出了所有绑定事件的嵌套列表,按“base”事件(无命名空间)分组。
但是,我刚刚意识到你想要所有本机jQuery事件 - 你可以检查$.event
,其中有一些在$.event.special
下,但accepted answer可能仍然是你最好的选择。您还可以查看jQuery lists as possible binding functions。
答案 3 :(得分:8)
如果要将多个事件绑定到同一个函数,只需将它们用空格分隔即可。
$("#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);
});
答案 4 :(得分:8)
这是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);
});
您也可以使用浏览器控制台(来自this answer):
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
答案 5 :(得分:3)
我不认为jQuery支持任何通配符(这将很难并且充满危险),但标准事件列表是有限的(尽管遗憾地在DOM2 events spec DOM2 HTML spec上分散了{{3} }}和DOM3 events spec),你总是可以简单地列出它们。 jQuery允许你给多个事件名称绑定(空格分隔),例如:
$('#some-el').bind('click dblclick mouseover mouseout' /* etc.*/,function(e){
console.log(e.type);
});
答案 6 :(得分:0)
我已经采用了Mark Coleman的剧本,并根据我的需要对其进行了一些改进。
我想与您分享: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;
}
});