Событие — это то, что происходит, когда пользователь взаимодействует с веб-страницей, например, когда он щелкает ссылку или кнопку, вводит текст в поле <input>
или <textarea>
, делает выбор в поле <select>
, нажимает клавишу на клавиатуре, перемещает указатель мыши, отправляет форму и т. д. В некоторых случаях сам браузер может инициировать такие события, например после окончательной загрузки страницы.
Когда происходит событие, вы можете использовать обработчик событий JavaScript (event listener), чтобы обнаружить и выполнить определенную задачу или набор задач. Как правило имена для обработчиков событий всегда начинаются со слова «on», поэтому обработчик для события click называется onclick
, аналогично обработчик для события load называется onload
, обработчик для события blur называется onblur
, и так далее.
Есть несколько способов назначить обработчик событий. Самый простой способ — добавить их непосредственно в начальный тег элементов HTML с помощью специальных атрибутов. Например, чтобы назначить обработчик щелчка для элемента кнопки, мы можем использовать атрибут onclick
, например:
<button type="button" onclick="alert('Hello World!')">Click Me</button>
However, to keep the JavaScript seperate from HTML, you can set up the event hиler in an external JavaScript file or within the <script>
и </script>
tags, like this:
Однако, чтобы отделить JavaScript от HTML, вы можете настроить обработчик событий во внешнем файле JavaScript или в тегах <script>
и </script>
, например:
<button type="button" id="myBtn">Click Me</button>
<script>
function sayHello() {
alert('Hello World!');
}
document.getElementById("myBtn").onclick = sayHello;
</script>
Поскольку атрибуты HTML нечувствительны к регистру, onclick
также может быть написано как onClick
, OnClick
или ONCLICK
. Но его значение (value) чувствительно к регистру.
В целом, события можно разделить на четыре основные группы — события мыши, события клавиатуры, события формы и события документа/окна. Рассмотрим их подробнее.
События Mouse
Событие мыши запускается, когда пользователь щелкает какой-то элемент, перемещает указатель мыши на элемент и т. д. Вот некоторые наиболее важные события мыши и их обработчик.
Событие onclick
Событие click происходит, когда пользователь нажимает на элемент на веб-странице. Часто это элементы формы и ссылки. Вы можете обработать событие click с помощью обработчика onclick
.
Следующий пример покажет вам предупреждающее сообщение при нажатии на элементы.
<button type="button" onclick="alert('Вы нажали кнопку!');">Кнопка</button>
<a href="#" onclick="alert('Вы нажали на ссылку!');">Ссылка</a>
Событие oncontextmenu
Событие contextmenu возникает, когда пользователь нажимает правую кнопку мыши на элементе, чтобы открыть контекстное меню. Вы можете обработать событие contextmenu с помощью обработчика oncontextmenu
.
В следующем примере будет показано предупреждение при щелчке правой кнопкой мыши по элементам.
<button type="button" oncontextmenu="alert('Вы нажали правую кнопку!');">Кнопка</button>
<a href="#" oncontextmenu="alert('Вы щелкнули правой кнопкой мыши ссылку!');">Ссылка</a>
Событие onmouseover
Событие mouseover происходит, когда пользователь наводит указатель мыши на элемент. Вы можете обработать событие mouseover с помощью обработчика onmouseover
.
Следующий пример покажет вам предупреждающее сообщение при наведении мыши на элементы.
<button type="button" onmouseover="alert('Вы поместили указатель мыши на кнопку!');">Кнопка</button>
<a href="#" onmouseover="alert('Вы поместили указатель мыши на ссылку!');">Ссылка</a>
Событие onmouseout
Событие mouseout происходит, когда пользователь перемещает указатель мыши за пределы элемента. Вы можете обработать событие mouseout с помощью обработчика onmouseout
.
Следующий пример покажет вам предупреждающее сообщение, когда происходит событие mouseout.
<button type="button" onmouseout="alert('Вы убрали указатель с кнопки!');">Кнопка</button>
<a href="#" onmouseout="alert('Вы убрали указатель с ссылки!');">Ссылка</a>
События Keyboard
Событие клавиатуры вызывается, когда пользователь нажимает или отпускает клавишу на клавиатуре. Вот некоторые наиболее важные события клавиатуры и их обработчик событий.
Событие onkeydown
Событие нажатия клавиши происходит, когда пользователь нажимает клавишу на клавиатуре. Вы можете обработать событие keydown с помощью обработчика onkeydown
.
Следующий пример покажет вам предупреждающее сообщение, когда происходит событие keydown.
<input type="text" onkeydown="alert('Вы нажали клавишу внутри ввода текста!')">
<textarea onkeydown="alert('Вы нажали клавишу внутри текстовой области!')"></textarea>
Событие onkeyup
Событие keyup происходит, когда пользователь отпускает клавишу на клавиатуре. Вы можете обработать событие keyup с помощью обработчика onkeyup
.
В следующем примере будет показано предупреждающее сообщение при возникновении события keyup.
<input type="text" onkeyup="alert('Вы отпустили клавишу внутри ввода текста!')">
<textarea onkeyup="alert('Вы отпустили клавишу внутри textarea!')"></textarea>
Событие onkeypress
Событие нажатия клавиши происходит, когда пользователь нажимает клавишу на клавиатуре, с которой связано символьное значение. Например, такие клавиши, как Ctrl, Shift, Alt, Esc, клавиши со стрелками и т. д., не будут генерировать события keypress, но будут генерировать события keydown и keyup.
Вы можете обработать событие нажатия клавиши с помощью обработчика onkeypress
. В следующем примере будет показано предупреждающее сообщение при возникновении события нажатия клавиши.
<input type="text" onkeypress="alert('Вы нажали клавишу внутри ввода текста!')">
<textarea onkeypress="alert('Вы нажали клавишу внутри textarea!')"></textarea>
События Form
Событие формы вызывается, когда элемент управления получает или теряет фокус, или когда пользователь изменяет значение элемента управления формы, например, вводя текст в поле ввода, выбирает любой параметр и т. д. Вот некоторые наиболее важные события формы и их обработчик.
Событие onfocus
Событие focus происходит, когда пользователь фокусируется на элементе на веб-странице. Вы можете обработать событие фокуса с помощью обработчика onfocus
.
Следующий пример выделит фон ввода текста желтым цветом, когда он получит фокус.
<script>
function highlightInput(elm){
elm.style.background = "yellow";
}
</script>
<input type="text" onfocus="highlightInput(this)">
<button type="button">Button</button>
Значение ключевого слова this
в обработчике события относится к элементу, на котором есть обработчик (то есть, куда в данный момент доставляется событие).
Событие onblur
Событие blur происходит, когда пользователь убирает фокус с элемента формы или окна. Вы можете обработать событие размытия с помощью обработчика onblur
.
Следующий пример покажет вам предупреждающее сообщение, когда элемент ввода текста теряет фокус.
<input type="text" onblur="alert('Ввод текста теряет фокус!')">
<button type="button">Submit</button>
Чтобы отвести фокус от элемента формы, сначала щелкните внутри него, затем нажмите клавишу табуляции на клавиатуре, наведите фокус на что-то другое или щелкните за его пределами.
Событие onchange
Событие change происходит, когда пользователь изменяет значение элемента формы. Вы можете обработать событие изменения с помощью обработчика onchange
.
В следующем примере будет показано предупреждающее сообщение при изменении параметра в поле выбора.
<select onchange="alert('Вы изменили выбор!');">
<option>Select</option>
<option>Male</option>
<option>Female</option>
</select>
Событие onsubmit
Событие submit происходит только тогда, когда пользователь отправляет форму на веб-странице. Вы можете обработать событие submit с помощью обработчика onsubmit
.
В следующем примере будет показано предупреждение при отправке формы на сервер.
<form action="action.php" method="post" onsubmit="alert('Данные формы будут отправлены на сервер!');">
<label>First Name:</label>
<input type="text" name="first-name" required>
<input type="submit" value="Submit">
</form>
События Document/Window
События также инициируются в ситуациях, когда страница загружена или когда пользователь изменяет размер окна браузера. Вот некоторые наиболее важные события document/window и их обработчик событий.
Событие onload
Событие load происходит после завершения загрузки веб-страницы в веб-браузере. Вы можете обработать событие загрузки с помощью обработчика события onload
.
Следующий пример покажет вам предупреждающее сообщение, как только страница завершит загрузку.
<body onload="window.alert('Страница загружена успешно!');">
<h1>This is a heading</h1>
<p>This is paragraph of text.</p>
</body>
Событие onunload
Событие unload происходит, когда пользователь покидает текущую веб-страницу. Вы можете обработать событие unload с помощью обработчика onunload
.
Следующий пример покажет вам предупреждение при попытке покинуть страницу.
<body onunload="alert('Вы уверены, что хотите покинуть эту страницу??');">
<h1>Это заголовок</h1>
<p>Это абзац текста.</p>
</body>
Событие onresize
Событие resize происходит, когда пользователь изменяет размер окна браузера. Событие resize также происходит в ситуациях, когда окно браузера свернуто или развернуто.
Вы можете обработать событие resize с помощью обработчика onresize
. В следующем примере будет показано предупреждающее сообщение при изменении размера окна браузера до новой ширины и высоты.
<p id="result"></p>
<script>
function displayWindowSize() {
var w = window.outerWidth;
var h = window.outerHeight;
var txt = "Window size: width=" + w + ", height=" + h;
document.getElementById("result").innerHTML = txt;
}
window.onresize = displayWindowSize;
</script>