Как сделать живые пользовательские события в jQuery

Question

jQuery имеет действительно удобное связующее событие, называемое live(), которое будет добавлять события к элементам DOM на лету (даже для элементов, которые будут добавлены позже в DOM). Проблема в том, что он работает только с определенными событиями (listed here in documentation).

Я действительно хочу иметь живые события для фокусировки, размытия и изменения, которые не поддерживаются прямо сейчас. Кроме того, если я смогу сделать живые пользовательские события, это будет большой игровой чейнджер для моего приложения. Большая часть кода, который у меня есть сейчас, посвящена восстановлению старых событий (изменение, фокус и пользовательские события для создания элементов, перетаскиваемых или изменяемых по размеру) в новые элементы dom, которые были добавлены через ajax.

Любая идея? Я думаю, что делегирование событий - это путь, но я сейчас сделаю код более сложным. Возможно, плагин, который обрабатывает события делегаций ... не уверен. Помогите мне найти решение.

Answer 1

Эта функциональность теперь доступна в JQuery 1.4. live() теперь поддерживает все события JavaScript (включая пользовательские события), а события focusin и focusout были введены в виде барботажных версий focus и blur.

jQuery 1.4 documentation on .live() От:

По JQuery 1.4, метод .live() поддерживает пользовательские события, а также все события JavaScript. Два исключения: поскольку фокус и размытие не являются фактически пузырящимися событиями, нам нужно использовать focusin и focusout вместо этого.

Answer 2

Если это не в jQuery, скорее всего, причина. Ошибки браузера и т. Д., Что делает его ненадежным. Я буду ждать, пока они не реализовать его или попробовать использовать оригинальный плагин, который стал жить http://docs.jquery.com/Plugins/livequery

Edit:

Ницца downvote ребята. Есть причина, по которой это не в jQuery, и я очень сомневаюсь, что это потому, что они ленивый. Я действительно потратил время на чтение источника и поиск того, что только определенные события реализованы в live(), и я не могу найти почему. Поэтому, если кто-то знает ... пожалуйста, просветите нас.

Answer 3

Я успешно использовал плагин livequery в качестве дополнения к функции .live() в jQuery. Он может не только связывать события, такие как focus, blur и change (что live() пока не поддерживает, начиная с 1.3.2), но также предоставляет вам механизм для привязки настраиваемых событий к элементам DOM на лету. Например, я использовал его для привязки перетаскиваемых и droppables к некоторым элементам DOM, которые будут добавлены через Ajax. Это делает мой код намного проще для чтения и упрощения для обслуживания.

Answer 4

jQuery's live() метод не будет работать, потому что события фокуса и размытия не распространяются (пузырь), как и другие события DOM. Команда jQuery в конечном итоге представит эту функциональность, но она должна быть искусственной (ручная кипения).

Если я не использую JQuery и все еще хотел преимущества live() Я хотел бы использовать событие захвата в браузерах, которые поддерживают его (большинство не-IE браузеров) и в IE Я хотел бы использовать их onFocusIn/onFocusOut событий (эти события, в отличие от фокуса/размытия, пузыри).

Вот пример:

function onFocus(el, fn) { 
    var outerFn = function(e) { 
     e = e || window.event; 
     if ((e.target || e.srcElement) === el) { 
      fn.call(el); 
     } 
    }; 
    if (document.body.addEventListener) { 
     // This is event capturing: 
     document.body.addEventListener('focus', outerFn, true); 
    } else { 
     // This is event delegation: 
     document.body.attachEvent('onfocusin', outerFn); 
    } 
    return outerFn; 
} 

С его помощью:

onFocus(document.getElementById('myInputField'), function(){ 
    log('FOCUSED!!!'); 
}); 

Аналогичная абстракция может быть использована для размытия и изменить события.

Подробнее о порядке события (съемки/барботирования) здесь: http://www.quirksmode.org/js/events_order.html

---

Он также может быть стоит отметить, что liveQuery, плагин JQuery, работает, потому что он вновь связывает событие с новыми элементами ; он работает только с методами манипуляции JQuery DOM, такими как «append», «insertBefore» и т. д. Поэтому, если вы должны добавить новый элемент без использования jQuery, это не сработает.

Answer 5

Возможно, вы захотите проверить плагин jQuery.Listen от Ariel Flesley. Он похож на live() события и livequery() плагин, но он поддерживает focus() и blur() события.

http://flesler.blogspot.com/2007/10/jquerylisten.html