AJAX загрузка
home

События - это действия, которые могут быть определены JavaScript.

События

Код переданный событиям будет выполнен после того, как произойдут действия, которые активируют данное событие. У каждого события разные активирующие действия.

Примеры активирующих действий:

  • Щелчок мыши (событие onclick) и двойной щелчок мыши (событие ondblclick).
  • Нажатие клавиши (onkeypress).
  • Отправление формы (onsubmit).
  • Наведение курсора мыши на элемент (onmouseover) или выведение курсора мыши за пределы его границ (onmouseout).
  • Полная загрузка страницы или картинки (onload).
  • Изменение содержимого элемента, например содержимого текстового поля формы (onchange).

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

Пример 

<input type="button" value="Нажмите на меня" onclick='alert("Вы нажали на кнопку");'/>
Попробовать в редакторе
Быстрый просмотр

Либо вызывать функцию, которая содержит необходимый код:

Пример 

function dispMes(){
   alert("Вы нажали на кнопку");
}
....
<input type="button" value="Нажмите на меня" onclick="dispMes()"/>
Попробовать в редакторе
Быстрый просмотр

Событие onclick

Код переданный событию onclick будет исполнен, когда пользователь щелкнет мышкой на элементе.

Пример 

function go(){
   document.location.assign("https://www.wisdomweb.ru");
}
....
<input type="button" value="Перейти на главную страницу нашего сайта" onclick="go()"/>
Попробовать в редакторе
Быстрый просмотр

Событие onmouseover и onmouseout

Код переданный событию onmouseover будет выполнен при наведении курсора мыши на элемент.

Код переданный событию onmouseout будет выполнен при выводе курсора из границ элемента.

Пример 

function start(){
   document.getElementById("par1").style.color="red";
}
function stop(){
   document.getElementById("par1").style.color="black";
}
....
<p id="par1" onmouseover="start()" onmouseout="stop()">Наведите на меня курсор мыши.</p>
Попробовать в редакторе
Быстрый просмотр

Обратите внимание: полный список событий существующих в HTML DOM Вы можете найти в нашем HTML DOM учебнике.

Чтения кода событий

Так как события являются методами DOM объектов. Имеется возможность прочитать содержимое кода событий из скрипта.

Пример 

/* Выведем код события onclick кнопки с id=show */
document.write(document.getElementById("show").onclick+"<br />");
/* Теперь выведем код события onclick кнопки с id=hide */
document.write(document.getElementById("hide").onclick+"<br />");
/* И напоследок выведем код события onclick кнопки с id=pers */
document.write(document.getElementById("pers").onclick+"<br />");
Попробовать в редакторе

Сделайте сами

Задание 1 сделайте так, чтобы:

  1. При одинарном нажатии на кнопку c id=but1 цвет текста абзаца с id=par1 изменялся на зеленый.
  2. При двойном нажатии на кнопку с id=but2 цвет текста абзаца с id=par2 изменялся на красный.
  3. При наведении указателя мыши на абзацы с id=par1 и id=par2 цвет их текста сбрасывался на стандартный (т.е. черный).
  4. При одинарном нажатии на кнопку с id=but3 вокруг абзацев с id=par1 и id=par2 рисовалась граница зеленого цвета толщиной 1 пиксель.
  5. При двойном нажатии на кнопку с id=but4 вокруг абзацев с id=par1 и id=par2 рисовалась граница красного цвета толщиной 1 пиксель.
  6. При загрузке документа отображалось окно оповещения с текстом "Добро пожаловать в задание 1".
  7. При закрытии документа отображалось окно оповещения с текстом "Вы покидаете задание 1".

Пример 

<html>
<body>
<p id="par1"> Я первый абзац.</p>
<p id="par2"> Я второй абзац. </p>
<input id="but1" type="button" value="Кнопка 1" />
<input id="but2" type="button" value="Кнопка 2" /> 
</body>
</html>
Попробовать в редакторе