เอกสารเหตุการณ์จาวาสคริปต์ JavaScript - ประเภทของเหตุการณ์ แนบเหตุการณ์กับองค์ประกอบที่ถูกต้อง

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

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

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

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

OnNameEvents

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

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

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

การทำงาน setTempColor ()รับผิดชอบในการเปลี่ยนสีชั่วคราว

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

การทำงาน ค่าเริ่มต้นสี ()กำหนดสีพื้นหลังเริ่มต้น

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

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

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

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

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

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

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

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

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

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

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

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

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

รูปแบบการจัดการเหตุการณ์

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

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

องค์ประกอบ -> องค์ประกอบ 2 -> เอกสาร -> window

พารามิเตอร์เหตุการณ์ (อ็อบเจ็กต์เหตุการณ์)

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

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

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

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

เหตุการณ์ใน JS สามารถแบ่งออกเป็น 4 กลุ่มใหญ่:

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

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

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

จาวาสคริปต์ เริ่มต้นอย่างรวดเร็ว

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

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

โค้ดที่กำหนดเองที่จะเริ่มทำงานสำหรับองค์ประกอบ DOM เฉพาะจะสร้างตัวจัดการเหตุการณ์ มีสามวิธีใน JS ในการสร้างตัวจัดการเหตุการณ์:

1. ตัวจัดการเหตุการณ์ HTML มาตรฐานผ่านแอตทริบิวต์

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

< input type = "text" id = "username" onblur = "checkName()" >

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

2. ตัวจัดการเหตุการณ์มาตรฐานใน DOM

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

var username = document.getElementbyId ("ชื่อผู้ใช้"); username.onblur = ตรวจสอบชื่อ;

ชื่อผู้ใช้. onblur = ตรวจสอบชื่อ;

จาวาสคริปต์ เริ่มต้นอย่างรวดเร็ว

เรียนรู้พื้นฐานของ JavaScript ด้วยตัวอย่างจริงของการสร้างเว็บแอปพลิเคชัน

ในตัวอย่างก่อนหน้านี้ ฟังก์ชัน checkName จะทำงานหลังจากองค์ประกอบแบบฟอร์มสูญเสียโฟกัส

3. ผู้ฟังเหตุการณ์

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

var username = document.getElementbyId ("ชื่อผู้ใช้"); username.addEventListener ("เบลอ", ตรวจสอบชื่อ, เท็จ);

var username = เอกสาร getElementbyId ("ชื่อผู้ใช้"); ชื่อผู้ใช้. addEventListener ("เบลอ", ตรวจสอบชื่อ, เท็จ);

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

var username = document.getElementbyId ("ชื่อผู้ใช้"); username.addEventListener ("เบลอ", ฟังก์ชัน () (// การดำเนินการเพื่อทริกเกอร์เหตุการณ์))

เหตุการณ์ทั้งหมดไม่เท่ากัน สิ่งสำคัญคือต้องเข้าใจว่าไม่ใช่ทุกเหตุการณ์ที่สามารถจัดการได้ในลักษณะเดียวกัน เหตุการณ์การเลื่อนและปรับขนาดมักเกิดขึ้นบ่อยมาก คุณจึงต้องระวังให้มาก เพื่อไม่ให้ประสิทธิภาพของสคริปต์ทำงานช้าลง เช่นเดียวกับเหตุการณ์อินพุตที่ดูเหมือนไม่เป็นอันตราย ประสิทธิภาพของสคริปต์อาจลดลงอย่างมากหากพยายามตอบสนองต่อเหตุการณ์อินพุตที่เรียกบ่อยบนแถบเลื่อนช่วงอย่างต่อเนื่อง ไม่ได้ติดตามกิจกรรมทั้งหมด ขณะนี้ผู้ดูการกลายพันธุ์ไม่สามารถติดตามการเปลี่ยนแปลงทั้งหมดกับองค์ประกอบทั้งหมดบนหน้าได้ ตัวอย่างเช่น ไม่มีวิธีติดตามการเปลี่ยนแปลงความสูงขององค์ประกอบ (เมื่อคอนเทนเนอร์ย่อลงในการออกแบบที่ตอบสนอง ข้อความภายในจะจัดเรียงใหม่ และองค์ประกอบจะยาวขึ้น) ยังมีวิธีติดตามการเปลี่ยนแปลง ฉันจะพูดถึงเรื่องนี้ในบทความหน้า แนบเหตุการณ์กับองค์ประกอบที่ถูกต้อง เหตุการณ์ onclick นำไปใช้กับองค์ประกอบหลายอย่าง รวมถึงลิงก์ มีกฎทั่วไป - ไม่แนะนำให้แนบโค้ด JS กับลิงก์ เมื่อคลิกลิงก์ ผู้ใช้ควรไปที่ส่วนอื่นของไซต์หรือไปยังจุดยึด หากคุณต้องการองค์ประกอบ UI ที่สามารถใช้เปลี่ยนแปลงบางอย่างในหน้าเดียวกัน ปุ่มจะเหมาะกับคุณ คุณสามารถวาง JavaScript บนปุ่มได้โดยไม่มีปัญหาใดๆ อย่าใช้ JavaScript หากคุณสามารถทำได้ด้วย CSS เมื่อเทียบกับ CSS แล้ว JavaScript นั้นช้าและไม่น่าเชื่อถือ โดยทั่วไป ควรใช้ CSS เป็นทางเลือกแทนการเขียนสคริปต์ที่ซับซ้อนในทุกที่ที่ทำได้ อย่างไรก็ตาม CSS ไม่ได้ทำทุกอย่าง ใช้ได้ดีกับ: โฮเวอร์ (แทนที่เหตุการณ์การสัมผัสในหลายกรณี) และยังสามารถแทนที่เหตุการณ์การคลิกด้วย: เป้าหมายในบางกรณี ภาพเคลื่อนไหว CSS จะถูกทริกเกอร์โดยอัตโนมัติหลังจากโหลดหน้าเว็บ และมีสถานะ CSS พิเศษที่สามารถทริกเกอร์สำหรับองค์ประกอบต่างๆ เช่น ปุ่มตัวเลือก อย่างไรก็ตาม สิ่งที่ซับซ้อนกว่านั้นมักจะดีที่สุดสำหรับ JavaScript

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

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

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

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

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

1 2 3 4 5 6 7

จาวาสคริปต์:

จาวาสคริปต์:

17 18 19 20 21 22

var inform = function () (การแจ้งเตือน ("ปุ่มอื่น");); var mbutton = document.getElementById ("mbutton"); mbutton.onclick = แจ้ง;

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

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

element.addEventListener (เหตุการณ์ ฟังก์ชัน)

ตัวเลือก:

เหตุการณ์ - เหตุการณ์ที่ต้องดำเนินการ

ฟังก์ชั่น - ฟังก์ชั่นที่กลายเป็นตัวจัดการ

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

รหัส HTML:

ปุ่มใหม่

จาวาสคริปต์:

24 25 26 27 28 29

var newinform = ฟังก์ชั่น () (การแจ้งเตือน ("กดปุ่มใหม่");); var newbutton = document.getElementById ("ปุ่มใหม่"); newbutton.addEventListener ("คลิก", ​​แจ้งใหม่);

เมธอด removeEventListener () อนุญาตให้คุณลบตัวจัดการ

element.removeEventListener (เหตุการณ์ ฟังก์ชัน)

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

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

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

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

13 14 15 16

button.onclick = ฟังก์ชัน (เหตุการณ์) (การแจ้งเตือน (event.type););

คลิกที่ปุ่ม ประเภทของเหตุการณ์ที่เรียกจะปรากฏขึ้น

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

ประเภทงาน

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

ข้อมูลจำเพาะของเหตุการณ์ระดับ 3 ของ DOM ซึ่งหลังจากหยุดนิ่งมานานหลายปี เริ่มมีการพัฒนาอย่างแข็งขันภายใต้การอุปถัมภ์ของกลุ่ม W3C

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

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

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

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

เหตุการณ์ DOMContentLoadedเริ่มทำงานทันทีที่โหลดเอกสาร แยกวิเคราะห์โดย parser และดำเนินการสคริปต์ที่เลื่อนออกไปทั้งหมดแล้ว ณ จุดนี้ รูปภาพและสคริปต์ที่มีแอตทริบิวต์ async อาจยังคงโหลดต่อไป แต่ตัวเอกสารเองก็พร้อมที่จะดำเนินการ เหตุการณ์นี้เปิดตัวครั้งแรกใน Firefox และได้ถูกนำมาใช้โดยผู้ผลิตเบราว์เซอร์รายอื่นทั้งหมด รวมถึง Microsoft ซึ่งเพิ่มการสนับสนุนสำหรับเหตุการณ์นี้ใน IE9 แม้จะมีคำนำหน้า DOM ในชื่อ เหตุการณ์นี้ไม่ได้เป็นส่วนหนึ่งของมาตรฐานเหตุการณ์ DOM ระดับ 3 แต่เป็นมาตรฐานที่กำหนดโดยข้อกำหนด HTML5

ขณะที่โหลดเอกสาร ค่าของคุณสมบัติ document.readyState จะเปลี่ยนไป การเปลี่ยนแปลงค่าของคุณสมบัตินี้ใน IE แต่ละครั้งจะมาพร้อมกับเหตุการณ์ readystatechange บนอ็อบเจ็กต์ Document ดังนั้นใน IE เหตุการณ์นี้จึงสามารถใช้เพื่อกำหนดเมื่อสถานะสมบูรณ์เกิดขึ้น ข้อกำหนด HTML5 กำหนดมาตรฐานเหตุการณ์ พร้อมสถานะเปลี่ยนแต่สั่งให้เริ่มทำงานทันทีก่อนเหตุการณ์การโหลด ดังนั้นจึงไม่ชัดเจนนักว่าอะไรคือข้อดีของเหตุการณ์ readystatechange over load

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

/ * ส่งฟังก์ชันของคุณไปที่ whenReady () และฟังก์ชันจะเรียกใช้ (เป็นวิธีการของวัตถุเอกสาร) ทันทีที่แยกวิเคราะห์เอกสารและพร้อมที่จะดำเนินการ ฟังก์ชันที่ลงทะเบียนจะถูกเรียกในเหตุการณ์ DOMContentLoaded, readystatechange หรือ load แรก เมื่อเอกสารพร้อมและเรียกฟังก์ชันทั้งหมดแล้ว whenReady () จะเรียกฟังก์ชันทั้งหมดที่ส่งผ่านไปยังเอกสารนั้นทันที * / var whenReady = (ฟังก์ชัน () (// ฟังก์ชันนี้ส่งคืนโดยฟังก์ชัน whenReady () var funcs =; // ฟังก์ชันที่จะเรียกใช้ในเหตุการณ์ var ready = false; // จะเป็นจริงเมื่อเรียกใช้ฟังก์ชันตัวจัดการ // ตัวจัดการเหตุการณ์ซึ่งถูกเรียกทันทีที่เอกสาร // พร้อมที่จะดำเนินการตัวจัดการฟังก์ชั่น (e) (// หากตัวจัดการถูกเรียกแล้วให้ส่งคืนการควบคุมหาก (พร้อม) กลับมา; // หากเหตุการณ์นี้ คือ readystatechange และ state คือ // ยอดเยี่ยมจาก "complete" ซึ่งหมายความว่าเอกสารยังไม่พร้อมหาก (e.type === "readystatechange" && document.readyState! == "complete") return; // เรียก ฟังก์ชันที่ลงทะเบียนทั้งหมด // โปรดทราบว่าทุกค่าของ // คุณสมบัติ funcs.length จะถูกตรวจสอบหนึ่งครั้ง ในกรณีหนึ่งในฟังก์ชันที่เรียกว่า // ลงทะเบียน functions.for เพิ่มเติม (var i = 0; i

เหตุการณ์ของเมาส์

มีเหตุการณ์ค่อนข้างน้อยที่เกี่ยวข้องกับเมาส์ ทั้งหมดอยู่ในตารางด้านล่าง เหตุการณ์เมาส์ทั้งหมดยกเว้น mouseenter และ mouseleave ฟองขึ้น คลิกเหตุการณ์บนลิงก์และปุ่มส่งแบบฟอร์มมีการดำเนินการเริ่มต้นที่สามารถยกเลิกได้ เป็นไปได้ในทางทฤษฎีที่จะยกเลิกเหตุการณ์เมนูบริบทและป้องกันไม่ให้เมนูบริบทปรากฏขึ้น แต่เบราว์เซอร์บางตัวมีการตั้งค่าที่ทำให้กิจกรรมนี้ไม่สามารถยกเลิกได้

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

ประเภทของ	คำอธิบาย
คลิก	เหตุการณ์ระดับสูงเกิดขึ้นเมื่อผู้ใช้กดและปล่อยปุ่มเมาส์หรือเปิดใช้งานองค์ประกอบ
เมนูบริบท	เหตุการณ์ที่ยกเลิกได้ซึ่งเกิดขึ้นก่อนที่เมนูบริบทจะแสดงขึ้น เบราว์เซอร์ปัจจุบันแสดงเมนูบริบทเมื่อคลิกขวา ดังนั้นเหตุการณ์นี้จึงสามารถใช้เป็นเหตุการณ์การคลิกได้
dblclick	เริ่มทำงานเมื่อผู้ใช้ดับเบิลคลิก
เมาส์ดาวน์	เริ่มทำงานเมื่อผู้ใช้กดปุ่มเมาส์
mouseup	เริ่มทำงานเมื่อผู้ใช้ปล่อยปุ่มเมาส์
mousemove	เพิ่มขึ้นเมื่อผู้ใช้เลื่อนตัวชี้เมาส์
เมาส์โอเวอร์	เพิ่มขึ้นเมื่อวางตัวชี้เมาส์ไว้เหนือองค์ประกอบ คุณสมบัติที่เกี่ยวข้องTarget (หรือจากองค์ประกอบใน IE) ระบุองค์ประกอบที่ตัวชี้เมาส์ถูกย้าย
mouseout	เพิ่มขึ้นเมื่อตัวชี้เมาส์ออกจากองค์ประกอบ คุณสมบัติที่เกี่ยวข้องTarget (หรือ toElement ใน IE) ระบุองค์ประกอบที่ตัวชี้เมาส์ถูกย้ายไป
mouseenter	คล้ายกับเมาส์โอเวอร์ แต่ไม่ปรากฏขึ้น ปรากฏตัวครั้งแรกใน IE และได้รับมาตรฐานใน HTML5 แต่ยังไม่รองรับเบราว์เซอร์ทั้งหมด
mouseleave	เหมือนเลื่อนเมาส์ออก แต่ไม่ปรากฏขึ้น ปรากฏตัวครั้งแรกใน IE และได้รับมาตรฐานใน HTML5 แต่ยังไม่รองรับเบราว์เซอร์ทั้งหมด

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

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

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

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

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

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

/ * drag () - ลากและวางองค์ประกอบ HTML ในตำแหน่งที่แน่นอน ต้องเรียกใช้ฟังก์ชันนี้จากตัวจัดการเหตุการณ์ onmousedown เหตุการณ์ mousemove ที่ตามมาจะทำให้องค์ประกอบที่ระบุย้าย เหตุการณ์ mouseup จะทำให้การย้ายเสร็จสมบูรณ์ การใช้งานนี้ใช้ได้กับทั้งโมเดลเหตุการณ์มาตรฐานและ IE ใช้ฟังก์ชัน getScrollOffsets () อาร์กิวเมนต์ elementToDrag: องค์ประกอบที่ได้รับหรือมีเหตุการณ์ mousedown องค์ประกอบนี้ต้องอยู่ในตำแหน่งที่แน่นอน ค่าของคุณสมบัติ style.left และ style.top จะเปลี่ยนไปเมื่อผู้ใช้เลื่อนตัวชี้เมาส์ เหตุการณ์: วัตถุเหตุการณ์ที่ได้รับโดยตัวจัดการเหตุการณ์ mousedown * / ฟังก์ชั่นลาก (elementToDrag, เหตุการณ์) (// แปลงพิกัดเริ่มต้นของเมาส์เป็นพิกัดของเอกสาร var scroll = getScrollOffsets (); // ฟังก์ชั่นตัวช่วยประกาศด้านล่าง var startX = event.clientX + scroll.x; var startY = เหตุการณ์ clientY + scroll.y; // พิกัดเริ่มต้น (เทียบกับจุดเริ่มต้นของเอกสาร) ขององค์ประกอบที่ // จะถูกย้าย เนื่องจาก elementToDrag อยู่ในตำแหน่งที่แน่นอน // คุณสมบัติ offsetParent จะถือว่าอ้างถึงเอกสาร body var origX = elementToDrag.offsetLeft; var origY = elementToDrag.offsetTop; // ค้นหาระยะห่างระหว่างจุดเหตุการณ์ mousedown กับมุมซ้ายบนขององค์ประกอบ // ระยะทางนี้จะถูกนำมาพิจารณาเมื่อเลื่อน mouse pointer.var deltaX = startX - origX; var deltaY = startY - origY; // Register handlers mousemove and mouseup events // ที่ตามหลัง mousedown event.if (document.addEventListener) (// โมเดลเหตุการณ์มาตรฐาน // Register ตัวจัดการการสกัดกั้นในเอกสาร document.addEventListener ("mousemove", moveHandler, true); document.addEventListener ("mouseup", upHandler, จริง); ) else if (document.attachEvent) (// โมเดลเหตุการณ์ IE สำหรับ IE5-8 // ในโมเดลเหตุการณ์ IE เหตุการณ์จะถูกดักจับโดยการเรียก // เมธอด setCapture () ขององค์ประกอบ elementToDrag.setCapture (); elementToDrag AttachEvent ("onmousemove", moveHandler); elementToDrag.attachEvent ("onmouseup", upHandler); // ตีความการสูญเสียการจับภาพเหตุการณ์ของเมาส์เป็นเหตุการณ์ mouseup elementToDrag.attachEvent ("onlosecapture", upHandler);) // เหตุการณ์นี้ได้รับ จัดการและไม่ควรส่งต่อไปยังตัวจัดการอื่น หาก (event .stopPropagation) event.stopPropagation (); // โมเดลมาตรฐาน else event.cancelBubble = true; // IE // ป้องกันไม่ให้มีการดำเนินการเริ่มต้น ถ้า (event.preventDefault) event.preventDefault (); // โมเดลมาตรฐาน else event.returnValue = false; // IE / * ตัวจัดการนี้จับเหตุการณ์ mousemove ที่เกิดขึ้นในขณะที่องค์ประกอบกำลังถูกลาก เขามีหน้าที่ในการเคลื่อนย้ายองค์ประกอบ * / ฟังก์ชั่น moveHandler (e) (ถ้า (! e) e = window.event; // IE Event Model // ย้ายองค์ประกอบไปยังตำแหน่งของตัวชี้เมาส์ตามตำแหน่ง // ของแถบเลื่อนและออฟเซ็ตที่สัมพันธ์กับ click.var scroll เริ่มต้น = getScrollOffsets ( ); elementToDrag.style.left = (e.clientX + scroll.x - deltaX) + "px"; elementToDrag.style.top = (e.clientY + scroll.y - deltaY) + "px"; // และยกเลิกการเผยแพร่เหตุการณ์ต่อไป if (e.stopPropagation) e.stopPropagation (); // รุ่นมาตรฐานอื่น e.cancelBubble = true; // IE) / * ตัวจัดการนี้สกัดกั้นเหตุการณ์ mouseup สุดท้ายที่ เสร็จสิ้นการดำเนินการลาก * / function upHandler (e) (if (! e) e = window.event; // IE Event Model // ลบตัวจัดการเหตุการณ์การสกัดกั้น if (document.removeEventListener) (// DOM Event Model document.removeEventListener ("mouseup" , upHandler, true); document.removeEventListener ("mousemove", moveHandler, true);) else if (document.detachEvent) (// IE 5+ Event Model elementToDrag.detachEvent ("onlosecapture", upHandler); elementToDrag.detachEvent ( "onmouseup", upHandler); elementToDrag.detachEvent ("onmousemove", moveHandler); elementToDrag.releaseCapture ();) // และขัดจังหวะการเผยแพร่เหตุการณ์ต่อไป if (e.stopPropagation) e.stopPropagation (); // Standard model else e.cancelBubble = true; // IE)) // ส่งกลับตำแหน่งแถบเลื่อนปัจจุบันเป็นคุณสมบัติ x และ y ของฟังก์ชันวัตถุ getScrollOffsets (w) (// ใช้หน้าต่างที่ระบุหรือหน้าต่างปัจจุบัน // ถ้า ฟังก์ชันถูกเรียกโดยไม่มีอาร์กิวเมนต์ w = w | | window; // วิธีการต่อไปนี้ใช้ได้กับทุกเบราว์เซอร์ ยกเว้น IE เวอร์ชัน 8 และต่ำกว่า if (w.pageXOffset! = null) return (x: w.pageXOffset, y: w.pageYOffset); // สำหรับ IE (และเบราว์เซอร์อื่นๆ) ในโหมดมาตรฐาน var d = w.document; if (document.compatMode == "CSSICompat") ส่งคืน (x: d.documentElement.scrollLeft, y: d.documentElement.scrollTop); // สำหรับเบราว์เซอร์ในโหมดความเข้ากันได้ที่ส่งคืน (x: d.body.scrollLeft, y: d.body.scrollTop); )

ตัวอย่างต่อไปนี้สาธิตวิธีการใช้ฟังก์ชันลาก () ในไฟล์ HTML:

ที่สำคัญที่สุดที่นี่คือแอตทริบิวต์ onmousedown บนองค์ประกอบที่ซ้อนกัน