not_your_personal_coder Feb 21 2011 at 21:48

Программная генерация событий DOM 2 Events

7 min

42K

JavaScript*

From sandbox

+69

Comments 26

Lebnik Feb 21 2011 at 23:18

небольшие очепятки «жизненных» а не «жизнненых» и «безопасности» а не «безопастности», «Вобщем» пишется раздельно, не в обиду, просто исправь

-1

not_your_personal_coder Feb 21 2011 at 23:21

Спасибо, исправил.

Lebnik Feb 22 2011 at 10:52

странно, за что коммент заминусовали :( кармы и так нет, а теперь и еще понизили, вот так помогай людям :(((

not_your_personal_coder Feb 22 2011 at 11:44

Обычно подобные вещи пишут в личку автору, а не в комментариях к топику. Но то такое.
На LM можно почитать раздел «За что на хабре обычно минусуют», многим комментаторам будет полезно.

Lebnik Feb 22 2011 at 14:22

понял, спасибо

kashey Feb 21 2011 at 23:22

Эх, а ведь еще есть DOM 3 Events, от мохнатых годов, который сильно облегчает как создание, так и детектирования событий( он например позволяет узнать что у вас есть DOMMouseWheel)
Да только нигде его нету, этого третьего :(

not_your_personal_coder Feb 21 2011 at 23:26

Знаю про DOM 3, но читал о нём только в документах W3C. На сайте Мозиллы есть табличка, кратко описывающая DOM 2 и DOM 3, и списки их событий.
Если найду материал — обязательно напишу.

hf35 Feb 21 2011 at 23:39

МС заявляет о поддержке некоторых частей DOM 3 Events. Но честно говоря не щупал и не изучал этого вопроса.

kirilloid Feb 21 2011 at 23:22

Уже за диаграмму в начале можно плюс статье поставить.

Msviblov Feb 21 2011 at 23:28

Последнее время топики из песочницы радуют информативностью и качеством.
Спасибо за статью, было полезно.

Kigorw Feb 21 2011 at 23:45

может кому пригодится, пара вещей из опыта:
не получится симулировать события: вставки, копирования, выделения (ctrl+v, ctrl+c, ctrl+a)

Есть обертка, которую используют для тестирования в jquery.ui — github.com/eduardolundgren/jquery-simulate

azproduction Feb 22 2011 at 00:01

Вы немного ошиблись. Все события IE начинаются с «on» прим бинда element.attachEvent("onclick", function);
с кастомными событиями аналогично. Тут будет ошибка element.fireEvent('click', o);
Работающий пример:

<button onmouseover="this.fireEvent('onclick');" onclick="alert('click')">Hover me</button>

Ещё из недостатков ИЕ: события сгенерированные вручную не вызывают defaultAction, т.е. если вы кликаете по анкору, то перехода по ссылке не будет, если кликаете по чекбоксу, то его состояние не изменися. Но ИЕ в этом плане не одинок ФФ тоже не вызывает defaultAction. Вебкиты и Опера вызывают.

azproduction Feb 22 2011 at 00:32

«Ручной» запуск (генерация) события не создает по умолчанию действие

Это больше не верно чем верно. defaultAction как я писал выше не вызывается в ФФ и ИЕ во всех остальных вызывается. И я считаю, что все браузеры должны вызывать defaultAction по кастомному эвенту (в таком поведении больше пользы чем вреда).

Пример

<script>
var simulateClick = function (ctrl, shift, isMiddle) {
    var evt = document.createEvent('MouseEvents');
    evt.initMouseEvent('click', true, true, window, 0, 0, 0, 0, 0, 
                         ctrl, false, shift, false, 
                         isMiddle ? 1 : 0, null );
    document.getElementById('link').dispatchEvent(evt);
}
</script>
<p><a href="http://ya.ru/" id="link">Link to ya.ru</a></p>

<button onclick="simulateClick(true, true, false);">Simulate Ctrl+Shift+Click</button>
<button onclick="simulateClick(true, false, false);">Simulate Ctrl+Click</button>
<button onclick="simulateClick(false, false, false);">Simulate Click</button>
<button onclick="simulateClick(false, false, true);">Simulate Middle mouse button click</button>

Посмотреть живьём jsfiddle.net/azproduction/LRc7Z/

lahmatiy Feb 22 2011 at 10:27

Это то что касается эмуляции click. Если же Вы будете эмулировать события клавиатуры, то ситуация такая: FF вызывает default action, а вот webkit, Opera, IE — нет. Для webkit это бага, которой прилично времени и ее до сих пор не исправили.
Было обидно так как делали экранную клавиатуру, решение webkit-only. Пришлось костылять.

С другой стороны, не всегда нужно эмулировать событие с нуля (createEvent -> initEvent). Бывают ситуации, когда событие одного элемента нужно передать другому. Например, если какой-то блок перекрывает скролируемый блок, то событие скрола (крутим колесико мышки) над перекрывающим блоком не будет приводить к прокрутке скролируемого блока (что логично, но вызывает дискомфорт у пользователя). В такой ситуации можно ловить mouse wheel событие у перекрывающего блока и передавать через dispatchEvent скролируемому. Тут нас опять ждет «сюрприз»: FF и IE9 выбрасывают исключение, Opera не поддерживает такого события (или плохо пробовали), зато в webkit все работает на ура.

DOM events вещь мощная, и можно много интересных вещей придумать/сделать — но вот текущая реализация стандарта в браузерах оставляет желать лучшего, у каждого свои проблемы.

Rzhepish Feb 22 2011 at 00:52

Ой, я прамо испугался вначале, когда «Дом 2» в названии увидел.

xen32 Feb 22 2011 at 02:42

А вот мне больше хотелось чтобы после DOM 2 было написано не Events, а Hell on Earth.

not_your_personal_coder Feb 22 2011 at 02:43

И никнейм автора — idkfa

UFO just landed and posted this here

okneigres Feb 22 2011 at 16:27

Как насчёт разворачивания браузера на полный экран, как по F11? мне бы очень пригодилась такая функциональность, нигде найти не могу, как сделать без принуждения пользователя нажимать F11.

UFO just landed and posted this here

okneigres Feb 22 2011 at 16:50

однако, preventDefault() на открытие полноэкранного режима имеет эффект :)

azproduction Feb 22 2011 at 16:41

Это невозможно habrahabr.ru/qa/4468/#answer_19542

okneigres Feb 22 2011 at 16:51

спасибо

not_your_personal_coder Feb 22 2011 at 17:03

Хоть это и не относится к теме DOM Events, но всё же добавлю: большинство браузеров имеют параметры, которые позволяют запустить их в полноэкранном режиме. Например, для IE это "-k":

iexplore.exe -k

либо, если необходимо открыть сразу с необходмой страницей (в том числе, локальным файлом)

iexplore.exe -k "http://www.google.com"

Одним из проектов было создание анкеты для использования её на устройствах с тач-скринами, вот там и пригодилась такая возможность: при загрузке ОС Опера стартовала сразу в полноэкранном режиме с открытой страничкой анкеты.

not_your_personal_coder Feb 22 2011 at 02:19

Тут находится последняя версия Document Object Model Level 3 Events Specification. По ссылке откроется пункт 5.5.1, в котором приведена сводная таблица событий. Любознательные могут сравнить документ с предыдущей версией от 8 сентября 2009.

Любопытны несколько новых событий модуля MouseEvents — mouseenter и mouseleave, что может стать полезным для всякого рода RIA, и новый модуль WheelEvent с пока единственным событием wheel.

Помимо прочего, добавлены CompositionEvent и FocusEvent.

Voley Feb 22 2011 at 20:49

Dom 2 postroi svou lubov

Show the best of all time