В этом уроке вы узнаете, как обрабатывать события в JavaScript.
Понимание событий и обработчиков событий JavaScript
Событие - это то, что происходит, когда пользователь взаимодействует с веб-страницей, например, когда он щелкает ссылку или кнопку, вводит текст в поле ввода или текстовое поле, делает выбор в поле выбора, нажимает клавишу на клавиатуре, перемещает указатель мыши отправляет форму и т.д. В некоторых случаях сам браузер может инициировать события, такие как события загрузки страницы и выгрузки.
Когда происходит событие, вы можете использовать обработчик событий JavaScript (или Event Listener), чтобы обнаружить их и выполнить определенную задачу или набор задач. По соглашению имена для обработчиков событий всегда начинаются со слова «on», поэтому обработчик события для события click называется onclick, аналогично обработчик для события load называется onload, обработчик события blur называется onblur, и так далее.
Есть несколько способов назначить обработчик событий. Самый простой способ - добавить их непосредственно в начальный тег элементов HTML, используя специальные атрибуты обработчика событий. Например, чтобы назначить обработчик нажатия для элемента кнопки, мы можем использовать атрибут onclick, например:
<button type="button" onclick="alert('Clicked!')">Click Me</button>
Однако, чтобы отделить код JavaScript от кода HTML, вы можете настроить обработчик событий во внешнем файле JavaScript или в тегах <script></script>, например:
<button type="button" id="myButton">Click Me</button>
<script>
function showMessage() {
alert('Clicked!');
}
document.getElementById("myButton").onclick = showMessage;
</script>
В общем, события можно разделить на четыре основные группы - события мыши, события клавиатуры, события формы и события документа/окна браузера. Есть много других событий, о которых мы узнаем в следующих статьях. Следующие абзацы дадут вам краткий обзор наиболее полезных событий вместе с примерами из реальной жизни.
События мыши
События мыши запускаются, когда пользователь щелкает некоторый элемент, наводит указатель мыши на элемент и т.д. Вот некоторые наиболее важные события мыши и их обработчик событий.
Событие Click (onclick)
Событие click происходит, когда пользователь нажимает на элемент на веб-странице. Часто это элементы формы и ссылки. Вы можете обработать событие click с помощью обработчика события onclick.
Следующий пример покажет вам предупреждающее сообщение при нажатии на элементы.
<button onclick="alert('Button was clicked!');">Click</button>
<a href="#" onclick="alert('Link was clicked!');">Click Me</a>
Событие Contextmenu (oncontextmenu)
Событие contextmenu возникает, когда пользователь нажимает правую кнопку мыши на элементе, чтобы открыть контекстное меню. Вы можете обработать событие contextmenu с помощью обработчика события oncontextmenu.
В следующем примере будет показано предупреждение при щелчке правой кнопкой мыши по элементам.
<button type="button" oncontextmenu="alert('Right-clicked button!');">Right Click on Me</button>
<a href="#" oncontextmenu="alert('Right-clicked link!');">Right Click on Me</a>
Событие Mouseover (onmouseover)
Событие mouseover происходит, когда пользователь наводит указатель мыши на элемент.
Вы можете обработать событие mouseover с помощью обработчика события onmouseover. Следующий пример покажет вам предупреждающее сообщение, когда вы наводите курсор мыши на элементы.
<button type="button" onmouseover="alert('Mouse over a button!');">Place Mouse Over Me</button>
<a href="#" onmouseover="alert('Mouse over a link!');">Place Mouse Over Me</a>
Событие Mouseout (onmouseout)
Событие mouseout происходит, когда пользователь перемещает указатель мыши за пределы элемента.
Вы можете обработать событие mouseout с помощью обработчика события onmouseout. Следующий пример покажет вам предупреждающее сообщение, когда происходит событие mouseout.
<button type="button" onmouseout="alert('Out of the button!');">Place Mouse Inside Me and Move Out</button>
<a href="#" onmouseout="alert('Out of the link!');">Place Mouse Inside Me and Move Out</a>
События клавиатуры
Событие клавиатуры запускается, когда пользователь нажимает или отпускает клавишу на клавиатуре. Вот некоторые наиболее важные события клавиатуры и их обработчик событий.
Событие Keydown (onkeydown)
Событие нажатия клавиши происходит, когда пользователь нажимает клавишу на клавиатуре.
Вы можете обработать событие keydown с помощью обработчика события onkeydown. Следующий пример покажет вам предупреждающее сообщение, когда происходит событие keydown.
<input type="text" onkeydown="alert('Inside text input!')">
<textarea onkeydown="alert('Inside textarea!’)"></textarea>
Событие Keyup (onkeyup)
Событие keyup происходит, когда пользователь отпускает клавишу на клавиатуре.
Вы можете обработать событие keyup с помощью обработчика события onkeyup. Следующий пример покажет вам предупреждающее сообщение при возникновении события keyup.
<input type="text" onkeyup="alert('Inside text input!')">
<textarea onkeyup="alert('Inside textarea!’)"></textarea>
Событие Keypress (onkeypress)
Событие нажатия клавиши происходит, когда пользователь нажимает клавишу на клавиатуре, с которой связано символьное значение. Например, такие клавиши, как Ctrl, Shift, Alt, Esc, клавиши со стрелками и т.д., не будут генерировать события keypress, но будут генерировать события keydown и keyup.
Вы можете обработать событие нажатия клавиши с помощью обработчика события onkeypress. Следующий пример покажет вам предупреждающее сообщение при возникновении события нажатия клавиши.
<input type="text" onkeypress="alert('Inside text input!')">
<textarea onkeypress="alert('Inside textarea!’)"></textarea>
События формы
Событие формы вызывается, когда элемент управления формы получает или теряет фокус, или когда пользователь изменяет значение элемента управления формы, например, вводя текст в поле ввода текста, выбирает любой параметр в поле выбора и т.д. Вот некоторые наиболее важные события формы и их обработчик событий.
Фокусное событие (onfocus)
Событие focus происходит, когда пользователь фокусирует курсор на элементе на веб-странице.
Вы можете обработать событие фокуса с помощью обработчика события onfocus. Следующий пример выделит фон ввода текста желтым цветом, когда он получит фокус.
<input type="text" onfocus="highlightInput(this)">
<button type="button">Button</button>
<script>
function highlightInput(elm){
elm.style.background = "yellow";
}
</script>
Событие Blur (onblur)
Событие размытия blur (элемент теряет фокус) происходит, когда пользователь убирает фокус с элемента формы или окна.
Вы можете обработать событие размытия с помощью обработчика события onblur. Следующий пример покажет вам предупреждающее сообщение, когда элемент ввода текста теряет фокус.
<input type="text" onblur="alert('Lost focus!')">
<button type="button">Submit</button>
Чтобы отвести фокус от элемента формы, сначала щелкните внутри него, затем нажмите клавишу табуляции на клавиатуре, наведите фокус на что-то другое или щелкните за его пределами.
Событие изменения состояния (onchange)
Событие изменения происходит, когда пользователь изменяет значение элемента формы.
Вы можете обработать событие изменения с помощью обработчика события onchange. В следующем примере будет показано предупреждающее сообщение при изменении параметра в поле выбора.
<select onchange="alert('Changed!');">
<option>Select</option>
<option>Male</option>
<option>Female</option>
</select>
Событие отправки формы (onsubmit)
Событие отправки происходит только тогда, когда пользователь отправляет форму на веб-странице.
Вы можете обработать событие submit с помощью обработчика события onsubmit. В следующем примере будет показано предупреждение при отправке формы на сервер.
<form action="action.php" method="post" onsubmit="alert('Data submitted!');">
<label>First Name:</label>
<input type="text" name="first-name" required>
<input type="submit" value="Submit">
</form>
События документа/окна
События также инициируются в ситуациях, когда страница загружена или когда пользователь изменяет размер окна браузера и т.д. Вот некоторые наиболее важные события документа / окна и их обработчик событий.
Событие загрузки (onload)
Событие загрузки происходит, когда веб-страница полностью закончила загрузку в веб-браузере.
Вы можете обработать событие загрузки с помощью обработчика события onload. Следующий пример покажет вам предупреждающее сообщение, как только страница завершит загрузку.
<body onload="window.alert('Page is loaded!');">
<h1>This is a heading</h1>
<p>This is paragraph of text.</p>
</body>
Событие выгрузки (onunload)
Событие unload происходит, когда пользователь покидает текущую веб-страницу.
Вы можете обработать событие unload с помощью обработчика события onunload. В следующем примере будет показано предупреждение при попытке покинуть страницу.
<body onunload="alert('Leave page?');">
<h1>This is a heading</h1>
<p>This is paragraph of text.</p>
</body>
Событие изменения размера окна (onresize)
Событие изменения размера происходит, когда пользователь изменяет размер окна браузера. Событие resize также происходит в ситуациях, когда окно браузера свернуто или развернуто.
Вы можете обработать событие resize с помощью обработчика события onresize. В следующем примере будет показано предупреждающее сообщение при изменении размера окна браузера до новой ширины и высоты.
<p id="result"></p>
<script>
function windowResize() {
var w = window.outerWidth;
var h = window.outerHeight;
var txt = "Window size: width=" + w + ", height=" + h;
document.getElementById("result").innerHTML = txt;
}
window.onresize = windowResize;
</script>
Оставить комментарий