สรุปโดยย่อของเหตุการณ์ JavaScript

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

[คำแนะนำที่เกี่ยวข้อง: วิดีโอสอน JavaScript, ส่วนหน้าของเว็บ]

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

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

เหตุการณ์การโหลดเอกสาร (onload): เหตุการณ์ onload จะถูกทริกเกอร์หลังจากโหลดทั้งหน้า ใช้ตามที่แสดง:

จากมุมมองของประสิทธิภาพ ควรเขียนไว้ที่ด้านล่างของหน้าจะดีกว่า! รหัส js ถูกเขียนไว้ที่ด้านล่างของหน้าเพื่อให้แน่ใจว่าหน้านั้นถูกโหลดเมื่อมีการเรียกใช้โค้ด window.onload สามารถปรากฏได้เพียงครั้งเดียวบนเพจ และโค้ดที่ตามมาจะเขียนทับโค้ดก่อนหน้า

วัตถุเหตุการณ์: หลังจากเหตุการณ์เกิดขึ้น วัตถุเหตุการณ์จะถูกสร้างขึ้นและส่งผ่านไปยังฟังก์ชันการฟังเป็นพารามิเตอร์ ประสิทธิภาพที่เฉพาะเจาะจงคือเราส่งผ่านพารามิเตอร์เหตุการณ์ในฟังก์ชันโทรกลับ และค่าของพารามิเตอร์นี้จะถูกส่งผ่านโดยอัตโนมัติโดย JS ออบเจ็กต์เหตุการณ์นี้จะมีข้อมูลที่เกี่ยวข้องทั้งหมดเกี่ยวกับเหตุการณ์นี้ รวมถึงเหตุการณ์ (เมาส์/คีย์บอร์ด) ที่เป็นเหตุการณ์ ตัวกระตุ้นเหตุการณ์ เป้าหมายของเหตุการณ์ ฯลฯ

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

วัตถุเหตุการณ์ใน IE แตกต่างจากการเข้าถึงวัตถุเหตุการณ์ใน DOM มีหลายวิธีในการเข้าถึงวัตถุเหตุการณ์ใน IE ขึ้นอยู่กับวิธีที่คุณระบุตัวจัดการเหตุการณ์ ใน IE วัตถุเหตุการณ์มีอยู่เป็นแอตทริบิวต์ของวัตถุหน้าต่าง คุณสามารถใช้ window.event เพื่อรับวัตถุเหตุการณ์ได้ เมื่อใช้แนบEvent() วัตถุเหตุการณ์จะถูกส่งผ่านในตัวจัดการหรือสามารถนำมาใช้ใน วิธีก่อนหน้า ต่อไปนี้เป็นกรณีตัวอย่าง: เมื่อเมาส์อยู่บนกล่อง แท็ก p ด้านล่างจะแสดงพิกัดปัจจุบันของเมาส์

การแสดงผล:

แผนภาพรหัส:

เหตุการณ์ bubbling (บับเบิ้ล): สิ่งที่เรียกว่า bubbling หมายถึงการแพร่ขยายของเหตุการณ์ขึ้นไปด้านบน เมื่อมีการทริกเกอร์เหตุการณ์ในองค์ประกอบระดับบนสุด เหตุการณ์เดียวกันในองค์ประกอบระดับบนสุดก็จะถูกทริกเกอร์เช่นกัน บับเบิลมีประโยชน์ในสถานการณ์ส่วนใหญ่ในการพัฒนา หากคุณไม่ต้องการให้เกิดฟองสบู่เกิดขึ้น คุณสามารถยกเลิกการฟองสบู่ผ่านวัตถุเหตุการณ์ event.cancelBubble=true

การแสดงผล:

แผนภาพรหัส:

การมอบหมายเหตุการณ์: หมายถึงเหตุการณ์ที่เชื่อมโยงกับองค์ประกอบระดับบนสุดขององค์ประกอบ ดังนั้นเมื่อมีการทริกเกอร์เหตุการณ์บนองค์ประกอบระดับล่าง เหตุการณ์นั้นจะแสดงขึ้นมาที่องค์ประกอบระดับบนสุด และเหตุการณ์จะถูกประมวลผลผ่านฟังก์ชันการตอบสนองขององค์ประกอบระดับบน องค์ประกอบ. การมอบหมายเหตุการณ์ใช้ bubbling การมอบหมายสามารถลดจำนวนการเชื่อมโยงเหตุการณ์และปรับปรุงประสิทธิภาพของโปรแกรม เป้าหมายแอตทริบิวต์ของวัตถุเหตุการณ์: ส่งคืนองค์ประกอบที่ทำให้เกิดเหตุการณ์นี้ (โหนดเป้าหมายของเหตุการณ์)

กรณี:

การแสดงผล:

แผนภาพรหัส:

การเชื่อมโยงเหตุการณ์: เราสามารถผูกตัวจัดการเหตุการณ์กับองค์ประกอบได้สองวิธี: การเชื่อมโยงโดยการระบุแอตทริบิวต์เหตุการณ์ขององค์ประกอบ HTML; การเชื่อมโยงโดยการระบุแอตทริบิวต์ของวัตถุ DOM มีอีกวิธีพิเศษที่เรียกว่าการตั้งค่า event Listener ซึ่งเป็นอ็อบเจ็กต์องค์ประกอบ: addEventListener() สองวิธีแรกสามารถผูกตัวจัดการเหตุการณ์ได้ แต่ทั้งสองวิธีมีข้อเสียตรงที่สามารถผูกโปรแกรมได้เพียงโปรแกรมเดียว และไม่สามารถผูกหลายโปรแกรมสำหรับเหตุการณ์เดียวได้ addEventListener() ด้วยวิธีนี้ คุณสามารถผูกฟังก์ชันตอบสนองต่อองค์ประกอบได้ ใช้ addEventListener() เพื่อผูกฟังก์ชันตอบสนองหลายฟังก์ชันกับเหตุการณ์เดียวกันขององค์ประกอบในเวลาเดียวกัน ด้วยวิธีนี้ เมื่อเหตุการณ์ถูกทริกเกอร์ ฟังก์ชันตอบสนองจะถูกดำเนินการตามลำดับการเชื่อมโยงของฟังก์ชัน วิธีนี้ไม่รองรับเบราว์เซอร์ IE8 และต่ำกว่า และคุณต้องใช้แนบ Event แทน แนบEvent() ใน IE8 คุณสามารถใช้แนบEvent() เพื่อผูกเหตุการณ์ได้ วิธีนี้สามารถผูกฟังก์ชันการประมวลผลหลายรายการเข้ากับเหตุการณ์ได้ในเวลาเดียวกัน ข้อแตกต่างคือมันถูกผูกไว้ก่อนและดำเนินการก่อน ลำดับการดำเนินการอยู่ตรงข้ามกับ addEventListener()

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

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

ข้างต้นเป็นการสรุปโดยย่อของรายละเอียดของเหตุการณ์ JavaScript สำหรับข้อมูลเพิ่มเติม โปรดอ่านบทความอื่น ๆ ที่เกี่ยวข้องในเครือข่ายซอร์สโค้ด!