addEventListener методи

addEventListener методи элементга вокеа ишловчиларини тайинлаш имконини беради. Унинг ёрдамида, масалан, тугмага босилганда нима килиш кераклигини ёки матн майдонида матн терганда нима килиш кераклигини кўрсатиш мумкин. Биринчи параметрда берилган вокеанинг турини, иккинчисида - биринчи параметрда кўрсатилган вокеадан сўнг ишлайдиган функцияни кўрсатамиз. Учинчи ихтиёрий параметрда объектнинг хусусиятларини (once, capture, passive) ёки useCapture параметрини берамиз.

Синтаксис

javascriptэлемент.addEventListener('вокеа тури', функция, [объект хусусиятлари]);
ёки
элемент.addEventListener('вокеа тури', функция, [useCapture]);

Мисол

Тугмага босилганда хабар чикарилиши учун куйидаги кодни язайлик:

html<input type="button" id="button" value="click me">

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

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

Результат:

Мисол

Инпутда фокус йўколганда шу инпутнинг матни билан хабар чикарилиши учун куйидаги кодни язайлик:

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

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

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

Результат:

Мисол

Тугмага босилганда хабар консолга факат бир марта чикарилиши учун, иккинчи параметрдан фойдаланамиз:

html<input type="button" id="button" value="click me">

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

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

Мисол

passive параметри вокеа ишловчисида event.preventDefault методини чакиришни таъкиклайди. Олдинги мисолга event.preventDefault методини кўллаймиз, шунингдек passive параметрига true кийматini берамиз:

html<input type="button" id="button" value="click me">

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

button.addEventListener('click',
  function(event) {
    event.preventDefault();
    console.log('No message');
  },
  {
    passive: true
  }
);

Код ишга туширилгандан сўнг куйидаги хабарларни кўрамиз:

javascript'No message';
'Unable to preventDefault inside passive event listener invocation.'

Мисол

useCapture параметри true кийматида ички элементдан ташкига караб вокеаларнинг кўтарилишини кўрсатади, false кийматида - ташкидан ичкига караб. useCapture параметрини ўтказганда унинг номи тушириб колдирилади ва факат true ёки false ёзилади. Ота ва бола элементларга уларга босилганда вокеалар кандай кўтарилишини кузатамиз:

html<div id="parent">Parent
  <p id="child">Child</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('parent'), 
  true
);
child.addEventListener('click',
  () => alert('child'), 
  true
);

Результат:

Шунингдек ку́ринг