Как связать все события (т.е. click
, keypress
, mousedown
) с элементом DOM, используя jQuery, без отдельного перечисления каждого из них?
Пример:
$('#some-el').bind('all events', function(e) {
console.log(e.type);
});
Как связать все события (т.е. click
, keypress
, mousedown
) с элементом DOM, используя jQuery, без отдельного перечисления каждого из них?
Пример:
$('#some-el').bind('all events', function(e) {
console.log(e.type);
});
существует простой (но неточный) способ проверить все события:
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 */
});
Вы также можете переопределить 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 );
}
Если вы хотите связать несколько событий с одной и той же функцией, просто отделите их пробелами.
$("#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);
});
jQuery изменил способ сохранения событий, несколько способов извлечь список в зависимости от того, какую версию вы используете. Я инкапсулировал "самую последнюю" версию в плагине, но по существу вы хотите:
var events = $._data($('yourelement')[0], "events");
Это дает вложенный список всех связанных событий, сгруппированных по "базовому" событию (без пространства имен).
Однако я просто понял, что вы хотите все собственные события jQuery - вы можете проверить $.event
, который имеет некоторые из них в $.event.special
, но принятый ответ может все еще быть вашим лучшим выбором. Вы также можете посмотреть, что jQuery списки как возможные функции привязки.
Здесь небольшое расширение для 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 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
Я не думаю, что jQuery поддерживает любой шаблон (это было бы сложно и чревато опасностью), но список стандартных событий является конечным (хотя, к сожалению, немного разбросанным по спецификация событий DOM2, спецификация HTML DOM2 и DOM3 events spec), вы всегда можете просто перечислить их. jQuery позволяет вам указывать несколько имен событий для привязки (с разделителями-ограничителями), например:
$('#some-el').bind('click dblclick mouseover mouseout' /* etc.*/,function(e){
console.log(e.type);
});
Я взял Mark Coleman script и немного улучшил его для своих нужд.
Я хотел бы поделиться им с вами: 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;
}
});