События JavaScript
События HTML — это «вещи» , которые происходят с элементами HTML.
Когда JavaScript используется на HTML-страницах, JavaScript может «реагировать» на эти события.
HTML-события
Событием HTML может быть что-то, что делает браузер, или что-то, что делает пользователь.
Вот несколько примеров HTML-событий:
- Веб-страница HTML завершила загрузку
- Поле ввода HTML было изменено
- Была нажата кнопка HTML
Часто, когда происходят события, вы можете захотеть что-то сделать.
JavaScript позволяет выполнять код при обнаружении событий.
HTML позволяет добавлять атрибуты обработчика событий с кодом JavaScript к элементам HTML.
С одинарными кавычками:
<element
event='some JavaScript'>
С двойными кавычками:
<element
event="some JavaScript">
В следующем примере к элементу onclickдобавляется атрибут (с кодом)
:<button>
Пример
<button onclick="document.getElementById('demo').innerHTML = Date()">The time is?</button>
В приведенном выше примере код JavaScript изменяет содержимое элемента с id="demo".
В следующем примере код изменяет содержимое собственного элемента (используя this.innerHTML):
Пример
<button onclick="this.innerHTML = Date()">The time is?</button>
Код JavaScript часто состоит из нескольких строк. Чаще можно увидеть атрибуты событий, вызывающие функции:
Пример
<button onclick="displayDate()">The time is?</button>
Общие HTML-события
Вот список некоторых распространенных HTML-событий:
| Событие | Описание |
|---|---|
| по изменению | HTML-элемент был изменен |
| по щелчку | Пользователь щелкает элемент HTML |
| при наведении мыши | Пользователь наводит указатель мыши на элемент HTML. |
| onmouseout | Пользователь отводит указатель мыши от элемента HTML. |
| onkeydown | Пользователь нажимает клавишу клавиатуры |
| в процессе | Браузер завершил загрузку страницы |
Список намного длиннее: W3Schools JavaScript Reference HTML DOM Events .
Обработчики событий JavaScript
Обработчики событий можно использовать для обработки и проверки пользовательского ввода, действий пользователя и действий браузера:
- Что нужно делать каждый раз при загрузке страницы
- Что нужно делать, когда страница закрыта
- Действие, которое должно выполняться, когда пользователь нажимает кнопку
- Контент, который должен быть проверен, когда пользователь вводит данные
- И больше ...
Можно использовать множество различных методов, позволяющих JavaScript работать с событиями:
- Атрибуты событий HTML могут напрямую выполнять код JavaScript
- Атрибуты событий HTML могут вызывать функции JavaScript
- Вы можете назначать свои собственные функции обработчика событий элементам HTML.
- Вы можете запретить отправку или обработку событий
- И больше ...
Вы узнаете намного больше о событиях и обработчиках событий в главах HTML DOM.