กิจกรรม JavaScript:สามวิธีในการสร้างกิจกรรม

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

ใน JavaScript เหตุการณ์ถูกใช้เพื่อทำให้ไซต์มีการโต้ตอบ ในคู่มือนี้ เราจะพูดถึงเหตุการณ์ JavaScript เราจะสำรวจสถานที่ที่อาจใช้กิจกรรม วิธีกำหนดกิจกรรม และวิธีเรียกใช้กิจกรรม เริ่มกันเลย!

เหตุการณ์ JavaScript คืออะไร

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

เหตุการณ์ JavaScript มีการใช้งานที่หลากหลาย ซึ่งรวมถึง:

ตรวจสอบว่ามีการกรอกแบบฟอร์มหรือไม่
การนำทางผู้ใช้ไปยังหน้าอื่นเมื่อกรอกแบบฟอร์มแล้ว
การทำเมนูแบบเลื่อนลงแบบโต้ตอบ
อนุญาตให้ผู้ใช้ซูมภาพเข้าและออก

ในการทำงานกับเหตุการณ์ใน JavaScript คุณจำเป็นต้องรู้เกี่ยวกับสองแนวคิด:ตัวจัดการเหตุการณ์และผู้ฟังเหตุการณ์

ตัวจัดการเหตุการณ์คือฟังก์ชันที่ทำงานเมื่อมีการทริกเกอร์เหตุการณ์บนหน้าเว็บ ผู้ฟังเหตุการณ์เชื่อมต่อฟังก์ชันเหตุการณ์กับองค์ประกอบ HTML ดังนั้นเมื่อดำเนินการฟังก์ชันนั้น องค์ประกอบเว็บจะเปลี่ยนไป

ตัวจัดการเหตุการณ์สามารถกำหนดได้ด้วยวิธีใดวิธีหนึ่งจากสามวิธี:ใช้ตัวจัดการเหตุการณ์แบบอินไลน์ คุณสมบัติเหตุการณ์ หรือตัวฟังเหตุการณ์

ตัวจัดการเหตุการณ์แบบอินไลน์

วิธีที่ง่ายที่สุดในการเริ่มต้นกับเหตุการณ์ใน JavaScript คือการใช้ตัวจัดการเหตุการณ์แบบอินไลน์ ซึ่งหมายความว่าคุณจะกำหนดกิจกรรมของคุณในไฟล์ HTML

81% ของผู้เข้าร่วมกล่าวว่าพวกเขารู้สึกมั่นใจมากขึ้นเกี่ยวกับโอกาสในการทำงานด้านเทคโนโลยีหลังจากเข้าร่วม bootcamp จับคู่กับ Bootcamp วันนี้

ผู้สำเร็จการศึกษาจากหลักสูตร bootcamp โดยเฉลี่ยใช้เวลาน้อยกว่าหกเดือนในการเปลี่ยนอาชีพ ตั้งแต่เริ่มต้น bootcamp ไปจนถึงหางานแรก

สำหรับตัวอย่างนี้ สมมติว่าเรากำลังออกแบบเว็บไซต์สำหรับร้านเบเกอรี่ชื่อ JJ Smith’s Bakery เราต้องการให้ผู้ใช้ได้รับข้อความแจ้งว่า "ได้รับการตอบสนอง" เมื่อพวกเขาส่งแบบฟอร์ม

พิจารณารหัสต่อไปนี้:

<!DOCTYPE html>
<html>
	<head>
		<title>JJ Smith's Bakery</title>
	</head>

	<script src="main.js"></script>

	<body>
		<p id="submitted"></p>
		<button onclick="submitForm()">Submit form</button>
	</body>
</html>

รหัสนี้แสดงหน้าเว็บที่มีลักษณะดังนี้:

กิจกรรม JavaScript:สามวิธีในการสร้างกิจกรรม

จนถึงตอนนี้ยังไม่มีอะไรเกิดขึ้นมากนัก หน้าเว็บของเรามีปุ่มที่จะทำอะไรบางอย่างเมื่อเราคลิกปุ่มของเรา เมื่อเราคลิกปุ่มของเรา จะไม่มีอะไรเกิดขึ้น เนื่องจากเรายังไม่ได้เขียนตัวจัดการเหตุการณ์ของเรา

ในไฟล์ main.js ให้วางโค้ดต่อไปนี้:

const submitForm = () => {
	const text = document.getElementById("submitted");
	text.textContent = "Form submitted."
}

รหัสนี้จะค้นหาองค์ประกอบที่มีรหัส "ส่งแล้ว" และจะแก้ไขเนื้อหาเป็น "ส่งแบบฟอร์ม" รหัสนี้จะทำงานก็ต่อเมื่อ submitForm() . ของเรา เรียกว่าฟังก์ชัน มีกำหนดจะเกิดขึ้นเมื่อผู้ใช้คลิกที่ปุ่มของเรา

เมื่อเราคลิกปุ่มของเรา สิ่งต่อไปนี้จะเกิดขึ้น:

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

เหตุการณ์ที่มีคุณสมบัติตัวจัดการ

ในตัวจัดการแบบอินไลน์ คุณต้องระบุฟังก์ชันที่คุณต้องการเรียกใช้ในไฟล์ HTML ของคุณ ในโค้ด HTML ของเราก่อนหน้านี้ บรรทัดนี้เป็นตำแหน่งที่เรากำหนดฟังก์ชันที่เราต้องการเรียกเมื่อกดปุ่ม:

<button onclick="submitForm()">Submit form</button>

การใช้คุณสมบัติตัวจัดการ เราสามารถลบเหตุการณ์ "onclick" ออกจากโค้ดของเราได้ สิ่งนี้ทำให้เราสามารถย้าย JavaScript ทั้งหมดที่ทำให้หน้าเว็บของเราโต้ตอบไปเป็นไฟล์ของตัวเองได้ สำหรับตัวอย่างนี้ เราจะกำหนดปุ่มของเราให้กับรหัส "ปุ่ม" เพื่อให้เราสามารถระบุปุ่มของเราในโค้ด JavaScript ของเราได้ มาลบเหตุการณ์ onclick และกำหนดรหัสให้กับปุ่มของเรา:

<button id="button">Submit form</button>

เพื่อให้เหตุการณ์ของเราเริ่มทำงานเมื่อกดปุ่ม เราจะเขียนเหตุการณ์ด้วยคุณสมบัติตัวจัดการภายในไฟล์ "main.js" ของเรา นี่คือรหัสที่เราจะใช้:

const submitForm = () => {
	const text = document.getElementById("submitted");
	text.textContent = "Form submitted."
}

const button = document.getElementById("button")
button.onclick = submitForm;

เมื่อคุณเรียกใช้รหัสนี้และคลิกที่ปุ่ม ข้อมูลต่อไปนี้จะถูกส่งกลับ:

ปุ่มของเราทำงานในลักษณะเดียวกับก่อนหน้านี้ แต่โค้ดของเราเขียนในลักษณะที่ต่างออกไป แทนที่จะเขียนตัวจัดการเหตุการณ์แบบอินไลน์ เราได้ย้ายไปยังไฟล์ main.js ของเรา ซึ่งช่วยให้เราเขียนโค้ดที่ดูแลรักษาได้มากขึ้น เนื่องจากเราไม่จำเป็นต้องอ่านโค้ด HTML ทั้งหมดเพื่อค้นหาว่าเหตุการณ์ในบรรทัดถูกทริกเกอร์ที่ใด

ตัวฟังเหตุการณ์

ผู้ฟังเหตุการณ์สามารถใช้เพื่อประกาศเหตุการณ์ใน JavaScript ผู้ฟังมักจะมองหาเมื่อสถานะขององค์ประกอบเปลี่ยนไป และหากองค์ประกอบนั้นเปลี่ยนไป รหัสในตัวฟังจะถูกดำเนินการ

ตัวอย่างเช่น เมื่อคุณคลิกที่ปุ่มที่แนบมากับตัวฟังเหตุการณ์ ผู้ฟังจะ "ได้ยิน" ว่ามีการทริกเกอร์เหตุการณ์ของเมาส์ จากนั้นจะรันโค้ดที่คุณเชื่อมโยงกับตัวฟังเหตุการณ์นั้น ๆ

โค้ด HTML ของเราสำหรับตัวอย่างนี้เหมือนกับด้านบน แต่เราจะทำการเปลี่ยนแปลงเล็กน้อยในไฟล์ “main.js”:

const submitForm = () => {
	const text = document.getElementById("submitted");
	text.textContent = "Form submitted."
}

const button = document.getElementById("button")
button.addEventListener("click", submitForm);

ในโค้ดนี้ เราใช้ addEventListener เพื่อสร้างผู้ฟังเหตุการณ์ นี่เป็นการแทนที่การผูก submitForm() . ของเรา ฟังก์ชัน JavaScript กับเหตุการณ์ onclick ตามที่เราทำในสองตัวอย่างสุดท้ายของเรา

เราระบุ "คลิก" เพื่อบอกให้โค้ดของเราฟังเมื่อมีการคลิกปุ่มของเราด้วยตัวชี้เมาส์ มีเหตุการณ์ประเภทอื่นนอกเหนือจากเหตุการณ์การคลิก เช่น เหตุการณ์แป้นพิมพ์ แต่เราจะเน้นที่เหตุการณ์การคลิกเมาส์ในบทช่วยสอนนี้

เรียกใช้รหัสของเราอีกครั้งแล้วคลิกปุ่มของเรา

ผลลัพธ์จะเหมือนกับที่เราเคยเห็นในสองตัวอย่างล่าสุด แต่คราวนี้เราใช้ตัวฟังเหตุการณ์ HTML Listener เหตุการณ์เป็นวิธีใหม่ล่าสุดในการประกาศเหตุการณ์ใน JavaScript และอาจเป็นวิธีการที่ใช้บ่อยที่สุด

บทสรุป

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

ตอนนี้คุณพร้อมที่จะเริ่มสร้างกิจกรรมใน JavaScript เหมือนนักพัฒนาเว็บมืออาชีพแล้ว!