addEventListener method

เมธอด addEventListener ช่วยให้ คุณสามารถกำหนดตัวจัดการเหตุการณ์ให้กับองค์ประกอบ ด้วยมัน คุณสามารถระบุได้ ตัวอย่างเช่น ว่าจะทำอย่างไรเมื่อปุ่มถูกคลิกหรือจะ ทำอย่างไรเมื่อพิมพ์ในช่องข้อความ ในพารามิเตอร์แรก เราระบุประเภทของเหตุการณ์ ที่จะส่งต่อ ในพารามิเตอร์ที่สอง - ฟังก์ชัน ที่จะถูกเรียกใช้งานหลังจากเหตุการณ์ ที่ระบุในพารามิเตอร์แรก ใน พารามิเตอร์ที่สามซึ่งเป็นตัวเลือก เราเลือกส่ง คุณลักษณะของอ็อบเจกต์ (once, capture, passive) หรือพารามิเตอร์ useCapture

ไวยากรณ์

element.addEventListener('ประเภทเหตุการณ์', function, [คุณลักษณะของอ็อบเจกต์]);
หรือ
element.addEventListener('ประเภทเหตุการณ์', function, [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
	}
);

หลังจากรันโค้ด เราจะเห็น ข้อความต่อไปนี้:

'ไม่มีข้อความ';
'ไม่สามารถเรียก preventDefault ภายในตัวฟังเหตุการณ์แบบ passive ได้'

ตัวอย่าง

พารามิเตอร์ useCapture ที่ตั้งค่าเป็น true แสดงการแพร่ของเหตุการณ์แบบ bubbling จากองค์ประกอบด้านในไปยังองค์ประกอบด้านนอก ส่วนค่า 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
ที่ถอดการผูกเหตุการณ์ออกจากองค์ประกอบ