Со следующей структурой html:
<div>
<form><span><input></span></form>
</div>
<p>
и следующий код jquery:
$('form').on("focus", function(event) {
$("p").append("focus no delegation<br>");
})
Почему событие фокуса никогда не достигает моего обработчика событий? Связывание события с параметром селектора отлично работает:
$('form').on("focus", "input", function(event) {
$("p").append("focus delegation<br>");
})
Событие следующего фрагмента работает так, что фокусное событие действительно пузырь...
$('form').on("focus", "span", function(event) {
$("p").append("focus delegation<br>");
})
Обе формы работают с событиями кликов и изменений:
$('form').on("click", function(event) {
$("p").append("click no delegation<br>");
})
$('form').on("click", "input", function(event) {
$("p").append("click delegation<br>");
})
Единственное замечание, которое я узнал о пузырьке фокуса, относится к более старым версиям jQuery, которые я не использую. Смотрите здесь в действии здесь
изменить 1
Ну, это сбивает с толку... Согласно jQuery focus doc:
Событие фокуса не пузырится в Internet Explorer. Поэтому сценарии, которые полагаются на делегирование событий с событием фокуса, не будут работать последовательно в браузерах. Начиная с версии 1.4.2, jQuery работает вокруг этого ограничения, сопоставляя фокус с событием focusin в своих методах делегирования событий .live() и .delegate().
И согласно jQuery focusin doc:
Событие focusin отправляется элементу, когда он или любой элемент внутри него получает фокус. Это отличается от фокусного события тем, что он поддерживает обнаружение события фокуса на родительских элементах (другими словами, он поддерживает пузырьки событий).
Это слишком поздно для меня или противоречит другому?