Events

Question 1

Сколько существует способов назначения обработчиков события? В чем достоинства и недостатки?

Answer 1

Существует три способа повесить обработчик события:
- Атрибут HTML: onclick=”…”
- DOM свойство: elem.onclick = function
- Специальные методы:
elem.addEventListener( событие, handler[, phase]),
удаление через removeEventListener

Достоинства:
Некоторые события можно назначить только через addEventListener.
Метод addEventListener позволяет назначить много обработчиков на одно событие.
Недостатки:
Обработчик, назначенный через onclick, проще удалить или заменить.

Question 2

Как выполняются события в главном потоке? Какие события добавляются синхронно и какие асинхронно? Как выполнить событие или функцию асинхронно?

Answer 2

JavaScript выполняется в едином потоке.
Обычно события становятся в очередь и обрабатываются в порядке поступления, асинхронно, независимо друг от друга.
Синхронными являются вложенные события, инициированные из кода.
Чтобы сделать событие гарантированно асинхронным, используется вызов через setTimeout(func, 0).

Question 3

Как работает “всплытие” (bubbling stage), какой метод препятствует всплытию события?
Что такое “погружение”, когда оно работает?

Answer 3

При наступлении события обработчики сначала срабатывают на самом вложенном элементе, затем на его родителе, затем выше и так далее, вверх по цепочке вложенности.
event.stopPropagation()
При погружении событие возникает с самого верхнего родителя (от корня документа) и доходит вниз до целевого элемента (event.target).
Обработчики, добавленные через on…-свойство, ничего не знают о стадии перехвата, а начинают работать со всплытия.
addEventListener третий аргумент:
- Если аргумент true, то событие будет перехвачено по дороге вниз.
- Если аргумент false, то событие будет поймано при всплытии.

Question 4

Чем полезно делегирование событий для элементов DOM? Каков базовый алгоритм? Преимущества и недостатки. Прием проектирования “поведение”.

Answer 4

Он отлично подходит, если есть много элементов, обработка которых очень схожа.

Алгоритм:

• Вешаем обработчик на контейнер.
• В обработчике: получаем event.target.
• В обработчике: если event.target или один из его родителей в контейнере (this) – интересующий нас элемент – обработать его.

Преимущества:

• Упрощает инициализацию и экономит память: не нужно вешать много обработчиков.
• Меньше кода: при добавлении и удалении элементов не нужно ставить или снимать обработчики.
• Удобство изменений: можно массово добавлять или удалять элементы путём изменения innerHTML.

Недостатки:

• Событие должно всплывать. Нельзя, чтобы какой-то промежуточный обработчик вызвал event.stopPropagation() до того, как событие доплывёт до нужного элемента.
• Делегирование создает дополнительную нагрузку на браузер, ведь обработчик запускается, когда событие происходит в любом месте контейнера, не обязательно на элементах, которые нам интересны. Но обычно эта нагрузка настолько пустяковая, её даже не стоит принимать во внимание.

Шаблон проектирования «поведение» (behavior) позволяет задавать хитрые (условные) обработчики на элементе декларативно, установкой специальных HTML-атрибутов (с проверкой hasAttribute()) и классов.

Question 5

Какие есть действия браузера по-умолчанию? Как отменять действия браузера по-умолчанию?

Answer 5

• Клик по ссылке инициирует переход на новый URL.
• Нажатие на кнопку «отправить» в форме – отсылку ее на сервер.
• Двойной клик на тексте – инициирует его выделение.
• mousedown – нажатие кнопкой мыши в то время как курсор находится на тексте начинает его выделение.
• click на – ставит или убирает галочку.
• submit – при нажатии на в форме данные отправляются на сервер.
• wheel – движение колёсика мыши инициирует прокрутку.
• keydown – при нажатии клавиши в поле ввода появляется символ.
• contextmenu – при правом клике показывается контекстное меню браузера.

Отмена (2 способа):

Основной способ – это воспользоваться объектом события. Для отмены действия браузера существует стандартный метод event.preventDefault().
Если же обработчик назначен через onсобытие (не через addEventListener), то можно просто вернуть false из обработчика.

Question 6

Как сгенерировать свой обработчик? Как инициализировать событие (запустить)? Свойство, чтобы определить, что событие было инициировано пользователем или скриптом?

Answer 6

Объект события в нём создаётся при помощи встроенного конструктора Event.
var event = new Event(тип события[, флаги]);
Где:
Тип события – может быть как своим, так и встроенным, к примеру “click”.
Флаги – объект вида { bubbles: true/false, cancelable: true/false }, где свойство bubbles указывает, всплывает ли событие, а cancelable – можно ли отменить действие по умолчанию.
Флаги по умолчанию: {bubbles: false, cancelable: false}.

Чтобы инициировать событие, запускается elem.dispatchEvent(event). Если в процессе обработки события был вызван event.preventDefault(), то dispatchEvent возвратит false.

isTrusted: false – означает, что событие сгенерировано скриптом, это свойство изменить невозможно.