Учебник: События JavaScript Dom

События JavaScript HTML DOM

JavaScript может реагировать на события HTML благодаря HTML DOM:

Реакция на события

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

по клику = JavaScript

Примеры событий HTML:

-Когда пользователь щелкает мышью

- При загрузке веб-страницы

- Когда картинка загружается

- Когда мышь перемещается по элементу

- Когда поле ввода изменено

- При отправке HTML-формы

- Когда пользователь нажимает клавишу

Содержимое этого кода изменяется, когда пользователь нажимает на элемент `‹h1›`:

Обработчик события вызывает функцию в этом коде:

````javascript
<!DOCTYPE html>
<html>
<body>
<h1 onclick=”this.innerHTML = ‘Ooops!’”>Click on this text!</h1>
</body>
</html>

В этом коде функция вызывается из обработчика события:

```javascript
<!DOCTYPE html>
<html>
<body>
<h1 onclick=”changeText(this)”>Click on this text!</h1>
<script>
function changeText(id) {
id.innerHTML = “Ooops!”;
}
</script>
</body>
</html>
````

Атрибуты HTML-событий

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

Назначьте событие onclick элементу кнопки:

```javascript
<button onclick=”displayDate()”>Try it</button>
```

В приведенном выше коде функция с именем displayDate будет выполняться при нажатии кнопки.

Назначение событий с помощью HTML DOM

HTML DOM позволяет назначать события HTML-элементам с помощью JavaScript:

Назначьте событие onclick элементу кнопки:

```javascript
<script>document.getElementById(“myBtn”).onclick = displayDate;</script>
```

В приведенном выше коде функция с именем displayDate назначается элементу HTML с идентификатором = «myBtn».

Функция вызывается при нажатии кнопки.

События onload и onunload

События onload и onunload запускаются, когда пользователь входит или выходит со страницы. Событие onload можно использовать для определения типа и версии браузера посетителя, а затем загрузить соответствующую версию веб-страницы на основе этой информации. Файлы cookie можно обрабатывать с помощью событий onload и onunload.

```javascript
<body onload=”checkCookies()”>
```

Событие onchange

Проверка поля ввода и событие onchange часто используются вместе. Изменение показано в приведенном ниже коде. Когда пользователь изменяет содержимое поля ввода, вызывается функция upperCase().

```javascript
<input type=”text” id=”fname” onchange=”upperCase()”>
```

События onmouseover и onmouseout

Когда пользователь наводит курсор мыши на элемент HTML или выходит из него, события onmouseover и onmouseout могут использоваться для вызова функции:

Мышь надо мной

События onmousedown, onmouseup и onclick

Щелчок мышью состоит из событий onmousedown, onmouseup и onclick. Событие onmousedown запускается при нажатии кнопки мыши, событие onmouseup активируется при отпускании кнопки мыши, а событие onclick запускается при завершении щелчка мыши.