如何綁定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