«Единственный способ творить великие дела – это любить то, что ты делаешь»
JavaScript


Игра на «Морской Бой» на JavaScript: Простая Игра и Игра для Двоих


Далее на странице...



Как взаимодействовать с элементами на странице?

События и их обработчики. Это одна из самых важных тем в 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.



Читайте также...



Отзывы и комментарии:

Комментариев нет...

Оставить отзыв:

Ваше Имя:

Текст комментария:

Ответьте на вопрос:

Сколько дней в Високосном году?


Рунет - Часть 4
Помощь сайту
Yandex-деньги/Ю-Money
410011236419322
Перевод на карту СБ
4276 1300 1671 5819
WebMoney
R711879515665 Z861169301432

Тематические публикации
Популярные заметки
Последние заметки