เราสามารถปรับแต่งกิจกรรมเพื่อให้ได้การพัฒนาที่ยืดหยุ่นมากขึ้น เหตุการณ์อาจเป็นเครื่องมือที่ทรงพลังมากเมื่อใช้อย่างถูกต้อง การพัฒนาตามเหตุการณ์มีข้อได้เปรียบมากมาย (แนะนำในภายหลัง)
ฟังก์ชั่นที่มีเหตุการณ์ที่กำหนดเองคือเหตุการณ์ customevent และ dispatchevent
ปรับแต่งเหตุการณ์โดยตรงโดยใช้ตัวสร้างเหตุการณ์:
var event = เหตุการณ์ใหม่ ('build'); // ฟังสำหรับ event.elem.addeventListener ('build', ฟังก์ชั่น (e) {... }, false); // ส่ง event.elem.dispatchevent (เหตุการณ์);CustomEvent สามารถสร้างเหตุการณ์ที่กำหนดเองได้สูงกว่าและยังสามารถมาพร้อมกับข้อมูลบางอย่าง การใช้งานเฉพาะมีดังนี้:
var myEvent = new CustomEvent (EventName, Options);
ตัวเลือกสามารถอยู่ที่ไหน:
{รายละเอียด: {... }, ฟอง: จริง, ยกเลิกได้: false}รายละเอียดสามารถจัดเก็บข้อมูลการเริ่มต้นบางอย่างและสามารถเรียกได้เมื่อทริกเกอร์ คุณสมบัติอื่น ๆ คือการกำหนดว่าเหตุการณ์มีเดือดและฟังก์ชั่นอื่น ๆ หรือไม่
เหตุการณ์ในตัวจะถูกเรียกใช้โดยเบราว์เซอร์ตามการดำเนินการบางอย่างและเหตุการณ์ที่กำหนดเองจะต้องถูกเรียกใช้ด้วยตนเอง ฟังก์ชั่น Dispatchevent ใช้เพื่อทริกเกอร์เหตุการณ์:
Element.Dispatchevent (CustomEvent);
รหัสข้างต้นระบุว่าเหตุการณ์ที่กำหนดเองจะถูกเรียกใช้กับองค์ประกอบ ใช้ร่วมกัน:
// เพิ่มเหตุการณ์ที่เหมาะสม listenerobj.addeventListener ("cat", ฟังก์ชั่น (e) {กระบวนการ (e.detail)}); // สร้างและส่งเหตุการณ์ eventvar = ใหม่ customevent ("cat", {"รายละเอียด": {"Hazcheeseburger": true}});ใช้กิจกรรมที่กำหนดเองเพื่อให้ความสนใจกับปัญหาความเข้ากันได้ แต่การใช้ jQuery นั้นง่ายกว่ามาก:
// ผูกมัดเหตุการณ์ที่กำหนดเอง $ (องค์ประกอบ) .on ('mycustomevent', function () {}); // trigger event $ (องค์ประกอบ) .trigger ('mycustomevent'); นอกจากนี้คุณสามารถส่งข้อมูลพารามิเตอร์เพิ่มเติมเมื่อเรียกเหตุการณ์ที่กำหนดเอง: $ ("p") .on ("mycustomevent", ฟังก์ชั่น (เหตุการณ์, myname) {$ (นี่). text (myname + ", สวัสดี!");}); $ ("ปุ่ม")เหตุการณ์ที่กำหนดเอง JavaScript นั้นแตกต่างจากเหตุการณ์ที่ปรับแต่งด้วยตนเองเช่นคลิกและส่ง ก่อนที่จะอธิบายถึงประโยชน์ของเหตุการณ์ที่กำหนดเองลองมาดูตัวอย่างของเหตุการณ์ที่กำหนดเอง:
<div id = "testbox"> </div> // สร้างเหตุการณ์ var evt = document.createEvent ('event'); // กำหนดประเภทเหตุการณ์ evt.initevent ('customevent', จริง, จริง); // ฟังเหตุการณ์ var obj = document.getElementById ('testbox'); ทริกเกอร์ ');}, เท็จ);สำหรับเอฟเฟกต์เฉพาะคุณสามารถตรวจสอบการสาธิต ป้อน obj.dispatchevent (EVT) ในคอนโซล คุณจะเห็นได้ว่าเอาต์พุต "เหตุการณ์ที่กำหนดเองทริกเกอร์" ในคอนโซลซึ่งบ่งชี้ว่าเหตุการณ์ที่กำหนดเองถูกเรียกใช้งานสำเร็จ
ในกระบวนการนี้เมธอด CreateVent จะสร้างเหตุการณ์ที่ว่างเปล่า EVT จากนั้นใช้วิธีการเริ่มต้นเพื่อกำหนดประเภทของเหตุการณ์เป็นเหตุการณ์ที่กำหนดเองที่ตกลงกันไว้แล้วฟังองค์ประกอบที่เกี่ยวข้อง จากนั้นใช้ Dispatchevent เพื่อทริกเกอร์เหตุการณ์
ถูกต้องกลไกของเหตุการณ์ที่กำหนดเองเป็นเหมือนเหตุการณ์ปกติ - การฟังเหตุการณ์การเขียนการโทรกลับและดำเนินการโทรกลับหลังจากเรียกเหตุการณ์ แต่ความแตกต่างคือเหตุการณ์ที่กำหนดเองถูกควบคุมอย่างสมบูรณ์โดยเราซึ่งหมายความว่ามีการใช้งาน decoupling JavaScript เราสามารถควบคุมการทำงานที่เกี่ยวข้องหลายอย่าง แต่มีเหตุผลโดยใช้กลไกของเหตุการณ์ที่กำหนดเอง
แน่นอนคุณอาจเดาได้ว่ารหัสข้างต้นไม่มีผลใน IE รุ่นที่ต่ำกว่า ในความเป็นจริง CreateVent () ไม่ได้รับการสนับสนุนใน IE8 และด้านล่างของ IE แต่มีวิธี Private FireVent () ของ IE แต่น่าเสียดายที่ FireVent รองรับการกระตุ้นเหตุการณ์มาตรฐานเท่านั้น ดังนั้นเราสามารถใช้วิธีการพิเศษและเรียบง่ายเพียงวิธีเดียวในการเรียกเหตุการณ์ที่กำหนดเอง
// type เป็นเหตุการณ์ที่กำหนดเองเช่น type = 'customEvent' การเรียกกลับเป็นฟังก์ชันการโทรกลับที่กำหนดโดยนักพัฒนา OBJ [type] = 0; obj [type] ++; obj.attacheVent ('onPropertyChange', ฟังก์ชั่น (เหตุการณ์) {ถ้า (event.propertyName == ประเภท) {callback.call (obj);}});หลักการของวิธีนี้คือการเพิ่มคุณสมบัติที่กำหนดเองให้กับ DOM และฟังเหตุการณ์ PropertyChange ขององค์ประกอบ เมื่อค่าของคุณสมบัติบางอย่างในการเปลี่ยนแปลง DOM การเรียกกลับ PropertyChange จะถูกเรียกใช้และจากนั้นในการเรียกกลับจะถูกกำหนดว่าคุณสมบัติที่เปลี่ยนแปลงเป็นคุณสมบัติที่กำหนดเองของเราหรือไม่ ถ้าเป็นเช่นนั้นการโทรกลับที่กำหนดโดยนักพัฒนาจะถูกดำเนินการ สิ่งนี้จำลองกลไกของเหตุการณ์ที่กำหนดเอง
เพื่อเปิดใช้งานกลไกของเหตุการณ์ที่กำหนดเองเพื่อร่วมมือกับการฟังและจำลองการกระตุ้นเหตุการณ์มาตรฐานได้มีกลไกเหตุการณ์ที่สมบูรณ์ที่นี่ กลไกนี้รองรับการตรวจสอบเหตุการณ์มาตรฐานและเหตุการณ์ที่กำหนดเองและลบการดำเนินการฟังและจำลองการดำเนินการกระตุ้น ควรสังเกตว่าเพื่อให้ตรรกะของรหัสชัดเจนขึ้นได้ตกลงกันว่าเหตุการณ์ที่กำหนดเองมีคำนำหน้าของ 'กำหนดเอง' (ตัวอย่างเช่น: CustomTest, CustomAlert)
/ *** @description มีการฟังเหตุการณ์การลบและการจำลองเหตุการณ์ทริกเกอร์การเรียกสายโซ่สนับสนุน**/ (ฟังก์ชั่น (หน้าต่าง, ไม่ได้กำหนด) {var ev = window.ev = หน้าต่าง $ = ฟังก์ชั่น (องค์ประกอบ) {return ev.fn.init ใหม่ == 1)? _that.element.addeventListener (พิมพ์, การโทรกลับ, เท็จ); 0; _that.element ['callback' + callback]) {_that.element ['callback' + callback] = fnev; _that;}, /*** ลบเหตุการณ์การฟัง** @param {สตริง} ประเภทเหตุการณ์ที่ฟัง* @param {function} ฟังก์ชั่นการเรียกกลับการเรียกกลับ* /ลบ: ฟังก์ชั่น (พิมพ์, callback) {var _that = this; _that.element.removeeVentListener (พิมพ์, โทรกลับ, เท็จ); _that.element.detachevent ('onpropertychange', _that.element ['callback' + การเรียกกลับ]); / *** @supporty สำหรับผู้อื่น* / _That.Element ['on + type] = null;} return _that; if (_that.element.dispatchevent) {// สร้างเหตุการณ์ var evt = document.createVent ('เหตุการณ์'); type.indexof ('custom')! = -1) {_that.element [type] ++; กรณีทดสอบ 1 (การทดสอบเหตุการณ์ที่กำหนดเอง) // กรณีทดสอบ 1 (การทดสอบเหตุการณ์ที่กำหนดเอง) // แนะนำกลไกเหตุการณ์ // ... // catch domvar testbox = document.getElementById ('testbox'); // ฟังก์ชั่น callback 1function triggerEvent () {console.log Custom Event CustomConsole ');} // encapsulation testbox = $ (testbox); // ผูกฟังก์ชันการโทรกลับสองฟังก์ชั่นในเวลาเดียวกันรองรับการเรียกสายโซ่ไปยัง testbox.add (' customconsole ', triggerEvent) .add (' customconsole ', triggerAgain);รหัสที่สมบูรณ์อยู่ในการสาธิต
หลังจากเปิดการสาธิตแล้ว call testbox.trigger ('customconsole') ในคอนโซลเพื่อทริกเกอร์เหตุการณ์ที่กำหนดเองด้วยตัวเอง คุณจะเห็นว่าคอนโซลส่งออกสองพรอมต์จากนั้นป้อน testbox.remove ('customconsole', triggeragain) เพื่อลบผู้ฟังถัดไป ในเวลานี้ให้ใช้ testbox.trigger ('customconsole') เพื่อทริกเกอร์เหตุการณ์ที่กำหนดเอง คุณจะเห็นว่าคอนโซลจะส่งออกเฉพาะหนึ่งครั้งนั่นคือผู้ฟังรายต่อไปจะถูกลบออกได้สำเร็จ ฟังก์ชั่นทั้งหมดของกลไกเหตุการณ์ทำงานตามปกติ