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

时间:2011-05-01 13:16:05

标签: jquery javascript-events

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

示例:

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

7 个答案:

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

Simple example on jsfiddle

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