การผูกตัวจัดการเหตุการณ์กับองค์ประกอบใน JavaScript

ตอนนี้เรามาเรียนรู้ที่จะทำให้องค์ประกอบ DOM ของเราตอบสนอง ต่อการกระทำของผู้ใช้บนเว็บไซต์กัน เช่น ผู้ใช้คลิกเมาส์ที่ใดก็ได้ และโค้ดของเรา จะต้องตอบสนองต่อการคลิกนั้น และแสดงข้อมูลบางอย่างบนหน้าจอ

การกระทำของผู้ใช้ที่เราสามารถติดตามได้ ผ่าน JavaScript เรียกว่า เหตุการณ์ เหตุการณ์อาจเป็นดังต่อไปนี้: การคลิกเมาส์ บนองค์ประกอบหน้าเว็บ การเลื่อนเมาส์มาวางบน องค์ประกอบหน้าเว็บ หรือในทางกลับกัน - การเลื่อนเคอร์เซอร์ เมาส์ออกจากองค์ประกอบ และอื่น ๆ นอกจากนี้ ยังมีเหตุการณ์ที่ไม่ขึ้นอยู่กับการกระทำของผู้ใช้ ตัวอย่างเช่น เหตุการณ์เมื่อโหลดหน้า HTML เข้าสู่เบราว์เซอร์เสร็จสิ้น

ตัวอย่างเช่น ลองสร้างปุ่ม เมื่อคลิก ที่ปุ่มนั้นจะมีข้อความบางอย่าง ปรากฏขึ้นบนหน้าจอ ก่อนอื่นมาสร้างโค้ด HTML สำหรับปุ่ม:

<input id="button" type="submit">

ตอนนี้เราจะได้ลิงก์ไปยังปุ่มเก็บไว้ในตัวแปร:

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

ตอนนี้เราจำเป็นต้องกำหนดปฏิกิริยาของ ปุ่มของเราเมื่อมีการคลิกที่มัน สำหรับสิ่งนี้ใน JavaScript มีเมธอดพิเศษชื่อ addEventListener โดยรับพารามิเตอร์แรกเป็นชื่อเหตุการณ์ (การคลิกปุ่มมีชื่อว่า 'click') และพารามิเตอร์ที่สอง - เป็น ฟังก์ชันคอลแบ็ก ที่จะทำงานเมื่อเกิดเหตุการณ์นั้นขึ้น

ตัวอย่างเช่น เมื่อคลิกปุ่มให้แสดง ข้อความบางข้อความ:

button.addEventListener('click', function() {
	console.log('!!!');
});

มีปุ่มอยู่ 3 ปุ่ม:

<input id="button1" type="submit">
<input id="button2" type="submit">
<input id="button3" type="submit">

ทำให้เมื่อคลิกที่ปุ่มแรก จะแสดงตัวเลข 1 บนหน้าจอ เมื่อคลิก ที่ปุ่มที่สอง - แสดงตัวเลข 2 และเมื่อคลิกที่ ปุ่มที่สาม - แสดงตัวเลข 3