მეთოდი 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('მშობელი'), 
	true
);
child.addEventListener('click',
	() => alert('შვილობილი'), 
	true
);

იხილეთ აგრეთვე

მეთოდი removeEventListener,
რომელიც მოვლენას უთმობს ელემენტს