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

element.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ň:

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

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

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

Mysal

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

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

let 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ň:

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

let 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ň:

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

let 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:

'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ň:

<div id="parent">Ene
	<p id="child">Çaga</p>
</div>

#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;
}

let 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ň

metod removeEventListener,
elementden wakany aýyryp taşlaýar