< > ↑ Вгору

Типи подій JavaScript

Розглянемо найбільш стандартні і часто використовувані javaScript події:

Oбробник події

Підтримуючі HTML- елементи і об'єкти

Oпис

onBlur

a, area, button, input, label, select, textarea

Втрата поточним елементом фокусу. виникає при клацанні мишею поза елементом або натисканні клавіші табуляції

onChange

Input, select, textarea

Зміна значень елементів форми. Виникає після втрати елементом фокусу, тобто після події blur

onClick

Практично всі

Одинарне клацання (натиснута і відпущена кнопка миші)

onFocus

a, area, button, input, label, select, textarea

Отримання елементом фокусу

onLoad

body, frameset

Закінчене завантаження документа

onMouseDown

Практично всі

Натиснута кнопка миші в межах поточного елемента

onMouseOut

Практично всі

Курсор миші виведений за межі поточного елемента

onMouseOver

Практично всі

Курсор миші наведений на поточний елемент

onMouseUp

Практично всі

Відпущена кнопка миші в межах поточного елемента

onMove

window

Переміщення вікна

onResize

window

Зміна розмірів вікна

onSelect

textarea, input

Виділення тексту в поточному елементі

onSubmit

form

Відправка даних форми

onUnload

body, frameset

Спроба закриття вікна браузера і вивантаження документа

Подія onLoad. Властивості висоти і ширини об'єкта в javaScript

Для виконання наступного прикладу нам знадобиться нове поняття - подія.

У нашому випадку подія - це реакція програми на дію користувача (клацання мишею по кнопці, зменшення мишкою вікна браузера, введення тексту з клавіатури і т.д.). За допомогою програми у нас є можливість відреагувати на будь-які дії користувача.

Розглянемо одне з найпоширеніших подій - onload - яке відбувається при завантаженні документа (коли користувач своїми діями викликав завантаження веб-сторінки).

Розглянемо приклад використання події javascript onload для зміни ширини і висоти елемента.

Приклад: Додати на сторінку зображення і за допомогою javascript при настанні події завантаження сторінки зробити ширину зображення відповідної ширині вікна браузера.

Рішення:

function resizeImg(){
          var myImg = document. getElementById("img1");
          myImg.style.width = document.body.clientWidth;
}
...


<body onload = "resizeImg()">
<img src = "1.jpg" id = "img1">

Пояснення: У прикладі основні дії відбуваються в функції resizeImg ():

  • змінна myImg асоційована з тегом img - картинкою, властивість якої width - ширина - змінюється в самій функції.

  • Виклик функції відбувається по завантаженні сторінки в події onload тіла документа (тіло - body - головний елемент, тому завантаження сторінки - це подія, що відноситься до тіла).

Завдання Js8_4. Додайте в html-коді кілька зображень (тег img). Використовуючи метод getElementsByTagName() змініть:

  • розмір (властивості width і height) всіх зображень сторінки

  • розмір кордону (властивість border) всіх зображень.

Доповніть код:

var allImg = document ...; // отримуємо масив зображень
for (var i = 0; i < allImg.length; i++){
          allImg[i].....; // міняємо властивість width
          ...; // міняємо властивість height
          ...; // міняємо border
}

Подія onclick javaScript і три способи обробки подій

Подія onClick відбувається під час одинарного клацання кнопкою миші. Обробити подію, тобто відреагувати на неї за допомогою скрипта, можна трьома способами.

Розглянемо їх:

Приклад: Після клацання на кнопці вивести діалогове вікно з повідомленням «Ура!»

1. Через властивість об'єкта з використанням функції користувача :

Скрипт:

function message() {
          alert("Ура!");
     }

html-код:

<body>
<form>
<input type = "button" name = "myButton" onclick = "message()" value = "Щелкни!">
</form>

Пояснення: В даному прикладі в html-коді ми бачимо кнопку. У кнопки присутній атрибут onclick («по кліку»), в значенні якого стоїть виклик функції з назвою message(). Це користувацька функція, описана вище в скрипті. У самій функції виводиться діалогове вікно, що і задано згідно із завданням.

Скрипт при такій обробці події зазвичай знаходиться в області head документа

2. Через атрибут тега:

<body>
<form name = "myForm">
<input type = "button" name = "myButton" value = "Kлацни!" onclick = "javascript: alert('Ура!')">
</form>

Пояснення: Це спрощений варіант обробки події, він підходить тільки для невеликого коду, коли необхідно виконати один-два оператора. Інакше код буде погано читатися.
Як уособлення кнопки вказується onclick («по кліку»), а в якості значення пишеться скрипт з операторів із зазначенням якою мовою він написаний (javascript :). У нашому випадку оператор для виведення модального вікна зі словом «Ура!».

3. Через реєстрацію функції-обробника в якості властивості елемента:

html-код:

<form name = "myForm">
<input type = "button" .atributs{value} = "Клікни!" id = "myButton">
</form>

Скрипт:

document.myForm.myButton.onclick = message;
function message() {
          alert('Ура!');
}

Пояснення: В html-коді тут присутній кнопка з атрибутом id, який необхідний для звернення до кнопки через скрипт.

В скрипті, який обов'язково знаходиться нижче дерева елементів (можна перед закриттям тега body), знаходиться звернення до кнопки (document.myForm.myButton), для якої призначається обробник події onclick зі значенням посилання на функцію. Звернення до кнопки може бути організовано через атрибут id (document.getElementById ('myButton'). Onclick = message;)

Дужки після назви функції message не ставляться. В даному випадку це саме посилання на функцію, інакше, при використанні дужок, функція була б викликана, а не призначена в якості обробника подій.

Саме такий спосіб обробки подій максимально наближений до того, який відбувається, наприклад, в ОС windows.

Завдання Js8_5. Виконайте завдання за інструкцією:

  1. Створіть веб-сторінку і розташуйте в ній тег img із зображенням сумного смайлика.

  2. Клацання на зображенні (onclick) викликає заданий метод (користувацька функція):

    3. <img id = "smileImg" src = "smile1.jpg" onclick = "sayHello()" />

  3. В скрипті опишіть метод (функція sayHello()), який «питає», як звуть користувача, а потім вітає його по імені, і змінює зображення на усміхнений смайлик (властивість src тега img):

    4. function sayHello() {
          var userName = prompt("Как вас зовут?");
          if(userName){
              alert(...);
              document.getElementById("smileImg"). ...=...;
          }
    }

Події onMouseOver і onMouseOut

Подія настає при наведенні (onMouseOver) на об'єкт і при виведенні (onMouseOut) за межі об'єкта курсору миші.

Призначення обробника подій здійснюється точно таким же чином, як і у випадку з подією onclick.

Тому виконаємо завдання:

Завдання Js8_6. За наведенням курсору миші на гіперпосилання зафарбовувати задній фон сторінки в різні кольори.

Доповніть код:

<br> <a href = "/" onmouseover = "document.bgColor='green' ">Зеленый</a>
<br> … seagreen
<br> … magenta
<br> … purple
<br> … navy
<br> … royalblue

Завдання Js8_7. Створення rollover-зображення

  • Додайте в код тег img із зображенням.

  • Введіть обробники подій onmouseover (по наведенню) і onmouseout (при відведенні). Зробіть це в вигляді функцій.

  • Приєднайте до обробника подій onmouseover процедуру завантаження в тег img іншого зображення.

  • Приєднайте до обробника подій onmouseout процедуру завантаження іншого зображення в тег img.