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

Похожие посты

Руководство по сортировке массивов в JavaScript

Сортировка — обычная задача при работе с массивами. Она будет использоваться, например, если вы захотите отобразить названия городов или регионов в алфавитном порядке. JavaScript массив (array) имеет встроенный метод sort() для сортировки элементов массива в алфавитном порядке. Следующий пример демонстрирует, как это работает: Реверсирование массива Вы можете использовать метод reverse(), чтобы изменить порядок элементов массива…

Руководство по массивам в JavaScript

Массивы — это сложные переменные, которые позволяют нам хранить группы значений под одним именем переменной. Массивы JavaScript могут хранить любое допустимое значение, включая строки, числа, объекты, функции и даже другие массивы, что позволяет создавать более сложные структуры данных, такие как массив объектов или массив массивов. Предположим, вы хотите сохранить название цветов в своем коде JavaScript….

Руководство по работе с атрибутами DOM в JavaScript

Атрибуты — это специальные слова, используемые внутри начального тега HTML-элемента для управления поведением тега или предоставления дополнительной информации о теге. JavaScript предоставляет несколько методов для добавления, удаления или изменения атрибутов HTML-элемента. В этом разделе мы узнаем об этих методах подробно. Получение значения атрибута элемента Метод getAttribute() используется для получения текущего значения атрибута элемента. Если указанный…

Насколько публикация полезна?

Нажмите на звезду, чтобы оценить!

Средняя оценка 5 / 5. Количество оценок: 1

Оценок пока нет. Поставьте оценку первым.