Metod addEventListener

Metod addEventListener element üçin wakalaryň işleýjilerini belläp bermäge mümkinçilik berýär. Onuň kömegi bilen, mysal üçin, düwmä basylan wagtynda näme etmelidigini ýa-da tekstiň girdi meýdança ýazylanda näme etmelidigini görkezip bileris. Birkinji parametrde geçirilýän wakanyň görnüşini görkezýäris, ikinji parametrde - birkinji parametrde görkezilen wakadan soň işjeleşjek funksiýany. Üçünji hökmany däl parametrde obýektiň häsiýetlerini (once, capture, passive) ýa-da useCapture parametrini geçirýäris.

Sintaksis

javascriptelement.addEventListener('waka görnüşi', funksiýa, [obýektiň häsiýetleri]);
ýa-da
element.addEventListener('waka görnüşi', funksiýa, [useCapture]);

Mysal

Düwmä basylan wagtynda hat çykarylýandygy üçin edeliň:

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

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

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

Результат:

Mysal

Inputdan fokus ýitirilende şol inputdaky teksti bilen hat çykarylýandygy üçin kody ýazalyň:

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

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

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

Результат:

Mysal

Düwmä basylan wagtynda habar diňe bir gezek konsolda çykarylýandygy üçin edeliň. Bun üçin ikinji parametreden peýdalanyň:

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

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

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

Mysal

passive parametri waka işlenilýärkä metodu çaýyrmaga event.preventDefault gadagan edýär. Öňki mysala metoda event.preventDefault uguralyň, we şeýle hem passive parametrinde true bahasyny görkezeliň:

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

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

button.addEventListener('click',
  function(event) {
    event.preventDefault();
    console.log('Hat ýok');
  },
  {
    passive: true
  }
);

Kody ýerine ýetireniňizden soň biz aşakdaky habarlary göreris:

javascript'Hat ýok';
'Unable to preventDefault inside passive event listener invocation.'

Mysal

useCapture parametri true bahasynda wakalaryň ýokaryk galyp çykmagyny içki elementden daşky elementçä görkezýär, false bahasynda - daşky elementden içki elementçä. Parametr useCapture geçirilende onuň ady goýulmaýar we diňe true ýa-da false ýazylýar. Ene elementde we çaga elementlerde olara basylan wagtynda wakalaryň nähili ýokaryk galyp çykýandygyna göz aýlap geçeliň:

html<div id="parent">Ene
  <p id="child">Çaga</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('ene'), 
  true
);
child.addEventListener('click',
  () => alert('çaga'), 
  true
);

Результат:

Şeýle hem garaň