Події DOM JavaScript: Onclick і Onload

У перші часи Інтернету веб-сторінки були справді статичними - там були лише текст і зображення. Звичайно, іноді це зображення було анімованим gif, але все одно це було лише зображення.

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

Є цілий ряд DOM (Document Object Model) подій , які ви можете слухати в JavaScript, але onclickі onloadє одними з найбільш поширених.

Подія Onclick

onclickПодія в JavaScript дозволяє виконувати функцію , коли елемент клацнув.

Приклад

Click me  function myFunction() { alert('Button was clicked!'); } 

У наведеному вище простому прикладі, коли користувач натискає кнопку, він побачить попередження у своєму браузері Button was clicked!.

onclickДинамічне додавання

Приклад вище працює, але, як правило, вважається поганою практикою. Натомість краще відокремити вміст сторінки (HTML) від логіки (JS).

Для цього onclickподію можна програмно додати до будь-якого елементу, використовуючи такий код у наведеному нижче прикладі:

click on this element.

const p = document.getElementById("foo"); // Find the paragraph element in the page p.onclick = showAlert; // Add onclick function to element function showAlert(event) { alert("onclick Event triggered!"); }

Примітка

Важливо зазначити, що за допомогою onclickми можемо додати лише одну функцію слухача. Якщо ви хочете додати більше, просто використовуйте addEventListener(), що є найкращим способом додавання подій.

У наведеному вище прикладі, коли користувач натискає paragraphелемент у html, він побачить попередження onclick Event triggered.

Запобігання дії за замовчуванням

Однак якщо ми прикріпимо onclickдо посилань ( aтег HTML ), ми можемо не допустити дії за замовчуванням:

Guides  const link = document.getElementById("bar"); // Find the link element link.onclick = myAlert; // Add onclick function to element function myAlert(event) { event.preventDefault(); alert("Link was clicked but page was not open"); } 

У наведеному вище прикладі ми запобігли поведінку aелемента за замовчуванням (посилання, що відкривається), використовуючи event.preventDefault()всередині нашої onclickфункції зворотного виклику.

Подія завантаження

onloadПодія використовується для виконання функції JavaScript відразу після завантаження сторінки.

Приклад:

const body = document.body; body.onload = myFunction; function myFunction() { alert('Page finished loading'); } 

Що можна скоротити до:

document.body.onload = function() { alert('Page finished loading'); } 

У наведеному вище прикладі, як тільки веб-сторінка завантажиться, myFunctionбуде викликана функція, яка відображатиме Page finished loadingпопередження для користувача.

onloadПодія, як правило , приєднаний до елементу. Потім після завантаження сторінки, яка включає всі зображення, а також файли CSS та JS, ваш скрипт запуститься.

Більше інформації:

Це лише дві з багатьох подій DOM, якими ви можете маніпулювати за допомогою JavaScript, але є одними з найбільш часто використовуваних.

Але іноді вам взагалі не потрібно слухати події DOM, а ви хочете використовувати часову подію, як зворотний відлік. Щоб отримати швидкий підручник з хронометражу подій, перегляньте цю статтю.