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

Question

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

例子：

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

Answer 1

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

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的支持任何通配符（这将是困难的，充满了危险），但标准的事件列表是有限的（但遗憾的是有点整个摊开DOM2 events spec，DOM2 HTML spec和DOM3 events spec），你总是可以简单地列出它们。 jQuery不会让你给多个事件名称绑定（空格分隔），例如：

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

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

Simple example on jsfiddle

Answer 4

jQuery的改变它如何保存事件，有a couple ways to extract the list取决于你使用的是哪个版本。我已经encapsulated the "most recent" version in a plugin，但本质上你想要的：

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

这给所有绑定事件的嵌套列表，由“基地”事件（没有命名空间）进行分组。然而，我只是意识到你想要的所有原生jQuery事件 - 你可以检查$.event，其中有一些在$.event.special下，但accepted answer仍然是你最好的选择。你也可以看看jQuery lists as possible binding functions。

Answer 5

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

我已经采取了马克·科尔曼的脚本并为我的需求增强了一点。

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

Answer 7

下面是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