DOM hodisalari
Hodisalarga javob berish
JavaScript voqea sodir bo‘lganda, masalan, foydalanuvchi HTML elementini bosganda bajarilishi mumkin.
Foydalanuvchi elementni bosganida kodni bajarish uchun HTML hodisa atributiga JavaScript kodini qo‘shing:
onclick=JavaScript
HTML hodisalariga misollar:
- Foydalanuvchi sichqonchani bosganda
- Veb-sahifa yuklanganda
- Rasm yuklanganda
- Sichqoncha element ustida harakat qilganda
- Kirish maydoni o‘zgartirilganda
- HTML formasi yuborilganda
- Foydalanuvchi klaviatura tugmasini bosganda
Ushbu misolda <h1> elementining mazmuni foydalanuvchi uni bosganida o‘zgaradi:
Misol
<!DOCTYPE html>
<html>
<body>
<h1 onclick="this.innerHTML = 'Ooops!'">Click on this text!</h1>
</body>
</html>
O‘zingiz sinab ko‘ring »
Ushbu misolda Function voqea ishlovchisidan chaqiriladi:
Misol
<!DOCTYPE html>
<html>
<body>
<h1 onclick="changeText(this)">Click on this text!</h1>
<script>
function changeText(id) {
id.innerHTML = "Ooops!";
}
</script>
</body>
</html>
O‘zingiz sinab ko‘ring »
HTML hodisa atributlari
Hodisalarni HTML elementlariga belgilash uchun siz hodisa atributlaridan foydalanishingiz mumkin.
Misol
Tugma elementiga onclick hodisasini biriktiring:
<button onclick="displayDate()">Try it</button>
O‘zingiz sinab ko‘ring »
Yuqoridagi misolda displayDate nomli funksiya bajariladi
tugma bosilganda.
HTML DOM yordamida hodisalarni tayinlash
HTML DOM JavaScript yordamida HTML elementlariga hodisalarni belgilash imkonini beradi:
Misol
Tugma elementiga onclick hodisasini biriktiring:
<script>
document.getElementById("myBtn").onclick = displayDate;
</script>
O‘zingiz sinab ko‘ring »
Yuqoridagi misolda displayDate nomli funksiya tayinlangan
id="myBtn" bilan HTML elementi.
Tugma bosilganda funksiya bajariladi.
Yuklab olish va yuklash voqealari
onload va onunload hodisalari foydalanuvchi sahifaga kirganda yoki undan chiqqanda ishga tushadi.
onload hodisasi tashrif buyuruvchining brauzer turi va brauzer versiyasini tekshirish va ma’lumotlar asosida veb-sahifaning tegishli versiyasini yuklash uchun ishlatilishi mumkin.
onload va onunload hodisalaridan cookie fayllari bilan ishlashda foydalanish mumkin.
oninput hodisasi
oninput hodisasi ko‘pincha foydalanuvchi ma’lumotlarini kiritayotganda ba’zi harakatlar uchun bo‘ladi.
Quyida kirish maydonining mazmunini o‘zgartirish uchun oninputdan qanday foydalanishga misol keltirilgan.
onchange hodisasi
onchange hodisasi ko‘pincha kirish maydonlarini tekshirish bilan birgalikda ishlatiladi.
Quyida onchange dan qanday foydalanishga misol keltirilgan. upperCase()
funksiya foydalanuvchi kiritish maydonining mazmunini o‘zgartirganda chaqiriladi.
onmouseover va onmouseout hodisalari
onmouseover va onmouseout hodisalari foydalanuvchi sichqonchani bosganda funksiyani ishga tushirish uchun ishlatilishi mumkin.
HTML elementi ustida yoki tashqarisida:
onmousedown, onmouseup va onclick hodisalari
Onmousedown, onmouseup va onclick Eventlari sichqonchani bosishning bir qismidir. Avval sichqoncha tugmasi bosilganda onmousedown hodisasi ishga tushadi, so‘ngra sichqoncha tugmasi bo‘shatilganda onmouseup hodisasi ishga tushadi, nihoyat, sichqonchani bosish tugallangach, onclick hodisasi ishga tushadi.
Qo‘shimcha misollar
onmousedown va onmouseup Foydalanuvchi sichqoncha tugmasini bosib turganda tasvirni o‘zgartiradi.
yuklash Sahifani yuklash tugagach, ogohlantirish oynasini ko‘rsatish.
diqqat markazida Kirish maydoni diqqat markaziga tushganda uning fon rangini o‘zgartiring.
Sichqoncha hodisalari Kursor element ustida harakat qilganda uning rangini o‘zgartirish.
HTML DOM Event obyekti bo‘yicha ma’lumotnoma
Barcha HTML DOM hodisalari ro‘yxatini ko‘rish uchun bizning to‘liq HTML DOM hodisasi obyekti ma’lumotnomamizga qarang.
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!