Безплатно! Онлайн събитие: 5-дневно ChatGPT предизвикателство Регистрация тук.
Още за Events
Пълен достъп до курса: Не
За пълен достъп или безплатна проба (2 модула), моля влезте или се регистрирайте.
Най-важното: отделете JavaScript от HTML и закачайте събитията след зареждане на страницата
Добрата практика е JavaScript кодът да бъде изнесен в отделен файл, за да остане HTML-ът чист и подреден. Event listener-ите не е нужно да стоят като атрибути в HTML – можем да ги закачим директно през JavaScript. Ключовият момент е да изчакаме страницата да се зареди напълно, преди да достъпваме елементи от DOM. Най-сигурният начин в този пример е да използваме window.onload.
Стъпка по стъпка: изнасяне на кода и закачане на click събитие
- Създайте папка
jsи файлmain.js. - Преместете JavaScript кода от HTML в
main.js. - В HTML добавете
<script>таг съсsrc, който сочи къмjs/main.js. - Премахнете inline event атрибутите (например
onclick) от HTML. - В
main.js:- Изчакайте зареждането на страницата чрез
window.onload. - С
document.querySelectorизберете бутона. - Закачете
onclickфункция, която изпълнява желания код (напримерalert).
- Изчакайте зареждането на страницата чрез
Така гарантирате, че елементите вече съществуват в DOM, когато се опитвате да ги достъпите.
Основни методи и свойства
window.onload– изпълнява функция след пълното зареждане на страницата.document.querySelector()– връща първия елемент, който отговаря на CSS селектор.onclick– задава функция, която се изпълнява при клик върху елемент.<script src="...">– зарежда външен JavaScript файл.
Този подход прави кода по-структуриран, по-лесен за поддръжка и по-близък до професионалните стандарти.
Дискусия към урока
Въпроси
Отговори

