Обработка событий

[hedgehog]

Читаю всякие интересности про обработку событий в JS, но не могу разобраться с порядком обработки событий. В статье написано, что при помощи метода addEventListener я могу изменить стандартное поведение (всплытие). Но у меня не очень получается это реализовать, либо я чего-то не понимаю.

http://jsfiddle.net/Wfr8x/1/'>http://jsfiddle.net/Wfr8x/1/

Здесь я использую addEventListener чтобы назначить onclick на span, но клик по кнопке только дисаблит ее, т.е. span не принимает событие при задисабленном инпуте (но можно кликнуть за пределами инпут, т.к. padding:20px;)

http://jsfiddle.net/Wfr8x/

А это для ИЕ. Работает, так как сначала передается событие врапперу, как я понимаю.

Почему не работает в первом случае? Получается, что события в любом случае сначала "всплывают" в нормальных браузерах?

PS: наверное, я путаю порядок обработки событий при назначении одних и тех же событий (например, onclick) на дочерний и родительский элементы?

Edited September 11, 2012 by hedgehog

[wwt]

FF отключает события для задисейбленных элементов форм и ссылок.

Точнее:

A click event on a disabled form field does not fire events in Firefox and Safari. Opera fires the mousedown and mouseup events, but not the click event. IE fires mousedown and mouseup, but not click, on the form. All these implementations are considered correct.

(с) http://www.quirksmode.org/dom/events/click.html

строка таблицы "On form fields and links"

Edited September 11, 2012 by wwt

[hedgehog]

Но onclick висит на враппере (span). Получается, что при клике на элемент, событие сначала в любом случае получает этот элемент, а только потом - его родитель?

[troll]

onclick на враппере, но щелкаете вы по кнопке. А если кнопка отключена, то никто, кроме IE, не генерирует событие click для нее, поэтому никакого захвата/всплытия не происходит, и обработчик на враппере не срабатывает.

[wwt]

при всплывании сначала отрабатывается обработчик элемента по которому прошло событие, а потом оно передается вверх по дереву вплоть до родителя(если у всех элементов дерева ест обработчики этого события они отработают). Можно остановить передачу события выше по дереву с помощью event.stopPropagation().

В случае с disabled элементом в FF не важно используешь ты всплытие или перехват, этот элемент не будет реагировать на события и соответственно оно не передастся не вверх в первом случае ни вниз во втором. Попробуй замени input на к примеру другой span, вот что получится http://jsfiddle.net/Wfr8x/2/ при клике на clickme отработают оба обработчика вверх.

Но onclick висит на враппере (span). Получается, что при клике на элемент, событие сначала в любом случае получает этот элемент, а только потом - его родитель?

а по поводу этого вопроса: событие получают все дочерние элементы, но при всплывании передача идет вверх от элемента по которому прошло событие вплоть до родителя которому задали обработчик, а в случае перехвата наоборот вниз от родителя до элемента по которому прошло событие. Перехват кстати в IE не работает поэтому обычно используют всплытие.

Edited September 11, 2012 by wwt

[hedgehog]

при всплывании сначала отрабатывается обработчик элемента по которому прошло событие, а потом оно передается вверх по дереву вплоть до родителя(если у всех элементов дерева ест обработчики этого события они отработают). Можно остановить передачу события выше по дереву с помощью event.stopPropagation().

Это я знаю

В случае с disabled элементом в FF не важно используешь ты всплытие или перехват, этот элемент не будет реагировать на события и соответственно оно не передастся не вверх в первом случае ни вниз во втором.

То есть, в случае с disabled перехват, как и всплытие, тоже не работает. Это я и хотел узнать, спасибо.