Захват событий в JavaScript

Дата публикации: 2016-07-28

Обрезание строк в JavaScript при помощи метода trim()

От автора: после загрузки и полной готовности веб-страницы в JavaScript запускается целый каскад событий, которых становится еще больше, когда пользователь начинает взаимодействовать со страницей тем или иным образом. К событиям можно отнести загрузку страницы, ее прокрутку, клик по кнопке или даже заполнение формы. Для запуска событий в JavaScript нужен специальный код, который вы сами проектируете и прописываете, тем самым выстраивая более глубокое взаимодействие.

События в JS можно разделить на 4 больших группы:

UI события: срабатывают, когда пользователь взаимодействует с UI браузера (кнопки вокруг веб-страницы, являющиеся частью интерфейса браузера). К таким событиям также можно отнести те действия, которые выполняет страница независимо от пользователя. К таким событиям относится изменение размера окна, прокрутка страницы, загрузка и выгрузка контента.

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

События фокуса и форы. По большей части ассоциируются с формами: поле input «получает фокус», когда пользователь готов с ним взаимодействовать. Другие события отслеживают передачу формы, изменение значений полей формы и т.д.

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

События мутаций и наблюдатели. Мутирующие элементы отслеживаются при изменении структуры DOM: к примеру, когда элементы на странице вставляются или удаляются при помощи скрипта.

Привязка обработчика события

Специальный код, который будет срабатывать только для определенного элемента DOM, создает обработчик события. В JS есть три способа создать обработчик событий:

1. Стандартный HTML обработчик события через атрибуты

Старейший метод привязки событий, один из самых встречаемых до сих пор. Метод использует специальные атрибуты в разметке. К примеру:

<input type="text" id="username" onblur="checkName()">

1	<input type="text" id="username" onblur="checkName()">

В примере выше после того, как поле получит фокус, и пользователь перейдет к заполнению следующего поля (к примеру, при помощи TAB или обычного клика), элемент вызовет функцию checkName, которая написана в JS.
Стандартные HTML обработчики событий не рекомендуют использовать в современной разработке, в основном из-за того, что функционал перемешивается с разметкой, что усложняет работу и отладку кода.

2. Стандартные обработчики событий в DOM

Данная техника разделяет JS и разметку, но имеет то же самое ограничение – событиям можно присвоить только одну функцию. Эквивалентной записью HTML обработчика событий в DOM будет:

var username = document.getElementbyId("username");
username.onblur = checkName;

1 2	var username = document.getElementbyId("username"); username.onblur = checkName;

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

Как и в предыдущем примере, функция checkName запускается после того, как элемент формы теряет фокус.

3. Обработчики событий (Event Listeners)

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

var username = document.getElementbyId("username");
username.addEventListener("blur", checkName, false);

1 2	var username = document.getElementbyId("username"); username.addEventListener("blur", checkName, false);

Булево значение в конце указывает на то, нужно ли захватить событие. Обычно задается false. В простых скриптах событие часто записывается в виде анонимной функции:

var username = document.getElementbyId("username");
username.addEventListener("blur", function() {
    // действия по срабатыванию события
})

var username = document.getElementbyId("username");

username.addEventListener("blur", function() {

// действия по срабатыванию события

})

Обратите внимание, что в HTML и DOM обработчиках событий присутствует префикс on, которого нет в современных обработчиках. В будущих статьях я подробно опишу события, а сейчас стоит уделить внимание паре вещей:

Не все события равны

Важно понять, что не все события можно обработать одинаково. События scroll и resize запускаются очень часто, из-за чего с ними нужно очень осторожно работать, чтобы не понизить скорость работы скрипта. То же самое касается и на первый взгляд безобидных событий типа input. Производительность скрипта может сильно просесть, если он будет пытаться постоянно отвечать на часто запускаемое событие input на слайдере range.

Не все события отслеживаются

Наблюдатели за мутациями на данный момент не могут отслеживать все изменения во всех элементах на странице. К примеру, нет способа отследить изменение высоты элемента (при сужении контейнера в адаптивном дизайне текст внутри него перестраивается, а элементы становятся длиннее). Все же есть способы отследить изменения, об этом я расскажу в следующей статье.

Прикрепляйте события к правильным элементам

Событие onclick применимо ко многим элементам, в том числе и к ссылкам. Есть общее правило – к ссылкам не рекомендуется цеплять код JS. По клику на ссылку пользователь должен попасть на другую область сайта или на якорь. Если же вам нужен UI элемент, с помощью которого можно изменить что-то на той же странице, тогда вам подойдет button. На кнопку можно без проблем вешать JavaScript.

Не используйте JavaScript, если это можно сделать при помощи CSS

В сравнении с CSS JavaScript медленный и ненадежный. По сути, CSS нужно использовать в качестве альтернативы сложным скриптам везде, где это возможно. Тем не менее, CSS не умеет всего. Он хорошо справляется с :hover (во многих случаях он заменяет события прикосновения), а также может заменить событие click при помощи :target в некоторых случаях. CSS анимация автоматически запускается после загрузки страницы, а также есть специальные CSS состояния, которые можно запускать для элементов типа радио кнопок. Однако что-то более сложное обычно лучше оставить для JavaScript.

Источник: //thenewcode.com/

Редакция: Команда webformyself.

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее