Latest web development tutorials

HTML DOM событие

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

примеров

Mouse Over Me
Click 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>
<head>
<script>
function changetext(id)
{
id.innerHTML="Ooops!";
}
</script>
</head>
<body>
<h1 onclick="changetext(this)">Click on this text!</h1>
</body>
</html>

Попробуйте »


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

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

примеров

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

<button onclick =" displayDate() ">Try it</button>

Попробуйте »

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


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

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

примеров

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

<script>
document.getElementById("myBtn"). onclick =function(){ displayDate() };
</script>

Попробуйте »

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

Когда кнопка нажата, то выполнение функции.


OnLoad и OnUnload событие

Когда пользователь входит или покидает страницу, это вызовет OnLoad и событие OnUnload.

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

OnLoad и OnUnload событие для обработки печенье.

примеров

<body onload ="checkCookies()">

Попробуйте »


OnChange событие

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

В следующем примере показано, как использовать OnChange. Когда пользователь изменяет содержимое поля ввода будет называться функцией прописных ().

примеров

<input type="text" id="fname" onchange ="upperCase()">

Попробуйте »


OnMouseOver и onmouseout событий

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

примеров

Простой OnMouseOver-onmouseout экземпляр:

Mouse Over Me

Попробуйте »


OnMouseDown, OnMouseUp и OnClick событие

OnMouseDown, OnMouseUp OnClick событие является щелчок мыши, и весь процесс. Во-первых, при нажатии кнопки мыши, вызвать OnMouseDown событие, а затем, когда пользователь отпускает кнопку мыши, это вызовет OnMouseUp событие, и, наконец, когда мышь нажмите Готово OnClick событие.

примеров

Простой OnMouseDown-OnMouseUp экземпляр:

Click Me

Попробуйте »


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

Для полного описания и примеры каждого события, пожалуйста , посетите наш HTML DOM справочное руководство .