JavaScript DOM събития: 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към връзки (HTML aтаг), може да пожелаем да се предотврати действието по подразбиране:

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 събития и искате да използвате събитие, основано на време, като отброяване. За бърз урок за събития за синхронизиране вижте тази статия.