การไหลของเหตุการณ์: มีสองประเภท เช่นคือการไหลของฟองสบู่ เมื่อเหตุการณ์เริ่มต้นจะได้รับจากองค์ประกอบที่เฉพาะเจาะจงที่สุดและเผยแพร่ทีละขั้นตอนไปยังโหนดที่เฉพาะเจาะจงน้อยลง (องค์ประกอบ -> เอกสาร) ในทางตรงกันข้ามกระแสจับภาพเหตุการณ์ของ NetScape
เหตุการณ์ระดับ DOM2 กำหนดว่าการไหลของเหตุการณ์มีสามขั้นตอน: ขั้นตอนการจับเหตุการณ์ขั้นตอนเป้าหมายและขั้นตอนฟองเหตุการณ์
เวลาส่วนใหญ่เป็นเฟสฟองของการเพิ่มตัวจัดการเหตุการณ์ในสตรีมเหตุการณ์ เกาลัดของ Eventutil:
var eventutil = {addHandler: ฟังก์ชัน (องค์ประกอบ, ประเภท, ตัวจัดการ) {ถ้า (element.addeVentListener) {element.addeVentListener (ประเภท, handler, false); } อื่นถ้า (element.attachevent) {element.attachevent ('on' + type, handler); // ie8} else {element ['on' + type] = handler; }}, removeHandler: function () {... }}มาดูรายละเอียดด้านล่าง:
ตัวจัดการเหตุการณ์ระดับ DOM0
วิธีดั้งเดิมในการระบุตัวจัดการเหตุการณ์ผ่าน JavaScript คือการกำหนดฟังก์ชั่นให้กับแอตทริบิวต์ตัวจัดการเหตุการณ์
แต่ละองค์ประกอบมีแอตทริบิวต์ตัวจัดการเหตุการณ์ของตัวเองซึ่งมักจะเป็นตัวพิมพ์เล็กทั้งหมดเช่น onclick การตั้งค่าค่าของคุณสมบัตินี้เป็นฟังก์ชั่นสามารถระบุตัวจัดการเหตุการณ์
var btn = document.getElementById ('mybtn'); // เพิ่มตัวจัดการเหตุการณ์ btn.onclick = function () {การแจ้งเตือน (นี่); // เป็นองค์ประกอบ Dom Btn}; // ลบตัวจัดการเหตุการณ์ btn.onclick = null;ข้อดี: 1. ง่าย 2. มันมีข้อดีของเบราว์เซอร์ข้าม
ข้อเสีย: ไม่ได้ระบุตัวจัดการเหตุการณ์ก่อนที่รหัสจะทำงานดังนั้นรหัสเหล่านี้จะอยู่ด้านหลังปุ่มในหน้าดังนั้นจึงเป็นไปได้ที่จะไม่ได้รับการตอบสนองหลังจากระยะเวลาหนึ่งและประสบการณ์ของผู้ใช้จะแย่ลง
ตัวจัดการเหตุการณ์ระดับ DOM2
มีการกำหนดสองวิธีในการจัดการการดำเนินการที่ระบุและลบตัวจัดการเหตุการณ์: addeventListener () และ removeEventListener () พารามิเตอร์สามตัว 1. ชื่อของเหตุการณ์ที่จะประมวลผล 2. ฟังก์ชั่นเป็นตัวจัดการเหตุการณ์ 3. ค่าบูลีน ค่าบูลีนสุดท้ายเป็นจริงซึ่งหมายความว่าตัวจัดการเหตุการณ์ถูกเรียกในขั้นตอนการจับภาพและเท็จหมายความว่าตัวจัดการเหตุการณ์ถูกเรียกในเวทีฟอง
// เพิ่มตัวจัดการเหตุการณ์หลายตัว var btn = document.getElementById ('mybtn'); btn.addeventListener ('คลิก', ฟังก์ชั่น () {แจ้งเตือน (นี่); // เป็นองค์ประกอบ dom btn}, false); btn.addeventlistener ('คลิก', ฟังก์ชั่น () btn.removeeVentListener ('คลิก', function () {// ฟังก์ชั่นที่ไม่ระบุชื่อไม่สามารถลบออกได้การลบล้มเหลว}, เท็จ); // rewrite var handler = function () {Alert (this.id); - btn.addeventListener ('คลิก', handler, false); // ลบตัวจัดการเหตุการณ์อีกครั้ง btn.removeeVentListener ('คลิก', handler, false); // ลบสำเร็จตัวจัดการเหตุการณ์ทั้งสองนี้ถูกไล่ออกตามลำดับที่เพิ่มเข้ามา ในกรณีส่วนใหญ่ตัวจัดการเหตุการณ์จะถูกเพิ่มเข้าไปในขั้นตอนเดือดของกระแสเหตุการณ์ซึ่งสามารถเข้ากันได้สูงสุดกับเบราว์เซอร์เวอร์ชันต่างๆ
ข้อดี: องค์ประกอบหนึ่งสามารถเพิ่มตัวจัดการเหตุการณ์หลายตัว
ข้อเสีย: IE8 และด้านล่างเบราว์เซอร์ไม่รองรับตัวจัดการเหตุการณ์ระดับ DOM2 (รวมถึง IE8)
เช่นตัวจัดการกิจกรรม
มีการกำหนดสองวิธีคล้ายกับด้านบน: attaineVent (), detachevent () สองวิธีนี้ได้รับพารามิเตอร์สองตัวเดียวกัน: ชื่อตัวจัดการเหตุการณ์และฟังก์ชั่นตัวจัดการเหตุการณ์ เนื่องจาก IE8 และเวอร์ชันก่อนหน้านี้รองรับฟองสบู่เหตุการณ์เท่านั้นตัวจัดการเหตุการณ์ที่เพิ่มผ่าน DetacheVent () จะถูกเพิ่มลงในเฟสฟอง
var btn = document.getElementById ('mybtn'); btn.attachevent ('onclick', ฟังก์ชั่น () {แจ้งเตือน (นี่); // window}); btn.attachevent ('onclick', funciton () {Alert ("Hello, World");คลิกที่ปุ่มลำดับการเรียกของตัวจัดการเหตุการณ์ทั้งสองนี้ตรงข้ามกับข้างต้น ไม่ได้ถูกกระตุ้นในลำดับที่มีการเพิ่มตัวจัดการเหตุการณ์ในทางตรงกันข้าม
ข้อดี: องค์ประกอบหนึ่งสามารถเพิ่มตัวจัดการเหตุการณ์หลายตัว
ข้อเสีย: สนับสนุนเท่านั้นเช่น
ตัวจัดการกิจกรรมข้ามเบราว์เซอร์
เช่น:
var eventUtil = {addHandler: ฟังก์ชั่น (ele, type, handler) {if (ele.addeventListener) {ele.addeventListener (ประเภท, handler, false); } อื่นถ้า (ele.attachevent) {ele.attachevent ('on' + type, handler); } else {ele ['on' + type] = handler}}, removehandler: ฟังก์ชั่น (ele, type, handler) {ถ้า (ele.removeeVentListener) {ele.removeeVentListener (ประเภท, handler, false); } อื่นถ้า (ele.detachevent) {ele.detachevent ('on' + type, handler); } else {ele ['on' + type] = null; -