События (Events) в JavaScript

Событие - это операция, которая происходит в браузере, и может быть инициирована пользователем или самим браузером.

Вот несколько примеров распространенных событий, которые могут происходить на сайте:

• Завершение загрузки страницы

• Пользователь нажимает кнопку

• Пользователь прокручивает документ

• Пользователь изменяет размер браузера

• Пользователь перемещает мышь

• Пользователь отправляет форму

• Пользователь нажимает клавишу на клавиатуре

• Изменение HTML поля ввода

У каждого доступного события естьобработчик событий, то естьобработчик событийЭто блок кода (обычно пользовательская функция JavaScript), который выполняется при вызове события.

Поняв события, вы сможете предоставить конечным пользователям более интерактивный веб-опыт.

Пример

Когда событие вызывается, например, при单击 кнопки пользователем, можно выполнить блок кода JavaScript.

В следующем примере у нас есть кнопка, нажатие на которую вызоветshowDate();Функция:

<button onclick="showDate()">Нажми меня</button>

JavaScript showDate();Функция представлена следующим образом:

<script>
function showDate() {
　　　document.getElementById("output").innerHTML = new Date();
}
</script>

Способы использования событий

События можно分配 к элементам тремя способами, чтобы их запускать при наступлении связанных событий:

• Встроенный обработчик событий

• Атрибут обработчика событий

• Слушатель событий

Мы рассмотрим все три метода, чтобы вы были знакомы с каждым способом вызова события.

Атрибуты встроенных обработчиков событий

Чтобы分配事件 элементу HTML, мы можем использоватьHTML событийные атрибуты.

В следующем примере, когда пользователь нажмет на<p>Элемент, его содержимое изменится:

<p onclick="this.innerHTML = 'Hello world'">Нажми здесь, чтобы изменить этот текст</p>

В следующем примере, когда пользователь нажмет на<p>Элемент, вызывается функция:

<p onclick="changeText(this)">Нажми здесь, чтобы изменить этот текст</p>
<script>
function changeText(self) {
　　　self.innerHTML = "Hello world";
}
</script>

В следующем примере у нас есть кнопка, нажатие на которую изменит фоновый цвет на случайный цвет:

<button onclick="bgChange()">Нажми меня</button>
<script>
function bgChange() {
　　　let color = "rgb(" + random(255) + "," + random(255) + "," + random(255) + ")";
　　　document.body.style.backgroundColor = color;
}
</script>

Inline обработчики — это простой способ понять события, но их обычно не следует использовать для тестирования и обучения.

Атрибут обработчика событий

Следующим шагом к inline обработчикам являетсяАтрибут обработчика событийЭто очень похоже на inline обработчик, за исключением того, что мы устанавливаем атрибут элемента в JavaScript, а не в HTML.

В следующем примере мы добавим onclick событие для HTML элемента с id "para":

let para = document.querySelector("#para");
para.onclick = function() {
　　　this.innerHTML = "Hello world";
}

Мы также можем установить атрибут обработчика событий, равный имени функции:

let para = document.querySelector("#para");
para.onclick = changeText;
function changeText() {
　　　para.innerHTML = "Hello world";
}

В предыдущем примере мы установим для имена,changeTextфункции, имеющейid="para"HTML-элемента.

При нажатии на этот элемент будет выполнена эта функция.

В следующем примере у нас есть кнопка, нажатие на которую изменит фоновый цвет на случайный цвет:

let btn = document.querySelector("button");
btn.onclick = bgChange;
function bgChange() {
　　　let color = "rgb(" + random(255) + "," + random(255) + "," + random(255) + ")";
　　　document.body.style.backgroundColor = color;
}

Примечание:обработчик событийсоблюдаетБольшинство кода JavaScript следуют соглашению camelCase (верхний регистр и нижний регистр). Обратите внимание, что код неonclick, неonClick.

События onfocus и onblur

Событие onfocus срабатывает при получении элементом фокуса.

Событие onblur срабатывает при потере элементом фокуса.

<input type="text" onfocus="func1(this)" onblur="func2(this)">

Событие onchange

Событие onchange срабатывает при изменении значения элемента.

<input type="text" onchange="myFunc(this)" value="Hello">

События onmouseover и onmouseout

onmouseover срабатывает при перемещении устройства указателя (обычно мыши) на элемент или один из его подэлементов.

onmouseout срабатывает при перемещении устройства указателя (обычно мыши) вне элемента или одного из его подэлементов.

Дополнительное чтение

Справочник HTML:Справочник по свойствам событий HTML

Справочник JavaScript:Справочник по объектам событий HTML DOM