Как я могу привязать все события к элементу DOM?

Question

Как я могу привязать все события к элементу DOM?

как я могу связать все события (т. е. click,keypress,mousedown) на элементе DOM, используя jQuery, без перечисления каждого из них по отдельности?

пример:

$('#some-el').bind('all events', function(e) {

    console.log(e.type);

});

526 7

jQuery javascript-events

7 ответов:

Comments

Ничего не найдено.

otakustay · Accepted Answer · 2015-05-04 03:44:47

существует простой (но не точный) способ проверить все события:
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 */
});

Leonid Shagabutdinov · Accepted Answer · 2015-01-14 03:10:09

вы также можете переопределить jQuery.событие.триггер, чтобы поймать каждое событие, но, я думаю, этот способ хорош только для изучения внешнего 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 ); 
}

Mark Coleman · Accepted Answer · 2011-05-01 16:29:03

Если вы хотите привязать несколько событий к одной функции, просто разделите их пробелами.
$("#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

drzaus · Accepted Answer · 2017-05-23 14:47:15

jQuery изменил способ сохранения событий, есть несколько способов извлечь список в зависимости от того, какую версию вы используете. У меня инкапсулировал "самую последнюю" версию в плагин, но по существу вы хотите:
var events = $._data($('yourelement')[0], "events");
Это дает вложенный список всех связанных событий, сгруппированных по "базе" событие (без пространства имен).

однако, я только что понял, что вы хотите все родные события jQuery - вы можете проверить $.event, который имеет некоторые из них под $.event.special, а принято отвечать все еще может быть вашим лучшим выбором. Вы также можете посмотреть на то, что jQuery перечисляет как возможные функции привязки.

mu3 · Accepted Answer · 2017-05-23 15:10:30

вот небольшое расширение для 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(, '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

T.J. Crowder · Accepted Answer · 2011-05-01 16:24:53

Я не думаю, что 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);
});

DaviideSnow · Accepted Answer · 2015-02-02 14:47:12

Я взял сценарий Марка Коулмана и немного улучшил его для своих нужд.

Я хотел бы поделиться им с вами: 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;
    }
});