addEventListener metodi

addEventListener metodi elementga hodisa ishlovchilarni tayinlash imkonini beradi. Uning yordamida, masalan, tugmacha bosilganda nima qilish kerakligini yoki matn maydonchasi yozilayotganda nima qilish kerakligini belgilash mumkin. Birinchi parametrda hodisa turi ko'rsatiladi, ikkinchisida - birinchi parametrda ko'rsatilgan hodisadan keyin ishlaydigan funksiya. Uchinchi ixtiyoriy parametrda obyekt xususiyatlari (once, capture, passive) yoki useCapture parametri o'tkaziladi.

Sintaksis

javascriptelement.addEventListener('hodisa turi', funksiya, [obyekt xususiyatlari]);
yoki
element.addEventListener('hodisa turi', funksiya, [useCapture]);

Misol

Tugmachaga bosilganda xabar chiqadigan qilaylik:

html<input type="button" id="button" value="menga bosing">

javascriptlet button = document.querySelector('#button');

button.addEventListener('click', function() {
  alert('xabar');
});

Результат:

Misol

Input fokusni yo'qotganda, shu inputning matni bilan xabar chiqadigan kod yozaylik:

html<input id="input" value="matn">

javascriptlet input = document.querySelector('#input');

input.addEventListener('blur', function() {
  alert(this.value);
});

Результат:

Misol

Tugmacha bosilganda xabar faqat bir marta konsolga chiqadigan qilaylik. Buning uchun ikkinchi parametrdan foydalanamiz:

html<input type="button" id="button" value="menga bosing">

javascriptlet button = document.querySelector('#button');

button.addEventListener('click',
  function() {
    console.log('xabar');
  },
  {
    once: true
  }
);

Misol

passive parametri hodisani qayta ishlash paytida event.preventDefault metodini chaqirishni taqiqlaydi. Oldingi misolda event.preventDefault metodini qo'llaymiz, shuningdek passive parametrida true qiymatini ko'rsatamiz:

html<input type="button" id="button" value="menga bosing">

javascriptlet button = document.querySelector('#button');

button.addEventListener('click',
  function(event) {
    event.preventDefault();
    console.log('Xabar yo‘q');
  },
  {
    passive: true
  }
);

Kod bajarilgandan keyin quyidagi xabarlarni ko'ramiz:

javascript'Xabar yo‘q';
'Unable to preventDefault inside passive event listener invocation.'

Misol

useCapture parametri true qiymatida hodisalarning ichki elementdan tashqi elementgacha qanday ko'tarilishini (bubbling) ko'rsatadi, false qiymatida - tashqi elementdan ichki elementgacha qanday ko'tarilishini ko'rsatadi. useCapture parametri o'tkazilganda uning nomi o'tkazilmaydi va shunchaki true yoki false yoziladi. Keling, ota va farzand elementlariga ularni bosilganda hodisalar qanday ko'tarilishini ko'rib chiqaylik:

html<div id="parent">Ota
  <p id="child">Farzand</p>
</div>

css#parent{
  width: 60px;
  padding: 10px;
  border: 1px solid red;
  text-align: center;
}
#child{
  width: 60px;
  marging-right: 40px;
  border: 1px solid blue;
  text-align: center;
}

javascriptlet parent = document.querySelector('#parent');
let child = document.querySelector('#parent');

parent.addEventListener('click',
  () => alert('ota'), 
  true
);
child.addEventListener('click',
  () => alert('farzand'), 
  true
);

Результат:

Shuningdek qarang