JavaScript - ประเภทของเหตุการณ์ JavaScript: เหตุการณ์ เหตุการณ์สำหรับการทำงานกับอินพุตจาวาสคริปต์

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

การจัดการหน้าต่างเบราว์เซอร์โดยใช้วัตถุหน้าต่าง
การจัดการวัตถุภายในหน้าต่างคือ DOM
รันโค้ด JavaScript ในเหตุการณ์

เหตุการณ์คือปฏิกิริยาของคอมพิวเตอร์ต่อการกระทำของผู้ใช้ ตัวอย่างเช่น ด้วย t.z. เหตุการณ์จาวาสคริปต์ถือเป็นการกดปุ่มแป้นพิมพ์ การเคลื่อนไหวและการคลิกปุ่มเมาส์ และการปิดหน้าต่างเบราว์เซอร์ งานกิจกรรมทั้งหมดกับ t.z. จาวาสคริปต์ถูกสร้างขึ้นโดยวัตถุเอกสารและเบราว์เซอร์ (ไม่มีแนวคิดของ 'ผู้ใช้') ตัวอย่างเช่น เมื่อคุณคลิกที่ย่อหน้า เหตุการณ์การคลิกเมาส์จะถูกสร้างขึ้นโดยวัตถุ - ย่อหน้า

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

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

onclick - คลิกปุ่มเมาส์
ondblclick - ดับเบิลคลิกปุ่มเมาส์
onmousedown - กดปุ่มเมาส์ (เลื่อนลง)
onmousemove - เมาส์เคลื่อนไปเหนือวัตถุ (มีเหตุการณ์มากมายเกิดขึ้น การเคลื่อนไหวของเมาส์ 1px = 1 เหตุการณ์)
onmouseout - เมาส์ออกจากวัตถุ
onmouseover - เลื่อนเมาส์ไปเหนือวัตถุที่ต้องการ
onmouseup - ปุ่มเมาส์ถูกปล่อย (ยกขึ้น)
onkeydown - กดปุ่มคีย์บอร์ด (เลื่อนลง)
onkeypress - การกดปุ่มบนคีย์บอร์ด
onkeyup - ปุ่มคีย์บอร์ดถูกปล่อย (ยกขึ้น)
onblur - การสูญเสียโฟกัสอินพุต (เคอร์เซอร์กะพริบ)
onfocus - ช่วงเวลาที่องค์ประกอบนี้ได้รับอินพุตโฟกัส
onchange – สร้างโดยตัวควบคุมหลังจากสูญเสียโฟกัสหากข้อความมีการเปลี่ยนแปลง (เช่น ในช่องข้อความ) ข้อยกเว้นคือองค์ประกอบรายการ 'เลือก' ซึ่งเหตุการณ์นี้จะถูกสร้างขึ้นทันที ไม่ใช่หลังจากสูญเสียโฟกัสไป
onload - สร้างขึ้นเมื่อเพจโหลดในหน้าต่างเสร็จแล้ว โดยทั่วไปจะใช้เมื่อคุณต้องการรันโค้ด JavaScript หลังจากที่โหลดเพจเสร็จเรียบร้อยแล้ว
onunload – เกิดขึ้นก่อนที่เอกสารจะถูกยกเลิกการโหลดจากหน้าต่าง (นั่นคือเมื่อเราปิดเอกสารนี้หรือย้ายไปยังเอกสารอื่น)
onreset – แบบฟอร์มถูกรีเซ็ตแล้ว
onsubmit – ส่งแบบฟอร์มข้อมูลแล้ว

สมัครสมาชิกกิจกรรม

การสมัครสมาชิกผ่าน JavaScript วิธีนี้ใช้ในกรณีส่วนใหญ่ ขั้นแรก เราต้องค้นหาอ็อบเจ็กต์ขององค์ประกอบที่เราต้องการสมัครสมาชิก เช่น ผ่านเมธอด getElementById (ระบุ id ขององค์ประกอบที่ต้องการ)

function myFunc () ( // สร้างการแจ้งเตือนฟังก์ชันอย่างง่าย ("hello"); ) function pageInit () ( var p= document.getElementById ("1"); p. onclick= myFunc; ) // เรียกฟังก์ชันให้เริ่มทำงาน เหตุการณ์หน้าต่าง onload=pageInit; //เหตุการณ์จะเริ่มทำงานเมื่อโหลดเพจ< p id= 1 >ย่อหน้า 1 // กำหนดรหัสสำหรับย่อหน้า

สมัครสมาชิกผ่าน รหัสเอชทีเอ็ม. ข้อเสียของวิธีนี้คือโค้ด html อุดตันด้วยโค้ด javaScript นอกจากนี้ยังมีข้อจำกัดหลายประการและในกรณีที่ซับซ้อนจะทำให้ไม่สะดวกในการใช้งาน

< script type= "text/javascript" >ฟังก์ชั่น myFunc () ( // สร้างการแจ้งเตือนฟังก์ชั่นอย่างง่าย ("สวัสดี" ); )< p onclick= "myFunc()" >ย่อหน้าที่ 2 //เรียกว่าฟังก์ชัน Event Processing Model

เมื่อมีเหตุการณ์เกิดขึ้นกับองค์ประกอบ เหตุการณ์ที่คล้ายกันควรเกิดขึ้นในองค์ประกอบหลักทั้งหมดจนถึงด้านบนสุดของหน้า (จนถึง 'เนื้อหา' เนื่องจากเป็นพื้นที่หลักของเอกสาร) ดังนั้นเหตุการณ์ใดๆ ที่เกิดขึ้นบนเพจจึงเกิดขึ้นในเนื้อความ

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

องค์ประกอบ --> องค์ประกอบ 2 --> เอกสาร --> หน้าต่าง

พารามิเตอร์เหตุการณ์ (วัตถุเหตุการณ์)

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

คุณสมบัติหลักของวัตถุนี้:

x, y - พิกัดของเมาส์ในขณะที่เหตุการณ์เกิดขึ้น
clientX, clientY - เหมือนกัน
offsetX, offsetY - สิ่งเดียวกัน แต่นี่คือออฟเซ็ตของเมาส์ที่สัมพันธ์กัน องค์ประกอบหลัก.
screenX, screenY - พิกัดหน้าจอ
ปุ่ม - ปุ่มเมาส์ที่ถูกกด (0 - ไม่ได้กด, 1 - กดปุ่มซ้าย, 2 - กดปุ่มขวา, 4 - กดปุ่มกลาง)
keyCode - รหัสตัวเลขของแป้นคีย์บอร์ดที่กด
srcElement - องค์ประกอบที่สร้างเหตุการณ์
fromElement - องค์ประกอบที่เมาส์เคลื่อนที่
toElement - การบ่งชี้วัตถุที่เมาส์วิ่งผ่าน
cancelBubble เป็นวิธีที่ไม่ได้มาตรฐานหากคุณให้ จริงจากนั้น "ลูกโป่งป๊อปอัป" จะถูกยกเลิก หรือคุณสามารถแทนที่รหัสของคีย์ที่ผู้ใช้กดได้

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

หมวดหมู่เหตุการณ์

เหตุการณ์ JavaScript ทั้งหมดสามารถแบ่งออกเป็นหมวดหมู่ต่อไปนี้: เหตุการณ์ของเมาส์, เหตุการณ์ของคีย์บอร์ด, เหตุการณ์เฟรม/ออบเจ็กต์, เหตุการณ์ของแบบฟอร์ม, เหตุการณ์ลาก, เหตุการณ์แอนิเมชั่น, เหตุการณ์ในคลิปบอร์ด, เหตุการณ์สื่อ, เหตุการณ์การเปลี่ยน, เหตุการณ์ที่เซิร์ฟเวอร์ส่ง, เหตุการณ์การสัมผัส, เหตุการณ์การพิมพ์ (งานพิมพ์) งานเบ็ดเตล็ด (Misc Events)

ข้อควรสนใจ: เหตุการณ์ทั้งหมดใน JavaScript เขียนด้วยตัวพิมพ์เล็ก (เล็ก)

เหตุการณ์เมาส์

mousedown - เหตุการณ์เกิดขึ้นเมื่อกดปุ่มเมาส์บนองค์ประกอบบางส่วน แต่ยังไม่ได้เปิดตัว
mouseup - เหตุการณ์เกิดขึ้นเมื่อปุ่มเมาส์เหนือองค์ประกอบบางอย่างได้ผ่านจากสถานะที่กดไปยังสถานะที่ปล่อยออกมา
คลิก - เหตุการณ์เกิดขึ้นเมื่อผู้ใช้คลิกเมาส์บนองค์ประกอบ ลำดับที่เหตุการณ์การคลิกเกิดขึ้น (สำหรับปุ่มเมาส์ซ้ายและปุ่มกลาง) คือ mousedown -> mouseup -> click
เมนูบริบท - เหตุการณ์เกิดขึ้นเมื่อผู้ใช้คลิกขวาที่องค์ประกอบ ลำดับของเหตุการณ์ที่เกี่ยวข้องกับเมนูบริบท (สำหรับปุ่มเมาส์ขวา) คือ mousedown -> mouseup -> contextmenu
dblclick - เหตุการณ์เกิดขึ้นเมื่อผู้ใช้ดับเบิลคลิกที่องค์ประกอบ ลำดับการเกิดเหตุการณ์ที่เกี่ยวข้องกับ dblclick คือ: mousedown -> mouseup -> click -> mousedown -> mouseup -> click -> dblclick
mouseover - เหตุการณ์เกิดขึ้นเมื่อเคอร์เซอร์ของเมาส์เข้าสู่พื้นที่ที่เป็นขององค์ประกอบหรือหนึ่งในลูกของมัน
mouseout - เหตุการณ์เกิดขึ้นเมื่อเคอร์เซอร์ของเมาส์เคลื่อนออกจากพื้นที่ที่เป็นขององค์ประกอบหรือหนึ่งในลูกของมัน
mousemove - เหตุการณ์เกิดขึ้นเมื่อเคอร์เซอร์ของเมาส์เคลื่อนที่ภายในพื้นที่ที่เป็นขององค์ประกอบ
mouseenter - เหตุการณ์เกิดขึ้นเมื่อตัวชี้เมาส์เข้าสู่พื้นที่ที่เป็นขององค์ประกอบ เหตุการณ์นี้มักจะใช้ร่วมกับเหตุการณ์ mouseleave ซึ่งเกิดขึ้นเมื่อตัวชี้เมาส์ออกจากพื้นที่ที่เป็นขององค์ประกอบ เหตุการณ์ mouseenter นั้นคล้ายคลึงกับเหตุการณ์ mouseover และแตกต่างตรงที่เหตุการณ์ mouseenter ไม่มีฟองอากาศ (เราจะได้ทราบแนวคิดของเหตุการณ์ที่เดือดปุด ๆ ในภายหลัง)
mouseleave - เหตุการณ์เกิดขึ้นเมื่อตัวชี้เมาส์ออกจากพื้นที่ที่เป็นขององค์ประกอบ เหตุการณ์ mouseleave นั้นคล้ายคลึงกับเหตุการณ์ mouseout และแตกต่างตรงที่เหตุการณ์ mouseleave ไม่มีฟองอากาศ (เราจะได้ทราบแนวคิดของฟองอากาศของเหตุการณ์ในภายหลังเล็กน้อย)

กิจกรรมเกี่ยวกับคีย์บอร์ด

ลำดับการเกิดเหตุการณ์คือ: keydown -> keypress -> keyup

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

เหตุการณ์วัตถุและเฟรม

beforeunload - เหตุการณ์เกิดขึ้นก่อนที่เอกสารจะถูกยกเลิกการโหลด กิจกรรมนี้ช่วยให้คุณสามารถแสดงข้อความเพิ่มเติมในช่องโต้ตอบการยืนยัน "คุณแน่ใจหรือไม่ว่าต้องการออกจากหน้านี้" ข้อความมาตรฐานที่ปรากฏขึ้นเมื่อปิดเอกสารอาจแตกต่างกันไปขึ้นอยู่กับ เบราว์เซอร์ที่แตกต่างกัน. แต่คุณไม่สามารถเปลี่ยนแปลงหรือลบได้ คุณสามารถใช้วิธีนี้เพื่อเพิ่มข้อความของคุณเองเท่านั้น ซึ่งจะแสดงพร้อมกับข้อความเริ่มต้น
error - เหตุการณ์จะเกิดขึ้นเมื่อมีข้อผิดพลาดเกิดขึ้น ซึ่งเกิดขึ้นเมื่อโหลดไฟล์ภายนอก (เช่น เอกสารหรือรูปภาพ)
hashchange - เหตุการณ์เกิดขึ้นเมื่อส่วนสมอ (เริ่มต้นด้วยสัญลักษณ์ "#") ของ URL ปัจจุบันเปลี่ยนแปลง
load - เหตุการณ์เกิดขึ้นเมื่อการโหลดวัตถุเสร็จสิ้น เหตุการณ์การโหลดมักใช้ในองค์ประกอบเนื้อหาเพื่อรันสคริปต์ทันทีหลังจากที่หน้าเว็บโหลดเต็มแล้ว
unload - เหตุการณ์เกิดขึ้นเมื่อยกเลิกการโหลดเพจ (เช่น เมื่อปิดแท็บเบราว์เซอร์ (หน้าต่าง))
pageshow - เหตุการณ์เกิดขึ้นเมื่อผู้ใช้นำทางไปยังหน้าเว็บเช่น หลังจากที่เพจพร้อมใช้งานสำหรับผู้ใช้แล้ว เหตุการณ์ pageshow จะคล้ายกับเหตุการณ์การโหลด ยกเว้นว่าจะเริ่มทำงานทุกครั้งที่มีการโหลดเพจ แม้ว่าจะถูกโหลดจากแคชก็ตาม เมื่อโหลดเพจครั้งแรก เหตุการณ์ pageshow จะเริ่มทำงานทันทีหลังจากเหตุการณ์โหลด
pagehide - เหตุการณ์เกิดขึ้นเมื่อผู้ใช้ออกจากเพจ (เหตุการณ์ pagehide เกิดขึ้นก่อนเหตุการณ์ยกเลิกการโหลด) นอกจากนี้ กิจกรรมนี้ไม่ป้องกันการแคชหน้า ซึ่งต่างจากเหตุการณ์ยกเลิกการโหลด
ปรับขนาด - เหตุการณ์เกิดขึ้นเมื่อหน้าต่างเบราว์เซอร์ถูกปรับขนาด
scroll - เหตุการณ์เกิดขึ้นเมื่อคุณเลื่อนเนื้อหาขององค์ประกอบที่มีแถบเลื่อน

แบบฟอร์มและเหตุการณ์การควบคุม

โฟกัส - เหตุการณ์เกิดขึ้นเมื่อองค์ประกอบได้รับโฟกัส กิจกรรมนี้ไม่ปรากฏขึ้น
เบลอ - เหตุการณ์เกิดขึ้นเมื่อวัตถุสูญเสียโฟกัส กิจกรรมนี้ไม่ปรากฏขึ้น
focusin - เหตุการณ์เกิดขึ้นเมื่อองค์ประกอบได้รับการโฟกัส เหตุการณ์โฟกัสนั้นคล้ายคลึงกับเหตุการณ์โฟกัส แต่แตกต่างตรงที่มันเป็นฟอง ดังนั้นจึงสามารถใช้เมื่อคุณต้องการค้นหาว่าใครกำลังสูญเสียโฟกัส: องค์ประกอบหรือลูกของมัน?
focusout - เหตุการณ์เกิดขึ้นเมื่อองค์ประกอบกำลังจะสูญเสียโฟกัส เหตุการณ์โฟกัสจะคล้ายกับเหตุการณ์เบลอ แต่จะแตกต่างตรงที่ทำให้เกิดฟอง ดังนั้นจึงสามารถใช้เมื่อคุณต้องการค้นหาว่าใครกำลังสูญเสียโฟกัส: องค์ประกอบหรือลูกของมัน?
change - เหตุการณ์เกิดขึ้นเมื่อค่าขององค์ประกอบเปลี่ยนแปลง แต่หลังจากที่องค์ประกอบสูญเสียโฟกัสไปแล้ว นอกจากเหตุการณ์การเปลี่ยนแปลงแล้ว JavaScript ยังมีเหตุการณ์อินพุตที่คล้ายกัน ซึ่งแตกต่างจากเหตุการณ์การเปลี่ยนแปลงตรงที่จะเกิดขึ้นทันทีหลังจากค่าขององค์ประกอบเปลี่ยนแปลง เหตุการณ์การเปลี่ยนแปลงซึ่งแตกต่างจากเหตุการณ์อินพุตยังทำงานร่วมกับองค์ประกอบ keygen และเลือกได้ สำหรับปุ่มตัวเลือกและช่องทำเครื่องหมาย เหตุการณ์การเปลี่ยนแปลงเกิดขึ้นเมื่อสถานะขององค์ประกอบเหล่านี้เปลี่ยนแปลง
input - เหตุการณ์เกิดขึ้นหลังจากค่าขององค์ประกอบอินพุตหรือองค์ประกอบ textarea เปลี่ยนแปลง
ไม่ถูกต้อง - เหตุการณ์เกิดขึ้นเมื่อองค์ประกอบอินพุตซึ่งข้อมูลจำเป็นต้องถูกส่งพร้อมกับข้อมูลแบบฟอร์มอื่นไปยังเซิร์ฟเวอร์มีข้อมูลที่ไม่ถูกต้อง
รีเซ็ต - เหตุการณ์เกิดขึ้นก่อนที่ฟอร์มจะถูกล้าง ซึ่งเสร็จสิ้นโดยองค์ประกอบอินพุตที่มี type="reset"
ค้นหา - เหตุการณ์เกิดขึ้นหลังจากที่ผู้ใช้กดปุ่ม Enter หรือคลิกปุ่ม " x " (ยกเลิก) บนองค์ประกอบอินพุตด้วย type="search"
เลือก - เหตุการณ์จะเกิดขึ้นหลังจากที่คุณได้เลือกข้อความบางส่วนในองค์ประกอบแล้ว เหตุการณ์ที่เลือกส่วนใหญ่จะใช้สำหรับองค์ประกอบอินพุตที่มี type="text" หรือ textarea
ส่ง - เหตุการณ์เกิดขึ้นก่อนที่จะส่งแบบฟอร์มไปยังเซิร์ฟเวอร์

ลากเหตุการณ์

เหตุการณ์ที่เกี่ยวข้องกับวัตถุที่ถูกลาก (เป้าหมายที่ลากได้ วัตถุต้นทาง):

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

เหตุการณ์ที่เกี่ยวข้องกับเป้าหมายการวางที่ได้รับเป้าหมายที่ลากได้:

Dragenter – เหตุการณ์เกิดขึ้นเมื่อเป้าหมายที่ลากได้เข้ามาในพื้นที่ของเป้าหมายที่สามารถรับเป้าหมายที่ลากได้
ragleave - เหตุการณ์เกิดขึ้นเมื่อวัตถุที่ถูกลาก (เป้าหมายที่ลากได้) ออกจากขอบเขตขององค์ประกอบ (เป้าหมายการวาง) ที่สามารถยอมรับได้
Dragover - เหตุการณ์เกิดขึ้นเมื่อเป้าหมายที่ลากได้เคลื่อนเข้าสู่พื้นที่ขององค์ประกอบ (เป้าหมายการวาง) ที่สามารถยอมรับได้
drop - เหตุการณ์เกิดขึ้นเมื่อผู้ใช้ปล่อยวัตถุที่ลากได้ลงในพื้นที่ขององค์ประกอบ (เป้าหมายการวาง) ที่สามารถยอมรับได้

กิจกรรมแอนิเมชัน

สามเหตุการณ์ที่อาจเกิดขึ้นในขณะที่ภาพเคลื่อนไหว CSS กำลังทำงาน:

Animationstart - เกิดขึ้นเมื่อภาพเคลื่อนไหว CSS เริ่มต้นขึ้น
Animationiteration - เกิดขึ้นเมื่อภาพเคลื่อนไหว CSS ถูกดำเนินการซ้ำ ๆ
ภาพเคลื่อนไหวสิ้นสุด - เกิดขึ้นเมื่อ ภาพเคลื่อนไหว CSSสิ้นสุดแล้ว

เหตุการณ์คลิปบอร์ด

คัดลอก - เหตุการณ์เกิดขึ้นเมื่อผู้ใช้คัดลอกเนื้อหาขององค์ประกอบ เหตุการณ์การคัดลอกยังเกิดขึ้นเมื่อผู้ใช้คัดลอกองค์ประกอบ (เช่น รูปภาพที่สร้างด้วยองค์ประกอบ img) เหตุการณ์การคัดลอกจะใช้เป็นหลักสำหรับองค์ประกอบอินพุตที่มี type="text"
ตัด - เหตุการณ์เกิดขึ้นเมื่อผู้ใช้ตัดเนื้อหาขององค์ประกอบ
paste - เหตุการณ์เกิดขึ้นเมื่อผู้ใช้วางเนื้อหาบางส่วนลงในองค์ประกอบ

พิมพ์กิจกรรม

afterprint - เหตุการณ์เกิดขึ้นเมื่อเพจเริ่มพิมพ์ (นั่นคือหลังจากคลิกปุ่มพิมพ์ในกล่องโต้ตอบ) หรือหากกล่องโต้ตอบการพิมพ์ปิดอยู่
beforeprint - เหตุการณ์เกิดขึ้นก่อนที่หน้าจะถูกพิมพ์ เช่น ก่อนที่จะเปิดกล่องโต้ตอบการพิมพ์

เหตุการณ์การเปลี่ยนแปลง

transitionend - เหตุการณ์เกิดขึ้นเมื่อการเปลี่ยนแปลง CSS เสร็จสมบูรณ์ หมายเหตุ: หากการเปลี่ยนแปลงถูกลบออกก่อนที่จะเสร็จสิ้น (เช่น ถ้า คุณสมบัติซีเอสเอส transition-property ถูกลบออกแล้ว) เหตุการณ์การเปลี่ยนผ่านจะไม่เริ่มทำงาน

เหตุการณ์ที่ส่งโดยเซิร์ฟเวอร์

error - เหตุการณ์เกิดขึ้นเมื่อมีข้อผิดพลาดเกิดขึ้นกับแหล่งเหตุการณ์ ข้อผิดพลาดมักเกิดขึ้นเมื่อการสื่อสารขาดหาย หากสิ่งนี้เกิดขึ้น วัตถุ EventSource จะพยายามเชื่อมต่อกับเซิร์ฟเวอร์โดยอัตโนมัติ
open - เหตุการณ์เกิดขึ้นเมื่อการเชื่อมต่อกับแหล่งเหตุการณ์เปิดอยู่
ข้อความ - เหตุการณ์เกิดขึ้นเมื่อได้รับข้อความผ่านแหล่งเหตุการณ์
วัตถุเหตุการณ์ข้อความรองรับคุณสมบัติต่อไปนี้:
- ข้อมูล - มีข้อความ
- origin - URL ของเอกสารที่ทำให้เกิดเหตุการณ์
- LastEventId - ตัวระบุ (id) ของข้อความที่ได้รับครั้งล่าสุด

กิจกรรมสื่อ

ในระหว่างกระบวนการโหลดเสียง/วิดีโอ เหตุการณ์จะเกิดขึ้นตามลำดับต่อไปนี้: loadstart -> Durationchange -> Loadmetadata -> Loaddata ->ความคืบหน้า -> canplay -> canplaythrough

ยกเลิก - เหตุการณ์เกิดขึ้นเมื่อการโหลดเสียง/วิดีโอถูกขัดจังหวะ เหตุการณ์นี้เกิดขึ้นเมื่อการดาวน์โหลดข้อมูลสื่อถูกขัดจังหวะ (ยกเลิก) และไม่ใช่เพราะเกิดข้อผิดพลาด
error - เหตุการณ์เกิดขึ้นเมื่อเกิดข้อผิดพลาดขณะโหลดเสียง/วิดีโอ
จนตรอก - เหตุการณ์เกิดขึ้นเมื่อเบราว์เซอร์พยายามรับข้อมูลสื่อ แต่ไม่มีข้อมูล
- เหตุการณ์เกิดขึ้นเมื่อเบราว์เซอร์เริ่มค้นหาเสียง/วิดีโอที่ระบุ เช่น เมื่อกระบวนการดาวน์โหลดเริ่มต้นขึ้น
Durationchange - เหตุการณ์เกิดขึ้นเมื่อระยะเวลาของเสียง/วิดีโอเปลี่ยนแปลง หากโหลดเสียง/วิดีโอ ระยะเวลาจะแตกต่างจาก "NaN" จนถึงระยะเวลาจริงของเสียง/วิดีโอ
Loadmetadata - เหตุการณ์เกิดขึ้นเมื่อโหลดข้อมูลเมตาสำหรับเสียง/วิดีโอที่ระบุแล้ว ข้อมูลเมตาของเสียง/วิดีโอประกอบด้วย: ระยะเวลา ขนาด (วิดีโอเท่านั้น) และแทร็กข้อความ
Loaddata - เหตุการณ์เกิดขึ้นหลังจากโหลดเฟรมแรกของสื่อแล้ว
ความคืบหน้า - เหตุการณ์เกิดขึ้นเมื่อเบราว์เซอร์ดาวน์โหลดเสียง/วิดีโอที่ระบุ
canplay - เหตุการณ์เกิดขึ้นเมื่อเบราว์เซอร์สามารถเริ่มเล่นเสียง/วิดีโอที่ระบุ (นั่นคือ เมื่อกระแสข้อมูลเสียง/วิดีโอถูกบัฟเฟอร์เพียงพอสำหรับเบราว์เซอร์ที่จะเริ่มเล่น)
canplaythrough - เหตุการณ์เกิดขึ้นในเวลาที่เบราว์เซอร์สามารถเล่นสื่อที่ระบุโดยไม่หยุดการบัฟเฟอร์
สิ้นสุดแล้ว - เหตุการณ์เกิดขึ้นเมื่อการเล่นเสียง/วิดีโอเสร็จสิ้น (ถึงจุดสิ้นสุดแล้ว) กิจกรรมนี้สามารถใช้เพื่อแสดงข้อความเช่น “ขอขอบคุณสำหรับความสนใจของคุณ”, “ขอขอบคุณสำหรับการรับชม” ฯลฯ
หยุดชั่วคราว - เหตุการณ์เกิดขึ้นเมื่อผู้ใช้หยุดการเล่นเสียง/วิดีโอชั่วคราวหรือโดยโค้ด (โดยทางโปรแกรม)
play - เหตุการณ์เกิดขึ้นเมื่อเริ่มเล่นเสียง/วิดีโอ นอกจากนี้ยังเกิดขึ้นเมื่อเสียง/วิดีโอไม่ได้หยุดชั่วคราวและเริ่มเล่นอีกด้วย
กำลังเล่น - เหตุการณ์เกิดขึ้นเมื่อเสียง/วิดีโอกำลังเล่นหลังจากที่หยุดชั่วคราวหรือหยุดสำหรับการบัฟเฟอร์
อัตราการเปลี่ยนแปลง - เหตุการณ์เกิดขึ้นเมื่อความเร็วในการเล่นเสียง/วิดีโอเปลี่ยนแปลง
ที่กำลังค้นหา - เหตุการณ์เกิดขึ้นเมื่อผู้ใช้เริ่มเลื่อนแถบเลื่อน (การเปลี่ยนผ่าน) ไปยังตำแหน่งเวลาใหม่ของเสียง/วิดีโอที่กำลังเล่น
ที่ต้องการ - เหตุการณ์เกิดขึ้นเมื่อผู้ใช้เลื่อนแถบเลื่อน (การเปลี่ยนภาพ) ไปยังตำแหน่งชั่วคราวใหม่ของเสียง/วิดีโอที่กำลังเล่นอยู่ เหตุการณ์ที่ต้องการจะตรงกันข้ามกับเหตุการณ์ที่กำลังค้นหา หากต้องการรับตำแหน่งการเล่นปัจจุบัน ให้ใช้คุณสมบัติ currentTime ของออบเจ็กต์ Audio / Video
timeupdate - เหตุการณ์เกิดขึ้นเมื่อตำแหน่งเวลาของเสียง/วิดีโอที่กำลังเล่นเปลี่ยนแปลง
เหตุการณ์นี้เกิดขึ้น:
- เมื่อเล่นสตรีมเสียง/วิดีโอ
- เมื่อเลื่อนแถบเลื่อนไปยังตำแหน่งเวลาใหม่ของเสียง/วิดีโอที่กำลังเล่น
เหตุการณ์ timeupdate มักจะใช้ร่วมกับคุณสมบัติ currentTime ของออบเจ็กต์ Audio/Video ซึ่งจะส่งคืนตำแหน่งเวลาปัจจุบันของเสียง/วิดีโอที่กำลังเล่นอยู่ในหน่วยวินาที
การเปลี่ยนแปลงระดับเสียง – เหตุการณ์จะเกิดขึ้นทุกครั้งที่ระดับเสียงของสตรีมวิดีโอ/เสียงที่กำลังเล่นเปลี่ยนแปลง
เหตุการณ์นี้เกิดขึ้นเมื่อ:
- เพิ่มหรือลดระดับเสียง
- การปิดเสียงหรือเปิดเสียง
กำลังรอ - เหตุการณ์เกิดขึ้นเมื่อวิดีโอหยุดลงเนื่องจากการบัฟเฟอร์

กิจกรรมต่างๆ

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

งาน

เหตุการณ์ "การกดปุ่มบนแป้นพิมพ์ (onkeypress)" ซับซ้อนหรือไม่ และถ้าเป็นเช่นนั้นมันจะเกิดจากเหตุการณ์ง่าย ๆ อะไรเกิดขึ้น?

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

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

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

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

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

OnEventName

นั่นคือคำนำหน้า "on" มาก่อน จากนั้นตามด้วยชื่อของเหตุการณ์ ตัวอย่างเช่น ตัวจัดการเหตุการณ์ต่อไปนี้: onFocus, onClick, onSubmit และอื่นๆ ฉันคิดว่าไม่มีคำถามที่นี่ และตอนนี้คำถามหลัก: “จะใช้เหตุการณ์ใน JavaScript ได้อย่างไร?” ขอบเขตการใช้งานมีขนาดใหญ่มาก และตอนนี้เราจะพิจารณาปัญหาหนึ่ง มีสามลิงค์ในหน้า แต่ละลิงก์มีหน้าที่กำหนดสีพื้นหลังที่แตกต่างกัน (เช่น สีขาว สีเหลือง และสีเขียว) ในตอนแรกพื้นหลังจะเป็นสีขาว เมื่อคุณวางเมาส์เหนือลิงก์ใดลิงก์หนึ่ง สีพื้นหลังจะเปลี่ยนไป เมื่อคุณเลื่อนเมาส์ออกไป สีพื้นหลังจะกลับไปเป็นสีเริ่มต้น เมื่อคุณคลิกลิงก์ สีพื้นหลังจะคงไว้ตามค่าเริ่มต้น

(
สี:สีฟ้า;
การตกแต่งข้อความ: ขีดเส้นใต้;
เคอร์เซอร์: ตัวชี้;
}

var default_color = "สีขาว";

ฟังก์ชั่น setTempColor(สี) (
document.bgColor = สี;
}

ฟังก์ชั่น setDefaultColor(สี) (
default_color = สี;
}

ฟังก์ชั่น defaultColor() (
document.bgColor = default_color;
}

สีขาว
สีเหลือง
สีเขียว

มาดูสคริปต์นี้หรือหน้า HTML ทั้งหมดที่รองรับ JavaScript และ CSS (หรืออีกนัยหนึ่ง นี่คือตัวอย่างของ DHTML) ขั้นแรกให้ใช้แท็ก HTML ปกติ ซึ่งหน้า HTML ใดๆ จะเริ่มต้น ต่อไป เราจะสร้างสไตล์ที่เรากำหนดให้ลิงก์ทั้งหมดบนหน้าเว็บเป็นสีน้ำเงิน ขีดเส้นใต้ และตัวชี้เมาส์บนลิงก์เหล่านั้นจะอยู่ในรูปแบบของ "ตัวชี้" คุณอาจพูดว่า: “ทำไมคุณต้องกำหนดสไตล์ เพราะลิงก์จะเหมือนกันทุกประการ” ถูกต้องแล้ว ลิงก์ต่างๆ แต่เราไม่มีลิงก์เช่นนี้ (เพราะไม่มีแอตทริบิวต์ href ในแท็ก) ดังนั้น ลิงก์เหล่านั้นจะเป็นข้อความสีดำธรรมดาตามค่าเริ่มต้น (อย่างไรก็ตาม คุณสามารถคลิกที่ข้อความได้เช่นกัน) ดังนั้นสไตล์จึงเป็นสิ่งจำเป็น คุณสามารถลบออกและดูว่าเกิดอะไรขึ้น ยังดีกว่า ให้เพิ่มแอตทริบิวต์ href (โดยมีค่าใดก็ได้ แม้จะเว้นว่างไว้ก็ตาม) และอธิบายสาเหตุที่สคริปต์หยุดทำงาน จากนั้น JavaScript จะเริ่มต้นขึ้น เราสร้างตัวแปร default_color รับผิดชอบสีเริ่มต้น ถัดไปมาสามฟังก์ชัน:

ฟังก์ชัน setTempColor() มีหน้าที่ในการเปลี่ยนสีชั่วคราว

ฟังก์ชัน setDefaultColor() มีหน้าที่รับผิดชอบในการเปลี่ยนสีเริ่มต้น

ฟังก์ชัน defaultColor() กำหนดสีพื้นหลังเริ่มต้น

จากนั้นจะมีการเชื่อมโยงกับคุณลักษณะในรูปแบบของตัวจัดการเหตุการณ์ เมื่อคุณวางเมาส์เหนือลิงก์ เหตุการณ์ MouseOver จะเกิดขึ้น ดังนั้น ตัวจัดการเหตุการณ์ onMouseOver จะเรียกใช้ฟังก์ชัน setTempColor() และส่งผ่านพารามิเตอร์ที่เกี่ยวข้อง เมื่อคุณลบเมาส์ออกจากองค์ประกอบ เหตุการณ์ MouseOut จะถูกยกขึ้น จากนั้นจึงเรียกใช้ฟังก์ชัน defaultColor() ซึ่งกำหนดสีพื้นหลังให้เป็นสีเริ่มต้น และสุดท้าย เมื่อคลิกเมาส์บนลิงก์ (ตัวจัดการ onClick) ฟังก์ชัน setDefaultColor() จะถูกเรียก ซึ่งตั้งค่าสีที่ระบุในพารามิเตอร์ให้เป็นสีพื้นหลังเริ่มต้น อย่างที่คุณเห็นทุกอย่างค่อนข้างง่าย

นี่คือหลักการของการใช้เหตุการณ์ใน JavaScript จากนั้นทุกอย่างขึ้นอยู่กับจินตนาการของคุณเท่านั้น!

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

ตัวจัดการเหตุการณ์

คุณสามารถตอบสนองต่อการกดปุ่มได้โดยการอ่านสถานะอย่างต่อเนื่องเพื่อจับจังหวะที่กดปุ่มก่อนที่จะปล่อยอีกครั้ง

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

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

โปรแกรมเมอร์ส่วนใหญ่พยายามหลีกเลี่ยงหากเป็นไปได้

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

คลิกที่เอกสารนี้เพื่อเปิดใช้งานตัวจัดการ

addEventListener("คลิก", function() ( console.log("คุณคลิก!"); ));

ฟังก์ชัน addEventListener ได้รับการลงทะเบียนเพื่อให้มีการเรียกอาร์กิวเมนต์ที่สองเมื่อใดก็ตามที่เกิดเหตุการณ์ที่อธิบายโดยอาร์กิวเมนต์แรก

เหตุการณ์และโหนด DOM

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

คลิกที่ฉัน

ไม่มีตัวจัดการที่นี่

ปุ่ม var = document.querySelector("ปุ่ม"); button.addEventListener("คลิก", function() ( console.log("คลิกปุ่มแล้ว"); ));

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

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

เมธอด RemoveEventListener ถูกเรียกด้วยอาร์กิวเมนต์ที่คล้ายกับ addEventListener มันจะลบตัวจัดการ:

ปุ่มครั้งเดียว ปุ่ม var = document.querySelector("button"); ฟังก์ชัน ครั้งเดียว() ( console.log("Done."); button.removeEventListener("คลิก" หนึ่งครั้ง); ) button.addEventListener("คลิก" หนึ่งครั้ง);

หากต้องการยกเลิกฟังก์ชันตัวจัดการ เราจะตั้งชื่อให้กับมัน (เช่น หนึ่งครั้ง ) ดังนั้นเราจึงส่งต่อไปยังทั้ง addEventListener และ RemoveEventListener

วัตถุเหตุการณ์

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

คลิกที่ฉันด้วยปุ่มเมาส์ var button = document.querySelector("button"); button.addEventListener("mousedown", function(event) ( if (event.ซึ่ง == 1) console.log("ปุ่มซ้าย"); else if (event.ซึ่ง == 2) console.log("ปุ่มกลาง" ); else if (event.ซึ่ง == 3) console.log("ปุ่มขวา"); ));

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

การแพร่กระจาย

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

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

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

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

ย่อหน้าและปุ่มในนั้น

var para = document.querySelector("p"); ปุ่ม var = document.querySelector("ปุ่ม"); para.addEventListener("mousedown", function() ( console.log("ตัวจัดการสำหรับย่อหน้า"); )); button.addEventListener("mousedown", function(event) ( console.log("Handler for button."); if (event.ซึ่ง == 3) event.stopPropagation(); ));

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

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

A B C document.body.addEventListener("คลิก", function(event) ( if (event.target.nodeName == "BUTTON") console.log("คลิก", event.target.textContent); ));

การดำเนินการเริ่มต้น

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

สำหรับประเภทเหตุการณ์ส่วนใหญ่ ตัวจัดการเหตุการณ์ JavaScript จะถูกเรียกก่อนที่จะดำเนินการเริ่มต้น ถ้าคุณไม่ต้องการให้ลักษณะการทำงานเริ่มต้นเกิดขึ้น คุณต้องเรียกวิธีการป้องกันค่าเริ่มต้นบนวัตถุเหตุการณ์

ใช้เพื่อใช้แป้นพิมพ์ลัดแบบกำหนดเองหรือเมนูบริบท หรือเพื่อแทนที่พฤติกรรมที่ผู้ใช้คาดหวัง ด้านล่างนี้เป็นลิงค์ที่ไม่สามารถติดตามได้:

MDN var link = document.querySelector("a"); link.addEventListener("คลิก", ฟังก์ชั่น(เหตุการณ์) ( console.log("ไม่"); event.preventDefault(); ));

พยายามอย่าทำเช่นนี้เว้นแต่คุณจะมีเหตุผลที่ดีในการทำเช่นนั้น

เหตุการณ์บางอย่างอาจไม่ถูกดัก ทั้งนี้ขึ้นอยู่กับเบราว์เซอร์ ใน Google Chromeตัวอย่างเช่น แป้นพิมพ์ลัด (รหัสเหตุการณ์ JavaScript) เพื่อปิดแท็บปัจจุบัน (Ctrl-W หรือ Command-W) ไม่สามารถประมวลผลโดยใช้ JavaScript ได้

เหตุการณ์สำคัญ

เมื่อผู้ใช้กดปุ่มบนแป้นพิมพ์ เบราว์เซอร์จะเริ่มเหตุการณ์ "keydown" เมื่อเขาปล่อยกุญแจ เหตุการณ์ "keyup" จะเริ่มทำงาน:

หน้านี้จะเปลี่ยนเป็นสีม่วงเมื่อคุณกดปุ่ม V

addEventListener("keydown", function(event) ( ถ้า (event.keyCode == 86) document.body.style.พื้นหลัง = "violet"; )); addEventListener("keyup", function(event) ( ถ้า (event.keyCode == 86) document.body.style.พื้นหลัง = ""; ));

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

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

รหัสอักขระ Unicode ใช้เพื่ออ่านค่าคีย์ตัวอักษรและตัวเลข เชื่อมโยงกับตัวอักษร (ตัวพิมพ์ใหญ่) หรือตัวเลขที่ระบุบนกุญแจ เมธอด charCodeAt สำหรับสตริงช่วยให้คุณได้รับค่านี้:

console.log("สีม่วง".charCodeAt(0)); // → 86 console.log("1".charCodeAt(0)); // → 49

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

ปุ่มต่างๆ เช่น Shift , Ctrl , Alt จะสร้างเหตุการณ์เหมือนปุ่มปกติ แต่เมื่อติดตามการผสมคีย์ คุณยังสามารถระบุได้ว่าคีย์เหล่านั้นถูกกดโดยคุณสมบัติของเหตุการณ์แป้นพิมพ์และเหตุการณ์เมาส์ JavaScript: shiftKey , ctrlKey , altKey และ metaKey :

หากต้องการดำเนินการต่อ ให้กด Ctrl-Space

addEventListener("keydown", function(event) ( if (event.keyCode == 32 && event.ctrlKey) console.log("Continuing!"); ));

เหตุการณ์ "keydown" และ "keyup" ให้ข้อมูลเกี่ยวกับการกดปุ่มจริง แต่ถ้าเราต้องการข้อความที่ป้อนเองล่ะ? การดึงข้อความจากรหัสคีย์ไม่สะดวก มีเหตุการณ์สำหรับสิ่งนี้ "การกดปุ่ม" ซึ่งจะเริ่มทำงานทันทีหลังจาก "การกดปุ่ม" โดยจะเล่นซ้ำพร้อมกับ "กดปุ่มลง" ตราบใดที่กดปุ่ม แต่สำหรับคีย์ที่ป้อนอักขระเท่านั้น

คุณสมบัติ charCode บนวัตถุเหตุการณ์ประกอบด้วยรหัสที่สามารถตีความได้ว่าเป็นรหัสอักขระ Unicode เราสามารถใช้ฟังก์ชัน String.fromCharCode เพื่อแปลงโค้ดนี้เป็นสตริงอักขระตัวเดียว

ตั้งค่าโฟกัสอินพุตไปที่หน้านี้แล้วพิมพ์บางอย่าง

addEventListener("ปุ่มกด", ฟังก์ชั่น(เหตุการณ์) ( console.log(String.fromCharCode(event.charCode)); ));

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

หากไม่มีองค์ประกอบเฉพาะที่มีโฟกัสอินพุต โหนดเป้าหมายสำหรับเหตุการณ์สำคัญและเหตุการณ์การสัมผัสของ JavaScript จะเป็น document.body

คลิกเมาส์

การกดปุ่มเมาส์จะทำให้เกิดเหตุการณ์ต่างๆ ขึ้น เหตุการณ์ "mousedown" และ "mouseup" มีความคล้ายคลึงกับเหตุการณ์ "keydown" และ "keyup" พวกมันจะถูกทริกเกอร์เมื่อมีการกดและปล่อยปุ่มเมาส์ เหตุการณ์เหล่านี้เกิดขึ้นบนโหนด DOM ที่ถูกโฮเวอร์ไว้เมื่อเหตุการณ์เกิดขึ้น

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

หากการคลิกสองครั้งเกิดขึ้นใกล้กัน เหตุการณ์ "dblclick" (ดับเบิลคลิก) ก็เริ่มทำงานเช่นกัน ปรากฏขึ้นหลังจากการคลิกครั้งที่สอง หากต้องการรับข้อมูลที่แน่นอนเกี่ยวกับตำแหน่งที่เกิดเหตุการณ์เมาส์ คุณต้องรับค่าของคุณสมบัติ pageX และ pageY ซึ่งมีพิกัดของเหตุการณ์ (เป็นพิกเซล) ที่สัมพันธ์กับมุมซ้ายบนของเอกสาร

ด้านล่างนี้คือการใช้งานโปรแกรมวาดภาพแบบดั้งเดิม แต่ละครั้งที่คุณคลิกเมาส์ในเอกสาร (ใต้เคอร์เซอร์) จุดจะถูกเพิ่ม:

ร่างกาย ( ความสูง: 200px; พื้นหลัง: สีเบจ; ) .dot ( ความสูง: 8px; ความกว้าง: 8px; รัศมีเส้นขอบ: 4px; /* มุมโค้งมน */ พื้นหลัง: สีน้ำเงิน; ตำแหน่ง: สัมบูรณ์; ) addEventListener("คลิก", ฟังก์ชั่น (เหตุการณ์) ( var dot = document.createElement("div"); dot.className = "dot"; dot.style.left = (event.pageX - 4) + "px"; dot.style.top = (เหตุการณ์ .pageY - 4) + "px"; document.body.appendChild(dot); ));

คุณสมบัติ clientX และ clientY คล้ายกับ pageX และ pageY แต่เกี่ยวข้องกับส่วนที่มองเห็นได้ของเอกสาร สามารถใช้เพื่อเปรียบเทียบพิกัดของเมาส์กับพิกัดที่ส่งคืนโดยฟังก์ชัน getBoundingClientRect

การเคลื่อนไหวของเมาส์

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

ในตัวอย่างต่อไปนี้ โปรแกรมจะแสดงพาเนลและตั้งค่าตัวจัดการเหตุการณ์ ดังนั้นเมื่อลาก พาเนลจะแคบลงหรือกว้างขึ้น:

ลากขอบของแผงเพื่อเปลี่ยนความกว้าง:

var LastX; // ติดตามตำแหน่ง X สุดท้ายของเมาส์ var rect = document.querySelector("div"); rect.addEventListener("mousedown", function(event) ( if (event.ซึ่ง == 1) ( LastX = event.pageX; addEventListener("mousemove", ย้ายแล้ว); event.preventDefault(); // ป้องกันการเลือก ) ) ); function buttonPressed(event) ( if (event.buttons == null) return event. which != 0; else return event.buttons != 0; ) ฟังก์ชั่นย้าย(event) ( if (!buttonPressed(event)) ( RemoveEventListener( "mousemove" ย้ายแล้ว); ) else ( var dist = event.pageX - LastX; var newWidth = Math.max(10, rect.offsetWidth + dist); rect.style.width = newWidth + "px"; LastX = เหตุการณ์ .pageX; ) )

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

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

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

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

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

เมื่อต้องการหลีกเลี่ยงปัญหานี้ คุณสามารถใช้คุณสมบัติวัตถุเหตุการณ์ relatedTarget เมื่อเหตุการณ์ "mouseover" เกิดขึ้น จะเป็นการระบุว่าองค์ประกอบใดถูกวางเมาส์ไว้ก่อนหน้านี้ และในกรณีของ "เมาส์ออก" - องค์ประกอบใดที่ตัวชี้ถูกย้าย เราจะเปลี่ยนเอฟเฟกต์การวางเมาส์เมื่อเป้าหมายที่เกี่ยวข้องอยู่นอกโหนดเป้าหมายของเราเท่านั้น

ในกรณีนี้ เรากำลังเปลี่ยนพฤติกรรมเนื่องจากเมาส์วางอยู่เหนือโหนดจากภายนอก (หรือกลับกัน):

วางเมาส์เหนือย่อหน้านี้

var para = document.querySelector("p"); ฟังก์ชั่น isInside(node, target) ( for (; node != null; node = node.parentNode) if (node == target) return true; ) para.addEventListener("mouseover", function(event) ( if ( !isInside (event. relatedTarget, para)) para.style.color = "red"; )); para.addEventListener("mouseout", function(event) ( if (!isInside(event. relatedTarget, para)) para.style.color = ""; ));

ฟังก์ชัน isInside ติดตามลิงก์พาเรนต์ของโหนดที่กำหนดหรือจนกว่าจะถึง ส่วนบนเอกสาร (เมื่อโหนดเป็นโมฆะ) หรือไม่พบองค์ประกอบหลักที่เราต้องการ

เอฟเฟกต์โฮเวอร์นั้นสร้างได้ง่ายกว่ามากโดยใช้ CSS:hover pseudo-selector ดังที่แสดงในตัวอย่างต่อไปนี้ แต่เมื่อเอฟเฟกต์โฮเวอร์เกี่ยวข้องกับสิ่งที่ซับซ้อนมากกว่าการเปลี่ยนสไตล์ของโหนดเป้าหมาย คุณจะต้องใช้เคล็ดลับโดยใช้เหตุการณ์ mouseover และ mouseout (เหตุการณ์เมาส์ JavaScript):

เลื่อนเหตุการณ์

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

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

.progress ( เส้นขอบ: 1px สีน้ำเงินทึบ; ความกว้าง: 100px; ตำแหน่ง: คงที่; ด้านบน: 10px; ขวา: 10px; ) .progress > div ( ความสูง: 12px; พื้นหลัง: สีน้ำเงิน; ความกว้าง: 0%; ) ร่างกาย ( ความสูง: 2000px ; )

เลื่อนฉัน...

var bar = document.querySelector(".progress div"); addEventListener("scroll", function() ( var max = document.body.scrollHeight - innerHeight; var เปอร์เซ็นต์ = (pageYOffset / สูงสุด) * 100; bar.style.width = เปอร์เซ็นต์ + "%"; ));

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

เราใช้ % แทนที่จะเป็น px เป็นหน่วยการวัดเมื่อตั้งค่าความกว้าง เพื่อให้ขนาดขององค์ประกอบเปลี่ยนตามสัดส่วนขนาดของแถบความคืบหน้า

ตัวแปรส่วนกลาง innerHeight มีความสูงของหน้าต่าง ซึ่งเราต้องลบออกจากความสูงที่สามารถเลื่อนได้ทั้งหมดของเอกสาร คุณไม่สามารถเลื่อนหน้าต่างลงได้เมื่อไปถึงด้านล่างสุดของเอกสาร ด้วย innerHeight innerWidth ก็สามารถใช้ได้เช่นกัน การแบ่งหน้า YOffset (ตำแหน่งกล่องเลื่อนปัจจุบัน) ด้วยตำแหน่งเลื่อนสูงสุดที่อนุญาตแล้วคูณด้วย 100 จะให้เปอร์เซ็นต์สำหรับแถบความคืบหน้า

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

เหตุการณ์โฟกัสอินพุต

เมื่อองค์ประกอบมีอินพุตโฟกัส เบราว์เซอร์จะยิงเหตุการณ์ "โฟกัส" ลงไป เมื่อเอาโฟกัสอินพุตออก เหตุการณ์ "เบลอ" จะเริ่มทำงาน

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

ตัวอย่างต่อไปนี้จะแสดงคำแนะนำเครื่องมือสำหรับ ช่องข้อความซึ่งปัจจุบันมีอินพุตโฟกัส:

ชื่อ:

อายุ:

วัตถุหน้าต่างได้รับเหตุการณ์ "โฟกัส" และ "เบลอ" เมื่อผู้ใช้นำทางหรือออกจากแท็บ หน้าต่างเบราว์เซอร์ที่แสดงเอกสาร

โหลดเหตุการณ์

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

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

เมื่อเราปิดเพจหรือย้ายไปยังเพจอื่น (เช่น โดยการคลิกลิงก์) เหตุการณ์ "ก่อนยกเลิกการโหลด" จะเริ่มทำงาน ใช้เพื่อป้องกันไม่ให้ผู้ใช้สูญเสียสิ่งที่กำลังทำอยู่โดยไม่ตั้งใจหลังจากปิดเอกสาร

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

ลำดับการดำเนินการสคริปต์

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

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

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

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

สมมติว่าในไฟล์ชื่อ code/squareworker.js เรามีโค้ดต่อไปนี้:

addEventListener("ข้อความ", ฟังก์ชั่น(เหตุการณ์) ( postMessage(event.data * event.data); ));

ลองจินตนาการว่าตัวเลขที่คุณกำลังยกกำลังสองนั้นมีขนาดใหญ่มากและมีความยาวในการคำนวณ และคุณต้องคำนวณบนเธรดพื้นหลัง รหัสนี้เริ่มต้นการทำงานของเว็บ ส่งข้อความและพิมพ์คำตอบ:

var squareWorker = ผู้ปฏิบัติงานใหม่ ("code/squareworker.js"); squareWorker.addEventListener("ข้อความ", function(event) ( console.log("ผู้ปฏิบัติงานตอบกลับ:", event.data); )); squareWorker.postMessage (10); squareWorker.postMessage (24);

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

กำลังตั้งเวลา

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

document.body.style.พื้นหลัง = "สีน้ำเงิน"; setTimeout(function() ( document.body.style.พื้นหลัง = "สีเหลือง"; ), 2000);

บางครั้งเราจำเป็นต้องยกเลิกฟังก์ชั่นที่เราวางแผนไว้ ซึ่งทำได้โดยการจัดเก็บค่าที่ส่งคืนของ setTimeout และเรียก clearTimeout ไว้:

var BombTimer = setTimeout(function() ( console.log("BOOM!"); ), 500); ถ้า (Math.random()< 0.5) { // 50% chance console.log("Defused."); clearTimeout(bombTimer); }

ฟังก์ชัน cancelAnimationFrame ทำงานเหมือนกับ clearTimeout มันถูกเรียกโดยค่าที่ส่งคืนโดย requestAnimationFrame เพื่อยกเลิกเฟรม (หากยังไม่ได้ถูกเรียก)

ชุดฟังก์ชันที่คล้ายกัน setInterval และ clearInterval ใช้เพื่อตั้งเวลาที่ควรทำซ้ำการกระทำทุกๆ X มิลลิวินาที:

เครื่องหมาย var = 0; var clock = setInterval(function() ( console.log("tick", ติ๊ก++); if (ติ๊ก == 10) ( clearInterval(clock); console.log("stop."); ) ), 200);

กำลังแตกแยก

เหตุการณ์บางประเภทสามารถเริ่มทำงานได้หลายครั้งภายในระยะเวลาอันสั้น (เช่น "mousemove" และเหตุการณ์เลื่อน javascript) เมื่อจัดการกับเหตุการณ์ดังกล่าว คุณต้องระวังว่าจะใช้เวลาไม่นานเกินไป มิฉะนั้นตัวจัดการจะใช้เวลานานมากในการดำเนินการซึ่งการโต้ตอบกับเอกสารจะช้าและขาด ๆ หาย ๆ

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

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

พิมพ์บางอย่างที่นี่... var textarea = document.querySelector("textarea"); หมดเวลา var; textarea.addEventListener("keydown", function() ( clearTimeout(หมดเวลา); timeout = setTimeout(function() ( console.log("คุณหยุดพิมพ์"); ), 500); ));

การส่งผ่านค่าที่ไม่ได้กำหนดไว้สำหรับ clearTimeout หรือการเรียกล่าช้าที่กำลังทำงานอยู่จะไม่มีผลใดๆ เราไม่จำเป็นต้องระวังอีกต่อไปว่าจะโทรไปเมื่อใด เราแค่ทำกับทุกงานเท่านั้น

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

ฟังก์ชัน displayCoords(event) ( document.body.textContent = "mouse is at " + event.pageX + ", " + event.pageY; ) var schedule = false, LastEvent; addEventListener("mousemove", function(event) ( LastEvent = event; if (!scheduled) ( schedule = true; setTimeout(function() ( schedule = false; displayCoords(lastEvent); ), 250); ) ));

บทสรุป

ตัวจัดการเหตุการณ์ช่วยให้เราตรวจจับและตอบสนองต่อเหตุการณ์ที่เราไม่สามารถควบคุมได้โดยตรง หากต้องการลงทะเบียนตัวจัดการดังกล่าว ให้ใช้เมธอด addEventListener

แต่ละเหตุการณ์จะมีประเภทเฉพาะ (“การกดปุ่มลง”, “โฟกัส” ฯลฯ) ที่ระบุเหตุการณ์นั้น เหตุการณ์ส่วนใหญ่เกิดขึ้นบนองค์ประกอบ DOM ที่เฉพาะเจาะจง จากนั้นจึงเผยแพร่ไปยังโหนดหลักขององค์ประกอบ ซึ่งช่วยให้ตัวจัดการที่เกี่ยวข้องกับองค์ประกอบเหล่านี้สามารถประมวลผลได้

เมื่อตัวจัดการถูกเรียก มันจะถูกส่งผ่านวัตถุเหตุการณ์ด้วย ข้อมูลเพิ่มเติมเกี่ยวกับการกระทำ วัตถุนี้ยังมีวิธีหยุดการแพร่กระจายของเหตุการณ์เพิ่มเติม (stopPropagation) หรือเพื่อป้องกันไม่ให้เบราว์เซอร์เริ่มต้นประมวลผลเหตุการณ์ (preventDefault)

การกดปุ่มจะสร้างเหตุการณ์ "keydown", "keypress" และ "keyup" การคลิกเมาส์จะสร้างเหตุการณ์ "mousedown", "mouseup" และ "click" การเลื่อนเมาส์ - "mousemove", "mouseenter" และ "mouseout"

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

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

เอกสารเผยแพร่นี้เป็นการแปลบทความ “การจัดการเหตุการณ์” ซึ่งจัดทำโดยทีมงานโครงการที่เป็นมิตร

เหตุการณ์จาวาสคริปต์

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

- การเลื่อนเคอร์เซอร์ของเมาส์ไปเหนือองค์ประกอบจะมาพร้อมกับการเปลี่ยนสีพื้นหลัง

- เมื่อผู้ใช้พยายามปิดหน้าต่างและยกเลิกการโหลดเอกสาร ข้อความจะปรากฏขึ้น

- เมื่อคุณคลิกที่ภาพ ฟังก์ชัน showPict() บางอย่างจะถูกดำเนินการ

ครึ่งหนึ่งของตัวจัดการได้รับการสนับสนุนโดยองค์ประกอบ HTML เกือบทั้งหมด () เหตุการณ์บางอย่างสามารถจำลองได้โดยใช้วิธีการที่เหมาะสม ด้านล่างเป็นรายการเหตุการณ์ตาม ข้อกำหนด HTML 4.0 และบางเหตุการณ์ที่รองรับโดย MS IE การตีความเบราว์เซอร์อาจแตกต่างจากมาตรฐานในแง่ของการบังคับใช้ตัวจัดการกับองค์ประกอบบางอย่าง

จัดการเหตุการณ์	รองรับองค์ประกอบ HTML	คำอธิบาย	วิธี การเลียนแบบ
บนยกเลิก	ไอเอ็มจี	รบกวนการโหลดภาพ
บนเบลอ		องค์ประกอบปัจจุบันสูญเสียโฟกัส เช่น ย้ายไปยังองค์ประกอบอื่น เกิดขึ้นเมื่อคลิกเมาส์ภายนอกองค์ประกอบหรือกดปุ่ม Tab	เบลอ()
เมื่อเปลี่ยน	อินพุต, เลือก, ข้อความ	การเปลี่ยนค่าขององค์ประกอบของแบบฟอร์ม เกิดขึ้นหลังจากที่องค์ประกอบสูญเสียโฟกัส เช่น หลังจากเหตุการณ์เบลอๆ	เปลี่ยน()
เมื่อคลิก		คลิกเพียงครั้งเดียว (กดปุ่มเมาส์แล้วปล่อย)	คลิก()
บนDblClick	องค์ประกอบ HTML เกือบทั้งหมด	ดับเบิลคลิก
บนข้อผิดพลาด	ไอเอ็มจี หน้าต่าง	เกิดข้อผิดพลาดในการเรียกใช้สคริปต์
บนโฟกัส	A, พื้นที่, ปุ่ม, อินพุต, ฉลาก, เลือก, ข้อความ	การรับองค์ประกอบที่จะโฟกัส (คลิกที่องค์ประกอบหรือกดปุ่ม Tab อีกครั้ง)	จุดสนใจ()
onKeyDown	องค์ประกอบ HTML เกือบทั้งหมด	มีการกดปุ่มบนแป้นพิมพ์
onKeyPress	องค์ประกอบ HTML เกือบทั้งหมด	มีการกดแป้นบนแป้นพิมพ์แล้วปล่อย
onKeyUp	องค์ประกอบ HTML เกือบทั้งหมด	ปล่อยแป้นคีย์บอร์ดแล้ว
บนโหลด	ตัวเครื่อง, เฟรมเซ็ต
บนเมาส์ดาวน์	องค์ประกอบ HTML เกือบทั้งหมด	ปุ่มเมาส์ที่กดภายในองค์ประกอบปัจจุบัน
บนเมาส์Move	องค์ประกอบ HTML เกือบทั้งหมด	เลื่อนเคอร์เซอร์ของเมาส์ภายในองค์ประกอบปัจจุบัน
onMouseOut	องค์ประกอบ HTML เกือบทั้งหมด	เคอร์เซอร์ของเมาส์อยู่นอกองค์ประกอบปัจจุบัน
บนMouseOver	องค์ประกอบ HTML เกือบทั้งหมด	เคอร์เซอร์ของเมาส์อยู่เหนือองค์ประกอบปัจจุบัน
onMouseUp	องค์ประกอบ HTML เกือบทั้งหมด	ปุ่มเมาส์ถูกปล่อยออกมาภายในองค์ประกอบปัจจุบัน
onMove	หน้าต่าง	ย้ายหน้าต่าง
เมื่อรีเซ็ต	รูปร่าง	รีเซ็ตข้อมูลแบบฟอร์ม (คลิกปุ่ม )	รีเซ็ต()
บนปรับขนาด	หน้าต่าง	การปรับขนาดหน้าต่าง
เมื่อเลือก	อินพุต, ข้อความ	เลือกข้อความในองค์ประกอบปัจจุบัน
เมื่อส่ง	รูปร่าง	ส่งข้อมูลแบบฟอร์ม (คลิกปุ่ม )	ส่ง()
บนยกเลิกการโหลด	ตัวเครื่อง, เฟรมเซ็ต	กำลังพยายามปิดหน้าต่างเบราว์เซอร์และยกเลิกการโหลดเอกสาร