addEventListener()
Misollar
<button> elementiga click hodisasini qo‘shing:
element.addEventListener("click", myFunction);
function myFunction() {
document.getElementById("demo").innerHTML = "Hello World";
}
O‘zingiz sinab ko‘ring »
Ixchamroq kod:
element.addEventListener("click", function() {
document.getElementById("demo").innerHTML = "Hello World";
});
O‘zingiz sinab ko‘ring »
Quyida ko‘proq misollar.
Tavsif
addEventListener() metodi elementga hodisa ishlovchisini biriktiradi.
Element metodlari
Document metodlari
Darsliklar
Sintaksis
element.addEventListener(event, function, useCapture)
Parametrlar
| Parametr | Tavsif |
| event | Majburiy. Hodisa nomi. "on" prefiksidan foydalanmang. "onclick" emas, "click" yozing. DOM hodisalarining to‘liq ro‘yxati. |
| function | Majburiy. Hodisa sodir bo‘lganda ishga tushadigan funksiya. |
| useCapture | Ixtiyoriy (standart = false).false - Ishlovchi ko‘tarilish (bubbling) bosqichida bajariladi.true - Ishlovchi ushlash (capturing) bosqichida bajariladi. |
Qaytariladigan qiymat
| YO‘Q |
Ko‘proq misollar
Bitta elementga ko‘plab hodisalar qo‘shishingiz mumkin:
element.addEventListener("click", myFunction1);
element.addEventListener("click", myFunction2);
O‘zingiz sinab ko‘ring »
Bitta elementga turli hodisalar qo‘shishingiz mumkin:
element.addEventListener("mouseover", myFunction);
element.addEventListener("click", someOtherFunction);
element.addEventListener("mouseout", someOtherFunction);
O‘zingiz sinab ko‘ring »
Parametr qiymatlarini uzatish uchun "anonim funksiya"dan foydalaning:
element.addEventListener("click", function() {
myFunction(p1, p2);
});
O‘zingiz sinab ko‘ring »
<button> elementining fon rangini o‘zgartiring:
element.addEventListener("click", function() {
this.style.backgroundColor = "red";
});
O‘zingiz sinab ko‘ring »
Ko‘tarilish (bubbling) va ushlash (capturing) o‘rtasidagi farq:
element1.addEventListener("click", myFunction, false); element2.addEventListener("click", myFunction, true);
O‘zingiz sinab ko‘ring »
Hodisa ishlovchisini olib tashlang:
element.addEventListener("mousemove", myFunction);
element.removeEventListener("mousemove", myFunction);
O‘zingiz sinab ko‘ring »
Brauzerlarda qo‘llab-quvvatlash
element.addEventListener() — DOM Level 2 (2001) imkoniyati.
U barcha brauzerlarda to‘liq qo‘llab-quvvatlanadi:
| Chrome | Edge | Firefox | Safari | Opera | IE |
| Ha | Ha | Ha | Ha | Ha | 9-11 |
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!