Обработка нажатия кнопки в js
23 июня 2020 - Администратор
Комментарии (0)
Нет комментариев. Ваш будет первым!
В этой статье мы разберём события в JavaScript, подключение обработчика событий, обработку события нажатие кнопки в HTML форме.
При нажатии на элемент формы HTML страницы или наведении на него курсора мыши происходят соответствующие события.
onClick - событие нажатия кнопки.
Реакцию на эти события мы можем запрограммировать с помощью JavaScript и сделать наш сайт интерактивным.
Каждому событию в JavaScript назначается обработчик событий. Обработчик событий это набор команд, который выполняется при наступлении события.
Обработка нажатия кнопки HTML формы в JS
Обработчик нажатия кнопки может быть назначен в HTML коде элемента кнопки с помощью следующей конструкции
<input value="Название кнопки" onclick="Код JavaScript" type="button">
Пример обработки нажатия кнопки события в JS
<!DOCTYPE HTML>
<html>
<body>
<input value="Нажми меня" onclick="alert('Ура, меня нажали!')" type="button">
</body>
</html>
Таким способом можно задать небольшой обработчик событий, включающий малое количество операций. Как правило, требуется подключить обработчик, в котором производится большое количество операций. Для этого в качестве обработчика события указывается функция. Её код нужно написать перед назначения обработчика событий.
Синтаксис обработчика нажатия кнопки с помощью вызова функции
<!DOCTYPE HTML>
<html>
<body>
<script>
function имя функции() {
Операторы через ;
}
</script>
<input value="Имя кнопки" onclick="имя функции()" type="button">
</body>
</html>
Пример обработки нажатия кнопки с помощью вызова функции
<!DOCTYPE HTML>
<html>
<body>
<script>
function press() {
alert('Ура, меня нажали');
}
</script>
<input value="Нажми меня" onclick="press()" type="button">
</body>
</html>
В третьем типе назначения обработчик события мы задаем как свойство объекта. Этот способ является более наглядным
Синтаксис назначения обработчика нажатия кнопки через свойства элементов в JS
<!DOCTYPE HTML>
<html>
<body>
<input id="Имя кнопки" type="button" value="Текст кнопки">
<script>
имя кнопки.onclick = function() {
Операторы через ;
};
</script>
</body>
</html>
Пример обработки в js нажатий двух кнопок
<!DOCTYPE HTML>
<html>
<body>
<input id="button1" type="button" value="Нажми меня!">
<input id="button2" type="button" value="Нажми меня!">
<script>
button1.onclick = function() {
alert('Нажали 1 кнопку');
};
button2.onclick = function() {
alert('Нажали 2 кнопку');
};
</script>
</body>
</html>
Вернуться к содержанию курса по JS Перейти к теме Получение и изменение объектов в JS
Полезно : Регистрация домена и размещение сайта на хостинге
Поделиться
Нет комментариев. Ваш будет первым!