JS HTML hodisalari
HTML Eventlari
HTML Eventlari HTML elementlari bilan sodir bo‘ladigan narsalardir.
Voqealarga misollar:
- HTML tugmasi bosiladi
- Veb-sahifa yuklash tugallandi
- Sichqoncha element ustida harakatlanadi
- Klaviatura tugmasi bosiladi
- HTML kiritish maydoni o‘zgartirildi
HTML DOM JavaScript-ga HTML hodisalariga munosabat bildirish imkonini beradi:
JavaScript Eventlari (Events)
Ko‘pincha Event yuz berganda biror amalni bajarish kerak bo‘ladi.
HTML sahifalarida JavaScript ishlatilsa, JavaScript voqealarga munosabat bildira oladi.
JavaScript Eventlar yuz berganda maxsus kodni bajarish imkonini beradi.
HTML HTML elementlariga JavaScript kodi bilan Event ishlov beruvchisi atributlarini qo‘shish imkonini beradi.
Sintaksis
Bitta tirnoq bilan:
<element event='some JavaScript'>
Ikki tirnoq bilan:
<element event="some JavaScript">
Quyidagi misolda a ga onclick atributi (kod bilan) qo‘shilgan
<button> element:
Misol
<button onclick="document.getElementById('demo').innerHTML = Date()">The time is?</button>
O‘zingiz sinab ko‘ring »
Yuqoridagi misolda JavaScript kodi elementning mazmunini id="demo" bilan o‘zgartiradi.
Keyingi misolda kod this.innerHTML yordamida o‘z elementining mazmunini o‘zgartiradi:
JavaScript funksiyasini chaqirish
JavaScript kodi ko‘pincha bir necha qatordan iborat bo‘lishi mumkin.
Funksiyani chaqirish uchun Event atributidan foydalanish keng tarqalgan:
Misol
<button onclick="displayDate()">The time is?</button>
<script>
function displayDate() {
document.getElementById("demo").innerHTML = Date();
}
</script>
O‘zingiz sinab ko‘ring »
Eng ko‘p tarqalgan HTML Eventlari
Quyida ba’zi umumiy HTML Eventlari ro‘yxati keltirilgan:
| Hodisa | Tavsif |
|---|---|
| onchange | HTML elementi o‘zgartirildi |
| onclick | Foydalanuvchi HTML elementini bosadi |
| onmouseover | Foydalanuvchi sichqonchani HTML elementi ustiga siljitadi |
| onmouseout | Foydalanuvchi sichqonchani HTML elementidan uzoqlashtiradi |
| onkeydown | Foydalanuvchi klaviatura tugmachasini bosadi |
| onload | Brauzer sahifani yuklashni tugatdi |
Ro‘yxat bundan ancha uzun: W3Schools JavaScript ma’lumotnomasi: HTML DOM hodisalari.
JavaScript hodisalarni ishlovchilar
Hodisa ishlov beruvchisi - bu voqea sodir bo‘lganda ishlaydigan JavaScript kodi.
Voqealarni qayta ishlash vositalaridan foydalanuvchi kiritishi, foydalanuvchi harakatlari va brauzer harakatlarini boshqarish va tekshirish uchun foydalanish mumkin:
- Har safar sahifa yuklanganda bajarilishi kerak bo‘lgan narsalar
- Sahifa yopilganda bajarilishi kerak bo‘lgan narsalar
- Foydalanuvchi tugmani bosganida bajarilishi kerak bo‘lgan harakat
- Foydalanuvchi ma’lumotlarni kiritganda tekshirilishi kerak bo‘lgan tarkib
- Va yana ...
JavaScript-ning Eventlar bilan ishlashiga imkon berish uchun turli xil usullardan foydalanish mumkin:
- HTML Event atributlari bevosita JavaScript kodini bajarishi mumkin
- HTML Event atributlari JavaScript funksiyalarini chaqirishi mumkin
- Siz HTML elementlariga o‘zingizning Event ishlov beruvchi funksiyalaringizni belgilashingiz mumkin
- Voqealar yuborilishi yoki boshqarilishining oldini olishingiz mumkin
- Va yana ...
Voqealar tinglovchisidan foydalanish
onclick kabi hodisa atributlaridan foydalanish oson.
Shunga qaramay, addEventListener() dan foydalanish hodisalarni boshqarishning tavsiya etilgan usuli hisoblanadi.
Tavsiya etilmaydi
onclick atributidan foydalanish:
<button onclick="displayDate()">Time is?</button>
<p id="demo"></p>
<script>
// Function to display date
function displayDate() {
document.getElementById("demo").innerHTML = Date();
}
</script>
O‘zingiz sinab ko‘ring »
addEventListener() usuli HTML va JavaScript-ni ajratib turadi.
Tavsiya etilgan
addEventListener() usulidan foydalanish:
<button id="myBtn">Click me</button>
<p id="demo"></p>
<script>
const btn = document.getElementById("myBtn");
// Add EventListener to btn
btn.addEventListener("click", function () {
document.getElementById("demo").innerHTML = Date();
});
</script>
O‘zingiz sinab ko‘ring »
HTML DOM bo‘limlarida voqealar va hodisalarni ishlovchilar haqida ko‘proq bilib olasiz.
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!