Последние учебники веб-разработки
×

JS Руководство

JS ГЛАВНАЯ JS Введение JS Куда JS Вывод JS Синтаксис JS Заявления JS Комментарии JS переменные JS операторы JS арифметика JS присваивание JS Типы данных JS функции JS Объекты JS Объем JS Мероприятия JS Строки JS Методы струнных JS чисел JS Методы Number JS математический JS Даты JS Форматы даты JS Методы Дата JS Массивы JS Методы массивов JS Booleans JS Сравнения JS условия JS переключатель JS петля For JS В то время как Loop JS Ломать JS Тип преобразования JS RegExp JS ошибки JS отладка JS Подъемно JS Строгий режим JS Гид по стилю JS Лучшие практики JS Ошибки JS Представление JS Зарезервированные слова JS JSON

JS формы

Формы проверки Формы API

JS объект

Определения объектов Свойства объекта Методы объекта Прототипы объектов

JS функции

Определения функций Функциональные параметры Функция Призвание Функция Затворы

JS HTML DOM

DOM вступление DOM методы DOM Документ DOM элементы DOM HTML DOM CSS DOM Анимации DOM Мероприятия DOM EventListener DOM навигация DOM Вершины DOM Nodelist

JS браузер BOM

JS Window JS Screen JS Location JS History JS Navigator JS Popup Alert JS Timing JS Cookies

JS Примеры

JS Примеры JS HTML DOM JS HTML вход JS HTML Объекты JS HTML Мероприятия JS браузер JS викторина JS Резюме

JS Рекомендации

JavaScript Объекты HTML DOM Объекты


 

JavaScript HTML DOM События


HTML DOM позволяет JavaScript реагировать на HTML событий:

Mouse Over Me
Нажми на меня

Реагируя на события

JavaScript может быть выполнен, когда происходит событие, например, когда пользователь нажимает на HTML элемент.

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

onclick=JavaScript

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

  • Когда пользователь нажимает кнопку мыши
  • Когда веб-страница загружается
  • Когда изображение было загружено
  • Когда мышь перемещается над элементом
  • Когда поле ввода изменяется
  • Когда HTML-форма будет отправлена
  • Когда пользователь инсульты ключ

В этом примере, содержание <h1> элемента изменяется , когда пользователь нажимает на нее:

пример

<!DOCTYPE html>
<html>
<body>

<h1 onclick="this.innerHTML='Ooops!'">Click on this text!</h1>

</body>
</html>
Попробуй сам "

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

пример

<!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 для кнопки элемента:

<button onclick="displayDate()">Try it</button>
Попробуй сам "

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


Назначение событий Использование HTML DOM

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

пример

Назначают событие OnClick для кнопки элемента:

<script>
document.getElementById("myBtn").onclick = displayDate;
</script>
Попробуй сам "

В приведенном выше примере, функция с именем displayDate присваивается HTML - элемент с id="myBtn" .

Функция будет выполняться при нажатии кнопки.


В onload и onunload События

В onload и onunload события срабатывает , когда пользователь входит или покидает страницу.

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

В onload и onunload события могут быть использованы , чтобы иметь дело с печеньем.

пример

<body onload="checkCookies()">
Попробуй сам "

onchange событие

onchange событие часто используется в сочетании с проверкой полей ввода.

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

пример

<input type="text" id="fname" onchange="upperCase()">
Попробуй сам "

В onmouseover и onmouseout События

onmouseover и onmouseout событий могут быть использованы , чтобы вызвать функцию , когда пользователь удерживает указатель мыши над, или из, HTML - элемента:

Mouse Over Me

Попробуй сам "


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

onmousedown , onmouseup и onclick события являются все части мыши. Во- первых , когда кнопка мыши нажата, то onmousedown событие срабатывает, а затем, когда кнопка мыши отпускается, onmouseup событие срабатывает, наконец, когда щелчок мыши завершается, onclick событие.

Click Me

Попробуй сам "


Еще примеры

OnMouseDown и OnMouseUp
Изменение изображения, когда пользователь держит нажатой кнопку мыши.

в процессе
Показать окно предупреждения, когда после загрузки страницы.

OnFocus
Изменение цвет фона поля ввода, когда он получает фокус.

События мыши
Измените цвет элемента, когда курсор перемещается над ним.


Ссылка на объект HTML DOM Event

Для получения списка всех событий HTML DOM, смотрите на нашем полный HTML DOM Event Object Reference .


Проверьте себя с упражнениями!

Упражнение 1 » Упражнение 2» Упражнение 3 »