Усули 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-ро муайян кунем:

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
);

Результат:

Нигаред низ