ทริกเกอร์เหตุการณ์สามารถเข้าใจได้ดีอย่างแท้จริงและใช้ในการกระตุ้นเหตุการณ์ แต่เพื่อนบางคนที่ไม่ได้ใช้พวกเขาอาจสับสน เหตุการณ์มักจะถูกเรียกโดยการดำเนินงานจริงของผู้ใช้ในหน้าหรือไม่? มุมมองนี้ไม่ถูกต้องอย่างสมบูรณ์เนื่องจากเหตุการณ์บางอย่างจะต้องดำเนินการโดยโปรแกรมเช่นเหตุการณ์ที่กำหนดเองและเหตุการณ์ที่กำหนดเองบางอย่างของกรอบ Ajax ของ JQuery จะต้องดำเนินการโดยทริกเกอร์เหตุการณ์ แน่นอนในบางกรณีพิเศษมันสะดวกกว่าที่จะใช้กิจกรรมทริกเกอร์เพื่อกระตุ้นเหตุการณ์มากกว่าการเรียกเหตุการณ์โดยการดำเนินการจริงของผู้ใช้
เบราว์เซอร์มีวิธีการดั้งเดิมเพื่อสนับสนุนการใช้งานทริกเกอร์เหตุการณ์ แต่มีความแตกต่างกันอย่างมากในความเข้ากันได้ ปัญหาความเข้ากันได้นี้คาดว่าจะสมบูรณ์ IE มีวิธีการของตัวเองและเบราว์เซอร์มาตรฐานอื่น ๆ ก็มีชุดของวิธีการ ไม่ต้องพูดถึงว่าวิธีการที่ดีหรือไม่ดีสำหรับนักพัฒนาเว็บมันเป็นการทรมานสำหรับนักพัฒนาเพื่อพัฒนาวิธีการหลายวิธี IE สนับสนุนวิธี FireVent ในการใช้งานการเรียกใช้กิจกรรมเบราว์เซอร์มาตรฐานสนับสนุน Dispatchevent เพื่อใช้งานการกระตุ้นเหตุการณ์และทั้งสองสนับสนุน IE9 ต่อไปนี้เป็นซอร์สโค้ดจาก prototype.js (จริง ๆ แล้วฉันคัดลอกมาจากบล็อกของ Situ Zhengmei):
การคัดลอกรหัสมีดังนี้:
var firevent = function (องค์ประกอบ, เหตุการณ์) {
if (document.createeeVentObject) {
// IE เบราว์เซอร์รองรับวิธี FireVent
var evt = document.createeeVentObject ();
return element.fireevent ('on'+event, evt)
-
อื่น{
// เบราว์เซอร์มาตรฐานอื่น ๆ ใช้วิธี Dispatchevent
var evt = document.createeevent ('htmlevents');
// initEvent ยอมรับ 3 พารามิเตอร์:
// ประเภทเหตุการณ์ไม่ว่าจะเป็นเดือดไม่ว่าจะเป็นการปิดกั้นพฤติกรรมเริ่มต้นของเบราว์เซอร์
evt.initevent (เหตุการณ์จริงจริง);
return! element.dispatchevent (evt);
-
-
วิธีการข้างต้นเข้ากันได้กับเบราว์เซอร์กระแสหลักเพื่อใช้ฟังก์ชั่นของทริกเกอร์เหตุการณ์ อย่างไรก็ตามสำหรับระบบการประมวลผลเหตุการณ์ที่ห่อหุ้มบางอย่างเช่นโมดูลเหตุการณ์ของ jQuery มันไม่ง่ายอย่างนั้นและสามารถนำไปใช้ได้ผ่านการจำลองเท่านั้น ฉันเขียนระบบประมวลผลเหตุการณ์ที่ง่ายมากก่อนหน้านี้และเมื่อเร็ว ๆ นี้พบกับความต้องการกิจกรรมที่กำหนดเองดังนั้นฉันจึงจำลองทริกเกอร์เหตุการณ์ตามระบบเหตุการณ์ก่อนหน้านี้และรหัสมีดังนี้:
การคัดลอกรหัสมีดังนี้:
-
* ทริกเกอร์เหตุการณ์
* @param {Object} องค์ประกอบ Dom
* @param {สตริง / วัตถุ} ประเภทเหตุการณ์ / วัตถุเหตุการณ์
* @param {array} พารามิเตอร์เพิ่มเติมที่ส่งผ่านไปยังฟังก์ชันตัวจัดการเหตุการณ์
* @param {boolean} มันเดือด
-
ทริกเกอร์: ฟังก์ชั่น (elem, เหตุการณ์, ข้อมูล, iSstopPropagation) {
var type = event.type || เหตุการณ์,
// องค์ประกอบหลักของ Bubble ไปจนถึงเอกสารหน้าต่าง
parent = elem.parentNode ||
Elem.OwnerDocument ||
elem === elem.ownerDocument && win
EventHandler = $ .data (elem, type + 'handler');
isstopPropagation = typeof data === 'บูลีน'?
ข้อมูล: (iSstopPropagation || false);
data = data && isarray (data)? ข้อมูล : [];
// สร้างวัตถุเหตุการณ์ที่กำหนดเอง
Event = typeof event === 'Object'?
เหตุการณ์ : {
ประเภท: พิมพ์,
PreventDefault: Noop,
stoppropagation: function () {
iSstopPropagation = true;
-
-
Event.target = Elem;
data.unshift (เหตุการณ์);
ถ้า (EventHandler) {
EventHandler.Call (elem, data);
-
// เรียกตัวเองซ้ำ ๆ เพื่อจำลองฟองสบู่
if (parent &&! isstoppropagation) {
data.shift ();
this.trigger (parent, event, data);
-
-
หลักการของการจำลองไม่ยาก ผูกฟังก์ชันการจัดการเหตุการณ์กับองค์ประกอบที่แน่นอน หากมีการดำเนินการจริงของการเรียกเหตุการณ์ฟังก์ชันการจัดการเหตุการณ์ที่เกี่ยวข้องจะถูกดำเนินการ ดังนั้นเพื่อให้ได้ฟังก์ชั่นของทริกเกอร์เหตุการณ์เพียงแค่ได้รับฟังก์ชั่นการจัดการเหตุการณ์ที่สอดคล้องกันและดำเนินการ นี่เป็นพื้นฐานที่สุด
เมื่อเหตุการณ์จริงเกิดขึ้นเบราว์เซอร์จะสร้างวัตถุเหตุการณ์ซึ่งมีคุณสมบัติและข้อมูลบางอย่างเมื่อเกิดเหตุการณ์ หากไม่มีเหตุการณ์จริงไม่มีวัตถุเหตุการณ์ดังนั้นรหัสข้างต้นจะสร้างวัตถุเหตุการณ์เพื่อตอบสนองฟังก์ชั่นพื้นฐานที่สุด
นอกจากนี้ยังมีเหตุการณ์ที่ฟองสบู่ หากไม่มีเหตุการณ์จริงเกิดขึ้นจะไม่มีพฤติกรรมฟอง จากนั้นหากคุณต้องการจำลองฟังก์ชั่นฟองคุณต้องค้นหาองค์ประกอบหลักอย่างต่อเนื่องและตรวจสอบว่าเหตุการณ์ประเภทเดียวกันนั้นถูกผูกไว้จนกว่าเอกสารและหน้าต่าง หากโครงสร้างมีความซับซ้อนประสิทธิภาพของวิธีการโทรแบบเรียกซ้ำนี้คาดว่าจะไม่ดีมาก
ในที่สุดก็มีพฤติกรรมเริ่มต้นของเบราว์เซอร์ ฉันคิดว่ามันค่อนข้างลำบากในการจำลองสิ่งนี้ดังนั้นปัญหาที่ฉันไม่รู้ว่าจะใช้มันได้อย่างไร ตัวอย่างเช่นการกระโดดเริ่มต้นของแท็ก A ฉันทดสอบทริกเกอร์ของ jQuery แต่มันไม่ได้ถูกนำไปใช้ แต่พฤติกรรมอื่น ๆ บางอย่างดูเหมือนจะถูกนำมาใช้ในคู่มือ API ท้ายที่สุดฟังก์ชั่นนี้ไม่สำคัญมากและฉันยังไม่ได้ทำการวิจัยเชิงลึกมากนัก