Навчання програмуванню онлайн

Браузерні події

Прокрутити вниз

Події в програмуванні необхідні для отримання зворотного зв’язку при здійсненні дії користувачем, а також для внутрішньої реакції скриптів. Навчання програмуванню онлайн швидкий і часом складний процес, якщо вивчати все на сухій теорії. Тому якщо ви бажаєте захопити дитину кодингом, радимо записатися на пробний урок програмування. Школа GoMother дає всю теорію вивчати дитині, виконуючи практичні завдання, що сприяє інтересу учня до подальшого розвитку. А також дає змогу батькам відстежувати результати навчання.
Подія – це сигнал від браузера про те, що було скоєно якусь дію.

Є безліч різних подій:
Події DOM, які ініціалізуються елементами DOM. Наприклад:

  • Подія click відбувається при натисканні,
  • Mouseover – при наведенні мишкою на елемент,
  • Подія focus — під час фокусування користувача на елементі,
  • keydown – при натисканні на клавішу
  • Події для вікна браузера
    Наприклад, resize – коли змінюється розмір вікна.
  • Є завантаження файлу/документу: load, readystatechange, DOMContentLoaded…
    Події з’єднують JavaScript-код із документом та відвідувачем, дозволяючи створювати динамічні інтерфейси.

Призначення обробників подій

Для призначення обробника події є кілька варіантів, давайте їх розглянемо.
Використання атрибута HTML
Оброблювач може бути призначений прямо в розмітці, в атрибуті, який називається on<подія&gt;.
Наприклад, щоб прикріпити click-подію до input-кнопки, можна присвоїти обробник onclick, ось так:
<input id=“b1” value=“Натисніть мене” onclick=“alert(‘Дякую!’)” type=“button”/>
При натисканні мишкою на кнопці виконається код, вказаний в атрибуті onclick.
В дії:
Важливо: всередині alert використовуються одинарні лапки, оскільки сам атрибут перебуває у подвійних.
Запис типу onclick=”alert(“Клік&quot;)” не буде працювати. Якщо вам дійсно потрібно використовувати саме подвійні лапки, то це можна зробити, замінивши їх на &quot;: onclick=”alert(&quot;Клік&amp;quot;)”.
Але найчастіше це зовсім не потрібно, адже в розмітці пишуться найпростіші обробники. У разі необхідності зробити щось складніше, краще описати це у функції, і в обробнику викликати її.
Наступний приклад кліку запускає функцію countRabbits().

<html>
<head>

<script>
function countRabbits() {for(var i = 1; i <= 3; i++) {
alert(“Кролик номер” + i);
}
}
<body>

<input type=“button” onclick=“countRabbits()” value=“Считать кроликов!”/>

</body>

</html>

Як ми знаємо, атрибут HTML-тега не чутливий до регістру, тому ONCLICK буде працювати, так само як onClick або onclick… Але, як правило, атрибути пишуть у нижньому регістрі onclick.

Використання властивості DOM-об’єкта

Можна призначити обробник, використовуючи властивість DOM-елемента on<подія&gt;.
Розгляньмо на прикладі встановлення обробника click елементу з id=&quot;myElement&quot;:
<input id=“myElement” type=“button” value=“Натисни на мене”/><script>
var elem = document.getElementById(‘myElement’);

elem.onclick = function() {
alert(‘Дякую’);
}

В дії:
Якщо обробник заданий через атрибут, то відповідна властивість з’явиться в елемента автоматично. Браузер читає HTML-розмітку, створює нову функцію з вмісту атрибута і записує як onclick.
Первинною є саме властивість, а атрибут — лише спосіб його ініціалізації.
Ці два приклади коду працюють однаково:

  • Тільки HTML:
    <input type=“button” onclick=“alert(‘Клік!’)” value=“Кнопка”/>
  • HTML + JS:
    <input type=“button” id=“button” value=“Кнопка”/>  <script>    document.getElementById(‘button’).onclick = function() {        alert(‘Клік!’);    }  </script>
  • Оскільки якість, в результаті, одна, то призначити по обробнику і там і там не можна.
    У прикладі нижче призначення через JavaScript перезапише обробник з атрибута:
    <input type=“button” onclick=“alert(‘До’)” value=“Натисни на мене”/><script>    var elem = document.getElementsByTagName(‘input’)[0]; 

        elem.onclick = function() { // перезапише  обробник, що вже існує

            alert(‘Після’);

        }

    </script>

Обробником можна призначити вже функцію, що існує:

function sayThanks() {

    alert(‘Спасибо!’);

}

 

document.getElementById(‘button’).onclick = sayThanks;

Навчання програмуванню онлайн

Ми постаралися доступно пояснити вам що ж таке браузерні події, а як ви засвоїли тему, ви можете перевірити пройшовши тест. Тест знаходиться вгорі сторінки та не займе понад 5 хвилин. Бажаємо вам удачі!