Введение в события JavaScript

Введение в события JavaScript

Здравствуйте! Рассмотрев тему «Работа с DOM в JavaScript», перейдем непосредственно к теме «События в Javascript». Надо сказать, что данная тема является чуть ли не основной для обработки сценариев в браузере.    События нужны, чтобы реагировать на действие пользователя при взаимодействии со страницей.

Событие — это своего рода сигнал браузера о том, что что-то произошло.  Событий существует очень много мы же с вами рассмотрим лишь только основные события.

Введение в события в javascript

События мыши:

  • click – происходит, когда мы кликаем куда-либо левой кнопкой мыши
  • contextmenu – случается в момент клика правой кнопкой мыши
  • mouseover –  происходит при наведении мышки на элемент
  • mouseout — происходит при отведении мыши от элемента
  • mousedown и mouseup –  когда нажали и соответственно отжали кнопку мыши
  • mousemove – при  перемещении мыши над элементом мышиъ
  • dblclick —  происходит когда два раза кликают левой кнопкой мыши

События на элементах форм:

  • submit – посетитель отправил форму на сервер <form>, также это событие происходит при нажатии клавиши Enter на форме
  • focus – происходит, когда пользователь установил курсор в текстовое поле
  • blur —  происходит, когда поле теряет фокус, то есть пользователь выбирает другое поле
  • change —  происходит  когда пользователь начинает набирать текст в поле

События клавиатуры:

  • keydown – когда пользователь нажимает клавишу на клавиатуре
  • keyup – когда пользователь отпускает клавишу на клавиатуре

События документа:

  • DOMContentLoaded – когда  веб-страница полностью загрузилась

События CSS:

  • transitionend – когда CSS-анимация завершится.

Также есть и много других событий.

Основное назначение обработчиков событий

Обработчик события в роли которого выступает функция предназначен для реагирования на определенное событие.  Ведь для того чтобы что-то произошло при клике мыши в окне браузера и нужен как раз обработчик события. Далее рассмотрим основные способы задания обработчика события в Javascript.

Читайте также  Объект события Event

Назначение обработчика события через атрибут HTML.

Сначала рассмотрим способ, который где-то уже и устарел, но его все же  еще можно встретить в примерах на просторах Интернета. Способ этот заключается в  назначении обработчика через  атрибут HTML при этом к  названию события добавляется приставка on. Давайте рассмотрим на примере.

  <button onclick="show()" >Clck Me</button>

Теперь в скрипте надо описать функцию show() весь код, котрый будет в этой функции выполнится по событию click на кнопке.

function show(){
  alert('Hello');
 }

Аналогичным образом можно делать и для других событий. К недостаткам данного способа можно отнести невозможность назначить несколько событий на один обработчик и также разделение сама подписка на событие находится в HTML коде а функция описывается в JavaScript. Всех этих недостатков лишен второй способ назначения обработчика события.

Назначения обработчика события через методы addEventListener и removeEventListener

Функции  addEventListener и removeEventListener являются  более современным способом назначить или удалить обработчик, и при этом они  позволяют использовать сколько угодно любых обработчиков. Сейчас — это наиболее часто встречающийся способ для назначения обработчика события в JavaScript.

Назначение обработчика события представляется вызовом addEventListener с тремя аргументами:

elem.addEventListener(event, handler[, phase]);
event
Собственно имя события, например mouseover
handler
функция, которая и будет являться обработчиком события
phase
Необязательный аргумент, «фаза», на которой обработчик должен сработать.

А вот удаление обработчика осуществляется вызовом removeEventListener:

// нужно передать те же аргументы, что были у addEventListener
elem.removeEventListener(event, handler[, phase]);
Удаление потребует именно такую же функцию

Для удаления нужно передать именно ту функцию-обработчик которая была назначена.

Вот таким образом  removeEventListener не сработает:

elem.addEventListener( "click" , function() {alert('Hello!')});
// ....
elem.removeEventListener( "click", function() {alert('Hello!')});

В removeEventListener передана не та же функция, а другая, хотя и  с одинаковым кодом, но это не важно.

Читайте также  Мышь: Drag'n'Drop или перетаскивание элементов на веб-странице

Вот так будет правильно:

function handler() {
  alert( 'Спасибо!' );
}

input.addEventListener("click", handler);
// ....
input.removeEventListener("click", handler);

Хочу обратить ваше внимание на такой факт, что если вы в качестве обработчика события используете анонимную функцию, то данный обработчик невозможно будет удалить.

Метод addEventListener позволяет добавлять не один обработчик, а несколько обработчиков на одно событие одного элемента:

<input id="elem" type="button" value="Кликни меня"/>
<script>
  function handler() {
    alert('Спасибо!');
  };

  function handler() {
    alert('Спасибо ещё раз!');
  }

  elem.onclick = function() { alert("Hello"); };
  elem.addEventListener("click", handler1); // Спасибо!
  elem.addEventListener("click", handler2); // Спасибо ещё раз!
</script>

Итоги

Имеются 3 способа для назначения обработчиков событий:

  1. Атрибут HTML: onclick=»…».
  2. Свойство: elem.onclick = function.
  3. Современные методы:
  • Современные: elem.addEventListener( event, handler[, phase]) и удаление через removeEventListener.

Сравнение addEventListener и onclick:

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

Этим уроком  мы с вами только лиши открываем тему  события в JavaScript, но тем не менее задачи вы можете решить уже.

Задачи

Спрятать элемент при клике

Используя JavaScript, сделайте так, чтобы при клике на кнопку исчезал div  с id=»text».

Прячущаяся кнопка

Вам надо создать кнопку, при клике на которую, она бы скрывала сама себя.

Раскрывающееся меню

Создайте меню, которое бы  раскрывалось и скрывалось при клике.

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

Плюсануть
Поделиться

Об авторе

admin administrator

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам: