Событие — это то, что происходит, когда пользователь взаимодействует с веб-страницей, например, когда он щелкает ссылку или кнопку, вводит текст в поле <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>
