Событие javascript: Введение в браузерные события

Содержание

Список событий в JavaScript

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

События мыши

Атрибут	Описание
click	Клик мыши на элементе (событие срабатывает после того, как кнопка мыши отпущена).
dblclick	Сделан двойной щелчок.
mousedown	Кнопка мыши нажата.
mouseup	Кнопка мыши отжата.
mouseover	Указатель мыши находится над элементом.
mousemove	Указатель мыши движется над элементом.
mouseout	Указатель мыши двигался над элементом, но ушёл с него.

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

Атрибут	Описание
keydown	Зажата кнопка на клавиатуре.
keypress	Тоже что и «keydown», но и кнопка зажимается настолько долго, что происходит повторный набор символа.
keyup	Была отпущена нажатая кнопка.

События полей, форм и страницы

Атрибут	Описание
submit	Форма начала отправляться (нажата кнопка «submit»), но переадресация на страницу в атрибуте «action» ещё не началась.
change	Содержимое элемента изменилось (срабатывает в том числе, если изменились значение атрибутов).
select	Текст или дочерние элементы выделены.
focus	Элемент получил фокус. К примеру, клик по текстовому полю даёт на него фокус и можно набирать текст
blur	Элемент потерял фокус.
load	Завершена загрузка страницы в браузере.
unload	Страница в браузере закрывается или происходит переход на другую страницу по ссылке.
scroll	Происходит прокрутка страницы или элемента.

Cмотрите другие статьи:

Работа с атрибутами элементов в JavaScript

Список атрибутов для событий в JavaScript

Была ли эта статья полезна? Есть вопрос?

Закажите недорогой хостинг Заказать

всего от 290 руб

События в Javascript

В этом видео мы с вами рассмотрим события (по английски евенты) в javascript. И мы с вами на самом деле их уже использовали, когда писали onсlick на DOM елементе. То есть мы с вами добавляли евент клик на DOM елемент.

Зачем нам нужны евенты вообще? Когда мы хотим выполнить какой-то код при клике на елемент, либо при наведении мыши, либо при фокусе, то нам нужны евенты. То есть мы вешаем евент на DOM елемент и он там висит. И ждет, когда же мы сделаем такой евент. Например когда мы кликнем по елементу. И тогда он выполняет эту функцию.

Вешать евенты с помощью html, это неправильно и не гибко. Намного лучше для этого использовать специальный метод. Это метод addEventListener.

Давайте уберем атрибут onclick с нашей кнопки, и добавим ей класс change

<button>Change</button>

Теперь в начале выполнения нашего javascript файла мы хотим повесить слушателя (по английски listener) этого евента на нашу кнопку.

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

console.log(document.querySelector('.change'))

Если мы посмотрим в браузер, то нам вывелось null. И вполне справедливо, так как браузер исполняет код сверху вниз, и на момент, когда у нас отрабатывает javascript, DOM у нас еще не загружен. Пофиксить это очень просто. Давайте переставим script javascript в конец body. Это абсолютно нормальная практика.

<body>
  <button>Change</button>
  <script src='code.js'></script>
</body>

Теперь если мы посмотрим в браузер, то наш елемент вывелся и мы можем с ним работать. Давайте повесим listener клика на нашу кнопку.

Давайте запишем наш DOM елемент в переменную и добавим addEventListener. Это функция, которая первым параметром принимает название евента, в нашем случае клик, а вторым параметром функцию, которая выполнится, когда мы кликнем.

var changeButton = document.querySelector('.change')
changeButton.addEventListener('click', function () {
  console.log('we clicked!')
})

Если мы посмотрим в браузер, то при клике у нас вывелся наш console.log.

И таким образом можно навешивать сколько угодно обработчиков. Наприме давайте добавим еще один listener.

var changeButton = document.querySelector('.change')
changeButton.addEventListener('click', function () {
  console.log('we clicked!')
})
changeButton.addEventListener('click', function () {
  console.log('we clicked2!')
})

Давайте теперь напишем небольшой пример. Мы хотим создать 2 елемента и при наведении на первый, мы хотим показывать второй елемент.

Давайте добавим 2 елемента на страницу и добавим им классы. Второй елемент скроем написав inline display: none. Конечно, лучше было бы написал стили в отдельном css файле, но для маленького примера можно и так.

<div>
  First element
</div>
<div>
  Second element
</div>

Теперь давайте найдем эти два елемента в нашем javascript

var firstElement = document.querySelector('.firstElement')
var secondElement = document.querySelector('.secondElement')

И навесим на первый елемент 2 события: mouseover и mouseout. То есть первое будет происходить при наведении на елемент, а второе когда курсор уходит с елемента.

var firstElement = document.querySelector('.firstElement')
var secondElement = document.querySelector('.secondElement')
firstElement.addEventListener('mouseover', function () {
  console.log('mouse in')
})
firstElement.addEventListener('mouseout', function () {
  console.log('mouse out')
})

Если мы посмотрим в браузер, то при наведении и выведении курсора выводится console. log.

Давайте теперь при наведении добавим второму елементу display: block, а при уведении курсора display: none

var firstElement = document.querySelector('.firstElement')
var secondElement = document.querySelector('.secondElement')
firstElement.addEventListener('mouseover', function () {
  secondElement.style.display = 'block'
})
firstElement.addEventListener('mouseout', function () {
  secondElement.style.display = 'none'
})

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

Если у вас что-то не получается, либо возникли вопросы и комментарии, пишите их прямо под этим видео и я обязательно на них отвечу.

Событие

— веб-API | MDN

Интерфейс Event представляет событие, происходящее в DOM.

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

Его также можно запустить программно, например, вызвав метод HTMLElement.click() элемента или определив событие, а затем отправив его в указанную цель, используя EventTarget.dispatchEvent() .

Существует множество типов событий, некоторые из которых используют другие интерфейсы, основанные на основном интерфейсе Event . Само событие содержит свойства и методы, общие для всех событий.

Многие элементы DOM можно настроить так, чтобы они принимали (или «прослушивали») эти события и выполняли код в ответ на их обработку (или «обработку»). Обработчики событий обычно подключаются (или «прикрепляются») к различным элементам HTML (таким как