เหตุการณ์ DOM

เหตุการณ์ DOM (Document Object Model)เป็นสัญญาณว่ามีบางสิ่งเกิดขึ้นหรือกำลังเกิดขึ้น และสามารถถูกกระตุ้นโดยการโต้ตอบของผู้ใช้หรือโดยเบราว์เซอร์^{[ 1 ]} ภาษาสคริปต์ฝั่ง ไคลเอ็นต์ เช่น JavaScript , JScript , VBScriptและJava สามารถลงทะเบียน ตัวจัดการเหตุการณ์หรือตัวรับฟังต่างๆบนโหนดองค์ประกอบภายใน โครงสร้าง DOMเช่น ในเอกสาร HTML , XHTML , XULและSVG

ตัวอย่างของ DOM Events:

• เมื่อผู้ใช้คลิกเมาส์
• เมื่อหน้าเว็บโหลดเสร็จแล้ว
• เมื่อโหลดรูปภาพเสร็จแล้ว
• เมื่อเมาส์เลื่อนไปอยู่เหนือองค์ประกอบ
• เมื่อมีการเปลี่ยนแปลงช่องป้อนข้อมูล
• เมื่อมีการส่งแบบฟอร์ม HTML
• เมื่อผู้ใช้กดปุ่ม^{[ 2 ]}

ในอดีต เช่นเดียวกับ DOM โมเดลเหตุการณ์ที่ใช้โดยเว็บเบราว์เซอร์ ต่างๆ มีความแตกต่างกันอย่างมาก ซึ่งก่อให้เกิดปัญหาด้านความเข้ากันได้ เพื่อแก้ไขปัญหานี้ องค์กร World Wide Web Consortium (W3C) จึงได้กำหนดมาตรฐานโมเดลเหตุการณ์ใน DOM ระดับ 2

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

• เหตุการณ์เมาส์^{[ 3 ] [ 4 ]}
• เหตุการณ์เกี่ยวกับแป้นพิมพ์
• เหตุการณ์เฟรม/วัตถุ HTML
• เหตุการณ์ของฟอร์ม HTML
• เหตุการณ์ส่วนติดต่อผู้ใช้
• เหตุการณ์การเปลี่ยนแปลง (การแจ้งเตือนเมื่อมีการเปลี่ยนแปลงโครงสร้างของเอกสาร)
• เหตุการณ์ความคืบหน้า^{[ 5 ]} (ใช้โดยXMLHttpRequestและ File API ^{[ 6 ]} )

โปรดทราบว่าการจำแนกประเภทเหตุการณ์ข้างต้นไม่ตรงกับการจำแนกประเภทของ W3C อย่างแท้จริง

โปรดทราบว่าเหตุการณ์ที่มีชื่อขึ้นต้นด้วย "DOM" นั้นยังไม่ได้รับการสนับสนุนอย่างดีในปัจจุบัน และด้วยเหตุผลนี้และเหตุผลด้านประสิทธิภาพอื่นๆ จึงถูกยกเลิกการใช้งานโดย W3C ใน DOM Level 3 Mozilla และ Opera รองรับ DOMAttrModified , DOMNodeInserted , DOMNodeRemoved และ DOMCharacterDataModified ส่วน Chrome และ Safari รองรับเหตุการณ์เหล่านี้ ยกเว้นDOMAttrModified

เว็บเบราว์เซอร์ที่ทำงานบน อุปกรณ์ ที่รองรับการสัมผัสเช่นiOS ของ Apple และ Androidของ Google จะสร้างเหตุการณ์เพิ่มเติม^{[ 9 ] : §5.3}

ในร่างคำแนะนำของW3CTouchEventจะมีการให้ตำแหน่งTouchListของคีย์ตัวแก้ไขที่ใช้งานอยู่ตำแหน่งขององค์ประกอบ DOM ที่กำหนดเป้าหมาย และ ตำแหน่ง ของสิ่งที่เปลี่ยนแปลงไปตั้งแต่ครั้งก่อน^{[ 9 ]}TouchTouchListTouchTouchListTouchTouchEvent

Appleไม่ได้เข้าร่วมกลุ่มทำงานนี้ และทำให้ W3C เลื่อนการแนะนำข้อกำหนด Touch Events ออกไปโดยการเปิดเผยสิทธิบัตรในช่วงท้ายของกระบวนการแนะนำ^{[ 10 ]}

เว็บเบราว์เซอร์บนอุปกรณ์ที่มีอุปกรณ์ป้อนข้อมูลหลายประเภท รวมถึงเมาส์ แผงสัมผัส และปากกา อาจสร้างเหตุการณ์ป้อนข้อมูลแบบบูรณาการ ผู้ใช้สามารถดูได้ว่าอุปกรณ์ป้อนข้อมูลประเภทใดถูกกด ปุ่มใดถูกกดบนอุปกรณ์นั้น และปุ่มนั้นถูกกดแรงแค่ไหนเมื่อใช้ปากกาสไตลัส ณ เดือนตุลาคม 2556 เหตุการณ์นี้รองรับเฉพาะ Internet Explorer 10 และ 11 เท่านั้น^{[ 11 ]}

แม้ว่าจะยังไม่ได้นำไปใช้งานจริง แต่กลุ่มทำงาน Indie UI ต้องการช่วยเหลือนักพัฒนาเว็บแอปพลิเคชันให้สามารถรองรับเหตุการณ์การโต้ตอบของผู้ใช้มาตรฐานโดยไม่ต้องจัดการกับเหตุการณ์ทางเทคนิคเฉพาะแพลตฟอร์มต่างๆ ที่อาจตรงกัน^{[ 12 ]}

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

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

• กด Ctrl+Z บน Windows และ Linux
• กด Command+Z บน Mac OS X
• ฟังก์ชันการเขย่าบนอุปกรณ์มือถือบางรุ่น

จะง่ายกว่าหากรับฟังคำขอเดียวที่ได้มาตรฐานเพื่อ "ยกเลิก" การกระทำก่อนหน้านี้

นอกเหนือจากเหตุการณ์ทั่วไป (ตามมาตรฐาน W3C) แล้วInternet Explorer ยังเพิ่มเหตุการณ์หลักอีกสองประเภท เหตุการณ์บางอย่างได้รับการนำไปใช้เป็นมาตรฐานโดยพฤตินัยโดยเบราว์เซอร์อื่นๆ แล้ว

• เหตุการณ์คลิปบอร์ด
• เหตุการณ์การผูกข้อมูล

โปรดทราบว่า Mozilla, Safari และ Opera รองรับเหตุการณ์ readystatechange สำหรับ อ็อบเจ็กต์ XMLHttpRequest ด้วย นอกจากนี้ Mozilla ยังรองรับเหตุการณ์ beforeunload โดยใช้วิธีการลงทะเบียนเหตุการณ์แบบดั้งเดิม (DOM Level 0) Mozilla และ Safari ยังรองรับ contextmenu แต่ Internet Explorer สำหรับ Mac ไม่รองรับ

โปรดทราบว่า Firefox เวอร์ชัน 6 ขึ้นไปรองรับเหตุการณ์ beforeprint และ afterprint

นอกเหนือจากเหตุการณ์ทั่วไป (ตามมาตรฐาน W3C) แล้ว Mozilla ยังได้กำหนดชุดเหตุการณ์ที่ใช้งานได้เฉพาะกับองค์ประกอบ XUL เท่านั้น

สำหรับ Mozilla และ Opera 9 ยังมีเหตุการณ์ที่ไม่ได้รับการบันทึกไว้ที่เรียกว่าDOMContentLoadedและDOMFrameContentLoadedซึ่งจะทำงานเมื่อเนื้อหา DOM ถูกโหลด เหตุการณ์เหล่านี้แตกต่างจาก "load" เนื่องจากจะทำงานก่อนการโหลดไฟล์ที่เกี่ยวข้อง (เช่น รูปภาพ) อย่างไรก็ตาม DOMContentLoaded ได้ถูกเพิ่มเข้าไปในข้อกำหนดHTML 5 แล้ว ^{[ 13 ]} เหตุการณ์ DOMContentLoaded ยังถูกนำไปใช้ใน เอ็นจิ้นการเรนเดอร์ Webkitเวอร์ชัน 500 ขึ้นไป^{[ 14 ] [ 15 ]}ซึ่งสอดคล้องกับGoogle ChromeและSafari เวอร์ชัน 3.1 ขึ้นไปทั้งหมด DOMContentLoaded ยังถูกนำไปใช้ในInternet Explorer 9ด้วย^{[ 16 ]}

Opera 9 ยังรองรับเหตุการณ์ Web Forms 2.0 ได้แก่DOMControlValueChanged , invalid , forminputและformchangeด้วย

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

• กระตุ้นการทำงานขององค์ประกอบจากภายนอกสู่ภายใน (การดักจับเหตุการณ์) โมเดลนี้ถูกนำไปใช้ในNetscape Navigator
• กระตุ้นองค์ประกอบจากภายในสู่ภายนอก ( การแพร่กระจายเหตุการณ์ ) โมเดลนี้ถูกนำไปใช้ใน Internet Explorer และเบราว์เซอร์อื่นๆ^{[ 17 ]}

W3C วางตัวเป็นกลางในการต่อสู้ครั้งนี้^{[ 18 ] : §1.2}

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

1. ขั้นตอนการจับภาพ: เหตุการณ์จะเดินทางจากเป้าหมายเหตุการณ์หลักไปยังเป้าหมายของเหตุการณ์ย่อย
2. ขั้นตอนเป้าหมาย: เหตุการณ์เคลื่อนที่ผ่านเป้าหมายของเหตุการณ์
3. เฟสฟอง ( ไม่บังคับ ): เหตุการณ์จะเดินทางย้อนกลับจากเป้าหมายของเหตุการณ์หนึ่งไปยังเป้าหมายของเหตุการณ์หลัก เฟสฟองจะเกิดขึ้นเฉพาะกับเหตุการณ์ที่มีฟอง (โดยที่event.bubbles == true)

คุณสามารถดูภาพรวมของลำดับเหตุการณ์นี้ได้ที่https://domevents.dev

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

• event.stopPropagation()กิจกรรมจะหยุดลงเมื่อตัวรับฟังเหตุการณ์ทั้งหมดที่เชื่อมต่อกับเป้าหมายเหตุการณ์ปัจจุบันในขั้นตอนเหตุการณ์ปัจจุบันเสร็จสิ้นแล้ว
• event.stopImmediatePropagation()เหตุการณ์จะหยุดลงทันทีและจะไม่มีการเรียกใช้ตัวรับฟังเหตุการณ์เพิ่มเติมอีกต่อไป

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

• ตั้งค่าevent.cancelBubbleเป็นtrue(อินเทอร์เน็ต เอ็กซ์พลอเรอร์)
• ตั้งค่าevent.returnValueคุณสมบัติเป็นfalse

cancelableสามารถยกเลิกกิจกรรมได้โดยการเรียกใช้เมธอด ` discharge event.preventDefault()()` การยกเลิกกิจกรรมจะยกเลิกพฤติกรรมเริ่มต้นของเบราว์เซอร์สำหรับกิจกรรมนั้น เมื่อกิจกรรมถูกยกเลิกevent.defaultPreventedคุณสมบัติ `discharge()` จะถูกตั้งค่าเป็นtrue`true` การยกเลิกกิจกรรมจะไม่หยุดกิจกรรมจากการเดินทางตามเส้นทางของกิจกรรม

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

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

ในโมเดลอินไลน์^{[ 20 ]}ตัวจัดการเหตุการณ์จะถูกเพิ่มเป็นแอตทริบิวต์ขององค์ประกอบ ในตัวอย่างด้านล่างกล่องโต้ตอบแจ้งเตือนที่มีข้อความ "Hey Joe" จะปรากฏขึ้นหลังจาก คลิก ไฮเปอร์ลิงก์การกระทำการคลิกเริ่มต้นจะถูกยกเลิกโดยการส่งค่า false ในตัวจัดการเหตุการณ์

< ! doctype html> < html lang = " en" ><head> < meta charset = " utf - 8" > <title> การจัดการเหตุการณ์แบบอินไลน์</title> </head> <body>< h1 >การจัดการเหตุการณ์แบบอินไลน์</ h1 ><p> เฮ้<a href="http://www.example.com" > โจ</a> ! </p>​​​​​​​​​​​​​​<script> function triggerAlert ( name ) { window.alert ( " Hey " + name ) ; } </script> </body> </html>​​​​​​​

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

ฟังก์ชัน() { triggerAlert ( 'Joe' ); return false ; }

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

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

< ! doctype html> < html lang = " en" ><head> < meta charset = " utf - 8 " > <title>การจัดการเหตุการณ์แบบดั้งเดิม</title> </head><body> <h1> การจัดการเหตุการณ์แบบดั้งเดิม</h1>​​<p> เฮ้โจ! </p>​​<script> var triggerAlert = function () { window.alert ( " Hey Joe" ) ; } ; // กำหนดตัว จัดการเหตุการณ์document.onclick = triggerAlert ; // กำหนดตัวจัดการเหตุการณ์อีกตัวwindow.onload = triggerAlert ; // ลบตัวจัดการเหตุการณ์ที่เพิ่งกำหนดwindow.onload = null ; </script> </body> </html>

วิธีการเพิ่มพารามิเตอร์:

var name = 'Joe' ; document.onclick = ( function ( name ) { return function ( ) { alert ( ' Hey ' + name + '!' ); }; }( name ));

ฟังก์ชันภายในยังคงรักษาขอบเขตการทำงาน ของตน ไว้

W3C ได้ออกแบบโมเดลการจัดการเหตุการณ์ที่มีความยืดหยุ่นมากขึ้นใน DOM ระดับ 2 ^{[ 18 ]}

ข้อมูลที่เป็นประโยชน์บางประการ:

• เพื่อป้องกันไม่ให้เหตุการณ์แพร่กระจาย นักพัฒนาต้องเรียกใช้stopPropagation()เมธอดของอ็อบเจ็กต์เหตุการณ์นั้น
• เพื่อป้องกันไม่ให้มีการเรียกใช้งานการทำงานเริ่มต้นของเหตุการณ์ นักพัฒนาต้องเรียกใช้preventDefault()เมธอดของอ็อบเจ็กต์เหตุการณ์นั้น

ความแตกต่างหลักจากโมเดลแบบดั้งเดิมคือ สามารถลงทะเบียนตัวจัดการเหตุการณ์หลายตัวสำหรับเหตุการณ์เดียวกันได้ นอกจากนี้ยังสามารถใช้ตัวเลือกนี้ เพื่อระบุว่าควรเรียกตัวจัดการในขั้น ตอน useCaptureการจับภาพแทนที่จะเป็นขั้นตอนการแพร่กระจาย โมเดลนี้ได้รับการสนับสนุนโดยMozilla , Opera , Safari , ChromeและKonqueror

< ! doctype html> < html lang = "en" ><head> < meta charset = " utf - 8 " > <title> DOM Level 2 </title> </head><body> <h1> DOMระดับ2 </h1>​​​​<p> เฮ้โจ! </p>​​<script> var heyJoe = function () { window.alert ( " Hey Joe!" ) ; } // เพิ่มตัวจัดการเหตุการณ์document.addEventListener ( "click" , heyJoe , true ) ; // ขั้นตอนการจับภาพ// เพิ่มตัวจัดการเหตุการณ์อีกตัวwindow.addEventListener ( " load" , heyJoe , false ) ; // ขั้นตอนการส่งต่อ เหตุการณ์ // ลบตัวจัดการเหตุการณ์ที่เพิ่งเพิ่มwindow.removeEventListener ( " load " , heyJoe , false ) ; </script></body> </html>​​​​

Microsoft Internet Explorer เวอร์ชันก่อน 8 ไม่ปฏิบัติตามแบบจำลองของ W3C เนื่องจากแบบจำลองของตนเองถูกสร้างขึ้นก่อนการให้สัตยาบันมาตรฐาน W3C Internet Explorer 9 ปฏิบัติตามเหตุการณ์ระดับ DOM 3 ^{[ 22 ]}และ Internet Explorer 11 ยกเลิกการสนับสนุนแบบจำลองเฉพาะของ Microsoft ^{[ 23 ]}

ข้อมูลที่เป็นประโยชน์บางประการ:

• เพื่อป้องกันไม่ให้เหตุการณ์แพร่กระจายออกไป นักพัฒนาต้องตั้งค่าcancelBubbleคุณสมบัติ ของเหตุการณ์นั้น
• เพื่อป้องกันไม่ให้มีการเรียกใช้งานการทำงานเริ่มต้นของเหตุการณ์ นักพัฒนาต้องตั้งreturnValueค่าคุณสมบัติ ของเหตุการณ์นั้น
• คำหลัก นี้thisหมายถึงwindowอ็อบเจ็กต์ ส่วนกลาง

โมเดลนี้แตกต่างจากโมเดลแบบดั้งเดิมตรงที่สามารถลงทะเบียนตัวจัดการเหตุการณ์ได้หลายตัวสำหรับเหตุการณ์เดียวกัน อย่างไรก็ตามuseCaptureไม่สามารถใช้ตัวเลือกนี้เพื่อระบุว่าควรเรียกใช้ตัวจัดการในขั้นตอนการจับภาพได้ โมเดลนี้รองรับโดย Microsoft Internet Explorerและเบราว์เซอร์ที่ใช้ Trident (เช่นMaxthon , Avant Browser)

< ! doctype html> < html lang = " en " > <head> < meta charset = " utf - 8" > <title> โมเดลเฉพาะสำหรับInternet Explorer </title> </head> <body> <h1> โมเดลเฉพาะสำหรับInternet Explorer </h1><p> เฮ้โจ! </p>​​<script> var heyJoe = function () { window.alert ( " Hey Joe!" ) ; } // เพิ่มตัวจัดการเหตุการณ์document.attachEvent ( " onclick" , heyJoe ); // เพิ่มตัวจัดการเหตุการณ์อีกตัว window.attachEvent ( " onload" , heyJoe ); // ลบตัวจัดการเหตุการณ์ที่เพิ่งเพิ่มwindow.detachEvent ( " onload " , heyJoe ) ; </script></body> </html>​​​​

• ไดเทล, ฮาร์วีย์. (2002). อินเทอร์เน็ตและเวิลด์ไวด์เว็บ: วิธีการเขียนโปรแกรม (ฉบับที่สอง). ISBN 0-13-030897-8
• องค์กร Mozilla (2009). เอกสารอ้างอิงเหตุการณ์ DOM . สืบค้นเมื่อ 25 สิงหาคม 2009.
• Quirksmode (2008). ตารางความเข้ากันได้ของเหตุการณ์ . สืบค้นเมื่อ 27 พฤศจิกายน 2008.
• http://www.sitepen.com/blog/2008/07/10/touching-and-gesturing-on-the-iphone/

• ข้อกำหนดเหตุการณ์ระดับ 2 ของ Document Object Model (DOM)
• ร่างเอกสารการทำงานของเหตุการณ์ระดับ 3 ของ Document Object Model (DOM)
• DOM4: กิจกรรม (ฉบับร่างบรรณาธิการ)
• ร่างเอกสารการทำงานของ UI Events
• Pointer Events ข้อเสนอแนะผู้สมัคร W3C
• MSDN PointerEvent
• domevents.dev - เครื่องมือแสดงภาพเพื่อเรียนรู้เกี่ยวกับ DOM Events ผ่านการสำรวจ
• ตัวอย่าง JS fiddle สำหรับการส่งต่อและดักจับเหตุการณ์ (Event Bubbling and Capturing)