Что такое браузерные события?
Событие обозначает действие или явление, которое происходит в программируемой системе. Система уведомляет вас о событии, чтобы вы при необходимости могли как-то на него отреагировать.
В этой статье я сделаю упор на события, которые происходят в рамках веб-браузеров. По сути, событие – это индикатор, который показывает, что произошло то или иное действие, для того, чтобы вы могли отреагировать на это действие соответствующим образом.
Чтобы пояснить то, о чем я вам говорю, давайте представим, что вы стоите на пешеходном переходе в ожидании зеленого света светофора, чтобы перейти дорогу. Событие – это смена цвета светофора. Это событие заставляет вас совершить некое действие - в данном случае перейти дорогу.
Все точно также, как и в веб-разработке, - всякий раз, когда происходит событие, которое нас интересует, мы совершаем действие.
Вот некоторые самые известные события, с которыми вы могли встречаться в веб-разработке:
1. События мыши
- click
- dblclick
- mousemove
- mouseover
- mousewheel
- mouseout
- contextmenu
- mousedown
- mouseup
2. События касания
- touchstart
- touchmove
- touchend
- touchcancel
3. События клавиатуры
- keydown
- keypress
- keyup
4. События формы
- focus
- blur
- change
- submit
5. Событие окна
- scroll
- resize
- hashchange
- load
- unload
Полный список событий и различных категорий, на которые они делятся, вы можете найти в документации MDN. Некоторые из перечисленных событий являются стандартными событиями, которые есть в официальных спецификациях, а некоторые - событиями, которые используется только в рамках определенных браузеров.
Что такое обработчики событий?
Как мы уже говорили выше, мы отслеживаем события. Так что, всякий раз, когда мы получаем уведомление о том, что произошло событие, программа по необходимости выполняет соответствующее действие.
Зачастую это действие выполняется внутри функций, которые называются обработчиками событий (или прослушивателями событий). Когда событие происходит, и вызывается обработчик событий, говорят, что событие было зарегистрировано. Это показано в коде, приведенном ниже.
Когда нажимается кнопка с идентификатором btn, вызывается обработчик событий и отображается предупреждение «Button has been clicked». Свойство onclick было присвоено функции, которая является обработчиком событий. Это один из трех способов, как можно добавить обработчик событий к элементу модели DOM.
const button = document.getElementById("btn");
button.onclick = function(){
alert("Button has been clicked");
}Стоит отметить, что чаще всего обработчики событий объявляются как функции, но они могут быть и объектами.
Как назначить обработчик событий
Есть несколько способов, как можно закрепить обработчики событий за элементами HTML. Мы рассмотрим эти способы, а также посмотрим, какие у них есть плюсы и минусы.
Назначение обработчика событий с помощью атрибута HTML
Это самый просто способ, как можно прикрепить обработчик событий к элементам HTML, но его использовать не рекомендуется. Он подразумевает использование встраиваемого атрибута события HTML под названием on<event>, значением которого является обработчик событий. Например, onclick, onchange, onsubmit и т.д.
Обратите внимание, что довольно часто можно встретить такие атрибуты событий HTML, как onClick, onChange или onSubmit. Это потому, что атрибуты HTML не чувствительны к регистру. По сути, вы можете использовать любой регистр (onclick, onClick или ONCLICK), и любой из вариантов будет верным с точки зрения синтаксиса, но принято использовать нижний регистр.
<button onclick = "alert('Hello world!')"> Click Me </button>
<button onclick = "(() => alert('Hello World!'))()"> Click Me Too </button>
<button onclick = "(function(){alert('Hello World!')})()"> And Me </button>В примере выше мы буквально назначили код JavaScript атрибуту событий HTML.
Обратите внимание на формат IIFE-функции (Immediately Invoked Function Expression – немедленно вызываемая функция) в последних двух кнопках. И несмотря на то, что это кажется простым и понятным, назначение встраиваемого атрибута событий HTML в качестве обработчика событий является неэффективным и сложным в сопровождении.
Представьте, что у вас таких кнопок аж 20 штук (если не больше). Если вы будете писать JS-код для каждой кнопки, то это будет очень долго. Всегда лучше писать код в отдельном файле, который потом можно будет использовать в других HTML-файлах.
Кроме того, у вас не может быть несколько встраиваемых срок JavaScript-кода. Встраиваемый код JavaScript в силу упомянутых выше причин считается антишаблоном. Так что, старайтесь избегать таких подходов. Исключение можно сделать только для тех случаев, когда вам нужно сделать что-то на скорую руку.
Объявление обработчика событий в теге script
Вы можете пойти другим путем, а именно объявить обработчик событий в теге script и вызвать его как встраиваемую функцию, как показано ниже.
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="./index.css" type="text/css" />
<script>
function onClickHandler(){
alert("Hello world!");
}
</script>
</head>
<body>
<div class="wrapper">
<button onclick = "onClickHandler()"> Click me </button>
</div>
</body>
</html>Отмечу, что простое присваивание имени функции в качестве значения атрибута события HTML, например, onclick = "onClickHandler", не сработает. Вам нужно вызвать ее, как показано выше, заключив вызываемый объект в кавычки, как и значение любого атрибута HTML.
Назначение обработчика событий с помощью свойства модели DOM
Если вы не хотите использовать встраиваемый атрибут события HTML (как мы показали выше), вы можете назначить обработчик событий в качестве значения свойства событий элемента модели DOM. Это можно сделать исключительно внутри тега script или в файле с кодом JavaScript.
У такого подхода есть ограничения, и одно из них заключается в том, что у вас не может быть несколько обработчиков событий для одного и того же события. В случае, если у вас все же есть несколько обработчиков событий для одного и того же события, как показано ниже, применятся будет только последний. А что касается остальных, они будут перезаписываться.
const button = document.getElementById("btn");
button.onclick = function(){
alert("Button has been clicked");
}
// Only this is applied { // Применяется только этот }
button.onclick = function(){
console.log("Button has been clicked");
}Если вы хотите удалить прослушиватель событий из события onclick, вы можете просто переназначить событию button.onclick значение null.
button.onclick = nullКак усовершенствовать метод добавления прослушивателя событий с помощью DOM
Тот метод добавления прослушивателей событий, который мы рассматривали выше, лучше всего использовать для встраиваемого JavaScript. И тем не менее, у него есть ограничение: у каждого элемента может быть только один обработчик событий.
Например, вы не можете применить несколько обработчиков событий к событию щелчка по элементу.
Но это ограничение можно обойти. Для этого были придуманы addEventListener и removeEventListener. С их помощью можно добавлять несколько обработчиков событий для одного и того же события одного и того же элемента.
const button = document.getElementById('btn');
button.addEventListener('click', () => {
alert('Hello World');
})
button.addEventListener('click', () => {
console.log('Hello World');
})В коде, приведенном выше, выбирается элемент с идентификатором btn, после чего посредством добавления двух обработчиков событий отслеживается событие щелчка (click). Когда будет вызван первый обработчик, появится сообщение «Hello World». После чего это же сообщение будет выведено в консоль.
Как вы уже могли заметить, изучив приведенные выше примеры, функция element.addEventListener записывается следующим образом:
element.addEventListener(event, eventHandler, [optional parameter])Параметры метода addEventListener
1. event
Первый параметр – event, то есть событие. Это обязательный параметр. Он представляет собой строку, которая определяет название события. Например, "click", "mouseover", "mouseout" и т.д.
2. eventHandler
Второй параметр также является обязательным. Он представляет собой функцию, которая вызывается тогда, когда возникает событие. Объект события передается в качестве первого параметра, и он зависит от типа события. Например, объект MouseEvent передается событию click.
3. Дополнительный параметр
Третий параметр является необязательным. Он представляет собой объект, у которого есть свойства:
- once: это логическое значение. Если его значение true, прослушиватель событий удаляется сразу после того, как сработает.
- capture: это также логическое значение. Он устанавливает фазу, на которой он должен обрабатывать событие. Это может быть фаза всплытия или фаза погружения. По умолчанию значение этого параметра false, поэтому событие перехватывается на этапе всплытия. Исторически сложилось так, что у этого параметра только два значения: true и false.
- passive: это также логическое значение. Если значение этого параметра true, то обработчик не будет вызывать метод preventDefault(). preventDefault() – это метод объекта события.
По аналогии, если вы хотите перестать отслеживать событие click, вы можете воспользоваться element.removeEventListener. Но так можно делать только тогда, когда прослушиватель событий был создан с помощью element.addEventListener. Запись этой функции аналогична записи функции element.addEventListener:
element.removeEventListener(event, eventHandler, [options])Для того, чтобы вы могли удалить event с помощью element.removeEventListener, функция, которую вы передаете element.addEventListener в качестве второго аргумента при добавлении прослушивателя событий, должна иметь название. Таким образом, вы гарантируете, что, если вы захотите удалить эту функцию, вы сможете передать ее в element.removeEventListener.
Также стоит упомянуть, что, если вы передали обработчику событий необязательные аргументы, то вы должны передать эти же необязательные аргументы removeEventListener.
const button = document.getElementById('btn');
button.removeEventListener('click', clickHandler)Что такое объект события?
У обработчика событий есть параметр, который называется объект события. Этот параметр содержит дополнительную информацию о событии.
Информация, которая хранится в объекте события, зависит от типа события. Например, у объекта события, переданного обработчику события click, есть свойство под названием target, которое обращается к элементу, из которого возникло событие click.
В примере ниже, если вы нажмете на элемент с идентификатором btn, event.target обратиться именно к нему. Объект события со свойством target передается всем обработчикам события click. И как мы уже говорили, у разных событий разные параметры объекта событий, которые содержат разную информацию.
const button = document.getElementById("btn");
button.addEventListener("click", event => {
console.log(event.target);
})Значение this
Значение this в обработчике событий – это элемент, для которого был зарегистрирован этот обработчик событий. Обратите внимание, что элемент, для которого был зарегистрирован обработчик событий, не всегда является элементом, для которого произошло событие.
Например, посмотрим на код, приведенный ниже. Здесь обработчик событий зарегистрирован на объекте wrapper. Как правило, значение this должно совпадать с event.currentTarget. Если вы нажмете кнопку (button), значение this внутри onClickHandler будет совпадать с div, а не с button, так как это div, на котором был зарегистрирован обработчик событий, и здесь не имеет значения тот факт, что событие click произошло от кнопки.
Это называется распространением событий. Это довольно важная концепция.
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="./index.css" type="text/css" />
<script>
function onClickHandler(){
console.log(this)
alert("Hello world!");
}
const wrapper = document.querySelector(".wrapper");
wrapper.addEventListener("click", onClickHandler);
</script>
</head>
<body>
<div class="wrapper">
<button> Click me </button>
</div>
</body>
</html>Заключение
В этой статье мы рассмотрели:
- что такое браузерные события
- различные способы добавления обработчиков событий к элементам DOM
- параметры объектов событий обработчиков событий
- значение this в обработчике событий
