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