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

Question

我怎样才能绑定所有的事件(即click,keypress,mousedown一个DOM元素),使用jQuery,没有单独列出每一个出来？

例:

$('#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.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

jQuery改变了它保存事件的方式,根据您使用的版本,有几种方法可以提取列表.我在插件中封装了"最新"版本,但基本上你想要:

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

这给出了所有绑定事件的嵌套列表,按"基"事件(无命名空间)分组.

但是,我刚刚意识到你想要所有原生的jQuery事件 - 你可以检查$.event,其中有一些在其中$.event.special,但是接受的答案可能仍然是你最好的选择.您还可以查看jQuery列出的绑定函数.

Answer 4

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

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