Что такое событие JavaScript? - httpdoc.ru

Что такое событие JavaScript?

Событие JavaScript - это возникновение любого действия пользователя в вашей системе. Например , mouse click , sliding of cursor , keystroke, и так далее. Все эти действия, которые приводят к каким-либо изменениям на веб-сайте, называются событиями.

Фактически, события на веб-сайтах называются событиями HTML, а не События JavaScript потому что они происходят на HTML-элемент , например, нажатие кнопки. Но JavaScript пригодится, когда мы хотим отреагировать на эти события. JavaScript реагирует на эти события с помощью обработчиков событий JavaScript. Давайте разберемся:

  • События HTML: это событие, происходящее в элементе HTML. Например, нажатие клавиши, щелчки мыши.
  • Обработка событий JavaScript: Обработка событий JavaScript реагирует на события HTML с помощью JavaScript. Например, отображение окна предупреждения после щелчка мышью.
  • Обработчики событий JavaScript: обработчик событий или прослушиватель событий - это программная подпрограмма, которая прослушивает и обрабатывает события. Каждое событие HTML имеет связанный с ним обработчик событий. Итак, Javascript управляет событиями с помощью обработчиков событий. Этот процесс называется обработкой событий.

Примеры обработки событий JavaScript

Это несколько примеров обработки событий для элементов HTML. A button, input field, or a div - это элементы HTML. Когда вы выполняете определенные действия с этими элементами, система дает вам ответ. Это обработка событий через JavaScript. Следуйте инструкциям, чтобы увидеть ответ.

Примеры:

1. Это событие показывает текущее время.

2. Это событие показывает всплывающее окно с предупреждением после изменения поля выбора.


События мыши в JS

События мыши - это наиболее часто встречающиеся события на веб-сайте, потому что люди используют мышь для навигации по веб-сайту. Теперь мы увидим различные события, связанные с действиями мыши. Действия, подобные действиям mouse click, page scroll using mouse, movement of cursor над элементом, - это все события мыши. Давайте изучим их один за другим:

Примеры:

1. Это событие показывает всплывающее окно с предупреждением после удаления курсора с кнопки.



2. Это событие показывает всплывающее окно с предупреждением.


Событие onclick

Событие onclick является наиболее удобным для пользователя событием, оно происходит, когда пользователь щелкает левой кнопкой мыши по любому элементу. Использование этого мероприятия может повысить привлекательность сайта. Например: масштабирование изображения при щелчке мышью или помощь пользователю при заполнении формы.

onclick Обработчик события используются для обработки OnClick события. Этот обработчик событий теперь встроен в HTML 5 как атрибут. Итак, без использования тегов скрипта мы можем легко использовать onclick событие.

В следующем примере показано предупреждающее сообщение при нажатии на элементы.

Пример
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title> JavaScript OnClick Event </title> 
</head> 
<body>
<body>
    <button type="button" onclick="alert('You have clicked a button!');"> Click Me </button>
    <a href="#" onclick="alert('You have clicked a link!');"> Click Me </a>
</body>
</html>

Выход

JavaScript OnClick Event Нажми на меня

Событие oncontextmenu

Событие oncontextmenu происходит, когда пользователь щелкает элемент правой кнопкой мыши. Это похоже на событие onclick, только кнопка мыши отличается. Его можно использовать в ситуации, когда на веб-сайте отключен щелчок правой кнопкой мыши, но если пользователь щелкает правой кнопкой мыши элемент, отображается предупреждающее сообщение.

oncontextmenu Обработчик события используется для обработки этого события.

В следующем примере отображается предупреждающее сообщение, когда вы щелкаете элементы правой кнопкой мыши.

Пример
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title> JavaScript OnContext Menu Event </title> 
</head> 
<body>
    <button type="button" oncontextmenu="alert('You have right-clicked a button!');">Right Click on Me</button>
    <a href="#" oncontextmenu="alert('You have right-clicked a link!');">Right Click on Me</a>
</body>
</html>

Выход

JavaScript OnContext Menu Event Щелкните правой кнопкой мыши по мне

Событие onmouseout

Событие onmouseout возникает, когда пользователь наводит курсор мыши на элемент и затем удаляет его. onmouseout Обработчик события используется для обработки этого события.

В следующем примере показано предупреждающее сообщение при возникновении события mouseout.

Пример
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title> JavaScript OnMouseOut Event </title> 
</head> 
<body>
    <button type="button" onmouseout="alert('You have moved out of the button!');"> Place Mouse Inside Me and Move Out </button>
    <a href="#" onmouseout="alert('You have moved out of the link!');"> Place Mouse Inside Me and Move Out </a>
</body>
</html>

Выход

JavaScript OnMouseOut Event Поместите мышь внутрь меня и выйдите

Событие наведения мыши (onmouseover)

Событие mouseover происходит, когда пользователь наводит курсор на элемент. В тот момент, когда курсор проходит над элементом, onmouseover срабатывает обработчик событий и выполняет указанную для него задачу. Вы можете отобразить информацию в виде всплывающей подсказки для элемента, на который наведен курсор, или вы можете увеличить изображение.

В следующем примере показано предупреждающее сообщение при наведении курсора на кнопку.

Пример
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
    <title> JavaScript Handling the Mouseover Event </title>
</head>
<body>
    <button type="button" onmouseover="alert('You have placed mouse pointer over a button!');">
     Place Mouse Over Me </button>
    <a href="#" onmouseover="alert('You have placed mouse pointer over a link!');"> Place Mouse Over Me </a>
</body>
</html>

Выход

JavaScript Handling the Mouseover Event Наведите указатель мыши на меня

События клавиатуры JS

События JS Keyboard связаны с клавишами клавиатуры. Эти события запускаются при нажатии или отпускании любой клавиши.

Вот некоторые наиболее важные события клавиатуры и их обработчики событий.

Событие onkeydown

Событие onkeydown происходит, когда пользователь нажимает клавишу на клавиатуре. onkeydown Обработчик события используется для обработки этого события.

Пример
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title> JavaScript OnKeydown Event </title>
</head>
<body>
    <input type="text" onkeydown="alert('You have pressed a key inside text input!')">
   
	<p><strong>Note:</strong> Try to enter some text inside input box.</p>
</body>
</html>

Выход

JavaScript OnKeydown Event

Примечание. Попробуйте ввести текст в поле ввода.


Событие onkeyup

Событие onkeyup происходит, когда пользователь отпускает клавишу на клавиатуре. onkeyup Обработчик используется для обработки этого события.

В следующем примере показано предупреждающее сообщение при возникновении события нажатия клавиши.

Пример
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
  <title>JavaScript Handling the Keyup Event</title>
</head>
<body>
    <input type="text" onkeyup="alert('You have released a key inside text input!')">
    <hr>
	<p><strong>Note:</strong> Try to enter some text inside input box.</p>
</body>
</html>

Выход

JavaScript Handling the Keyup Event

Примечание. Попробуйте ввести текст в поле ввода.


Событие onkeypress

Событие onkeypress происходит, когда пользователь нажимает клавишу на клавиатуре, с которой связано значение символа. Такие клавиши, как Ctrl, Shift, Alt, Esc, клавиши со стрелками и т. Д., Не будут генерировать событие нажатия клавиши, но будут генерировать событие нажатия клавиши и нажатия клавиши.

onkeypress Обработчик события используется для обработки этого события.

В следующем примере показано предупреждающее сообщение при возникновении события нажатия клавиши.

Пример
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>JavaScript Handling the Keypress Event</title>
</head>
<body>
  <input type="text" onkeypress="alert('You have pressed a key inside text input!')">
  
  <p><strong>Note:</strong> Try to enter some text inside input box.</p>
</body>
</html>

Выход

JavaScript Handling the Keypress Event

Примечание. Попробуйте ввести текст в поле ввода.