addEventListener մեթոդը

addEventListener մեթոդը թույլ է տալիս նշանակել տարրի վրա իրադարձությունների մշակիչներ: Դրա միջոցով կարելի է նշել, օրինակ, թե ինչ անել կոճակի վրա կտտացնելիս կամ ինչ անել տեքստային դաշտում տեքստ մուտքագրելիս: Առաջին պարամետրում նշում ենք փոխանցվող իրադարձության տեսակը, երկրորդում՝ ֆունկցիան, որը կգործարկվի առաջին պարամետրում նշված իրադարձությունից հետո: Երրորդ ոչ պարտադիր պարամետրում փոխանցում ենք օբյեկտի բնութագրերը (once, capture, passive) կամ useCapture պարամետրը:

Շարահյուսություն

տարր.addEventListener('իրադարձության տեսակ', ֆունկցիա, [օբյեկտի բնութագրերը]);
կամ
տարր.addEventListener('իրադարձության տեսակ', ֆունկցիա, [useCapture]);

Օրինակ

Եկեք անենք, որ կոճակի վրա կտտացնելիս ցուցադրվի հաղորդագրություն.

<input type="button" id="button" value="կտտացրու ինձ">

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

button.addEventListener('click', function() {
	alert('հաղորդագրություն');
});

Օրինակ

Եկեք գրենք կոդ, որպեսզի Ինփութում ֆոկուսը կորցնելիս ցուցադրվի հաղորդագրություն այդ ինփութի տեքստով.

<input id="input" value="տեքստ">

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

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

Օրինակ

Եկեք անենք, որ կոճակի վրա կտտացնելիս հաղորդագրությունը ցուցադրվի միայն մեկ անգամ: Դրա համար կօգտվենք երկրորդ պարամետրից.

<input type="button" id="button" value="կտտացրու ինձ">

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

button.addEventListener('click',
	function() {
		console.log('հաղորդագրություն');
	},
	{
		once: true
	}
);

Օրինակ

passive պարամետրը արգելում է կանչել event.preventDefault մեթոդը իրադարձությունը մշակելիս: Եկեք նախորդ օրինակին կիրառենք event.preventDefault մեթոդը, ինչպես նաև նշենք passive պարամետրում true արժեքը.

<input type="button" id="button" value="կտտացրու ինձ">

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

button.addEventListener('click',
	function(event) {
		event.preventDefault();
		console.log('Ոչ մի հաղորդագրություն');
	},
	{
		passive: true
	}
);

Կոդը կատարելուց հետո մենք կտեսնենք հետևյալ հաղորդագրությունները.

'Ոչ մի հաղորդագրություն';
'Unable to preventDefault inside passive event listener invocation.'

Օրինակ

useCapture պարամետրը true արժեքով ցույց է տալիս իրադարձությունների всплытие ներքին տարրից դեպի արտաքին, իսկ false արժեքով՝ արտաքինից դեպի ներքին տարր: useCapture պարամետրը փոխանցելիս դրա անունը բաց է թողնվում և գրվում է պարզապես true կամ false: Եկեք տեսնենք, թե ինչպես են всплывают իրադարձությունները ծնող և երեխա տարրերում դրանց վրա կտտացնելիս.

<div id="parent">Ծնող
	<p id="child">Երեխա</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('parent'), 
	true
);
child.addEventListener('click',
	() => alert('child'), 
	true
);

Տես նաև

removeEventListener մեթոդը,
որը անջատում է իրադարձությունը տարրից