Далее на странице...
- Список событий и справочник по событиям
- Обработчик события Обработчик события - это функция Примеры распространенных событий
- Как в JavaScript назначить обработчик события
- 1-ый способ назначить обработчик события Использование html-атрибута
- 2-ой способ назначить обработчик события Использование свойства onClick Минусы использования свойства onClick
Как взаимодействовать с элементами на странице?
События и их обработчики. Это одна из самых важных тем в JavaScript.
Ведь на странице все строится на взаимодействии с элементами. Многие веб-технологии и скрипты опираются на событийную систему.
Событие это - сигнал от браузера о том, что на странице что-то произошло.
Каковы наши действия на странице? Это клик, двойной клик, наведение мыши или, наоборот, мы убираем указатель с элемента страницы. А также прокрутка колесом мыши, отправка данных формы и т.п.
Таким образом, всё, чем занимается пользователь на странице - это события, которые разработчик может "отлавливать".
Список событий и справочник по событиям
Существует список родных событий JavaScript - здесь представлены основные события.
А также справочник по событиям - это официальная документация и здесь событий намного больше.
Обработчик события
Чтобы как-то использовать событие, нужно назначить обработчик события.
Обработчик события - это функция, которая срабатывает сразу, как только событие произошло.
Примеры простых и распространенных событий:
- пользователь нажимает на пункт меню, после чего срабатывает функция, которая раскрывает меню;
- пользователь нажимает на кнопку "Отправить" и данные из формы отправляются на сервер.
Порядок действий всегда один и тот же: происходит событие --> срабатывает функция (обработчик события).
Как в JavaScript назначить обработчик события
Ниже представлен код тестовой html-сраницы, которая будет использоваться для работы. Это ссылка на архив с исходными файлами.
HTML-код исходной страницы
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>JavaScript</title>
<link rel="stylesheet" href="css.css">
</head>
<body>
<button id="btn">Нажми меня</button>
<button >Нажми меня</button>
<button>Нажми меня</button>
<a href="https://www.youtube.com/">https://www.youtube.com/</a>
<script src="script.js"></script>
</body>
</html>
Исходная страница в Браузере
Далее рассмотрим способы: как в JavaScript назначить обработчик события.
Существует три способа назначить обработчик события.
1-ый способ назначить обработчик события
1-ый способ назначить обработчик события - это использование html-атрибута, в который передается функция из JavaScript (или какое-либо другое действие, заданное средствами html - см. код ниже) и, которая в свою очередь выполняется на странице.
Например, для события click (одинарный щелчок - нажата и отпущена кнопка мыши) назначается обработчик события onClick.
HTML-код
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>JavaScript</title>
<link rel="stylesheet" href="css.css">
</head>
<body>
<button onclick="alert('Hi....')" id="btn">Нажми меня</button>
<button >Нажми меня</button>
<button>Нажми меня</button>
<a href="https://www.youtube.com/">https://www.youtube.com/</a>
<script src="script.js"></script>
</body>
</html>
Результат в Браузере
В строке №10 (для 1-ой кнопки) был назначен обработчик события onClick, для которого указывается действие, выполняемое методом alert. И теперь при щелчке мыши на 1-ой кнопке, появляется модальное окно с текстом Hi.....
Этот способ назначения обработчика события не рекомендован для использования и в реальных проектах не встречается.
2-ой способ назначить обработчик события
Второй способ назначить обработчик события - это использование свойства onClick.
Для начала нужен элемент, на который будет «вешаться» обработчик события.
Пример 1.1
JavaScript-код
'use strict';
// Получаем доступ к первой кнопке
const btn = document.querySelector('button');
btn.onclick = function(){
alert('Click');
}
Результат в Браузере
При помощи свойства onClick элементу страницы (первой кнопке) назначается обработчик события. Теперь при щелчке мыши на этом элементе срабатывает функция, которая выполняет какое-либо действие.
Этот способ назначения обработчика события в реальных проектах редко используется.
Так как если назначить этому же элементу еще одно событие, то оно будет перекрывать первое действие (в реальном проекте с большим объемом кода разработчик может забыть или вообще не знать, что элементу уже назначен обработчик события).
Пример 1.2
JavaScript-код
'use strict';
// Получаем доступ к первой кнопке
const btn = document.querySelector('button');
btn.onclick = function(){
alert('Click');
}
// Обработчик события назначается повторно
btn.onclick = function(){
alert('Click Second');
}
Результат в Браузере
Из примера видно: если при помощи свойства onClick элементу страницы обработчик события назначается повторно, то в результате мы увидим только второе действие. Это первый минус использования свойства onClick. Кроме этого....
Обработчики событий иногда нужно удалить: то есть событие один раз произошло и повторное взаимодействие с элементом страницы не требуется.
Синтаксис примеров 1.1 и 1.2 не дает возможности удалить обработчик события.
Это еще один минус (не явный) использования свойства onClick.
