CSMJU jQuery Mobile

เมนู
ถัดไป ก่อนหน้า

4.2 Events

เหตุการณ์(Events)

   เหตุการณ์หลายๆเหตุการมักจะนำมาใช้กับ เหตุการณ์การสัมพัส,เหตุการณ์ของการใช้เมาส์ และและการณ์ของวินโดว์ ที่เกิดขึ้นบนการใช้งานของ jQuery Mobile ผู้ใช้สามารถที่จะนำเหตุการณ์เหล่านั้นเลือกมาใช้ร่วมกับเหตุการณ์ jQuery อื่นๆได้ตามความเหมาะสมโดยเลือกการใช้เมธอด live() หรือbind() 


หมายเหตุ:ใช้  $(document).bind('pageinit'), not$(document).ready()

   สิ่งแรกที่คุณจะต้องเรียนรู้ใน jQuery คือการเรียกใช้โค้ดภายในฟังก์ชัน $(document).ready() เพื่อให้DOM ดำเนินการโหลดทุกๆสิ่งโดยใช้เวลาน้อยที่สุด อย่างไรก็ตามใน jQuery Mobile จะใช้ Ajaxช่วยในการโหลดเนื้อหาจากการกดลิ้งค์ของแต่ละหน้าเข้าไปยัง DOM และDOM พร้อมที่จะรันสำหรับหน้าเพจแรกการรันโค้ดเมื่อใดก็ตามที่สร้างเพจใหม่ก็จะมีการโหลดและสร้างใหม่เช่นกัน ซึ่งคุณสามารถผูกที่เป็นเหตุการณ์ pageinit

เหตุการณ์นี้เป็นการอธิบายรายละเอียดไว้ด้านล่างของหน้านี้


หมายเหตุ: $(document).bind('pagecreate') vs $(document).bind('pageinit')

   ในเวอร์ชันเบต้า2 จะผูกเหตุการณ์ pagecreate ไว้กับการเรียกเมธอดของ widget โดยตรงส่งผลให้ผู้ใช้ที่จะผูก pagecreate ใน mobileint 
จะพบการดำเนินการของการผูกก่อนการปรับปรุงการมาร์กอัพของแต่ละปลั๊กอิน

Touch events


เตือน : การระมัดระวังการใช้ vclick

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


การยกเลิกการคลิกขององค์ประกอบเริ่มต้น

   แอปพริเคชัน สามารถเรียก preventDefault() บนเหตุการณ์ vclick  ที่จะยกเลิกการคลิกขององค์ประกอบพื้นฐานของลักษณะการใช้เมาส์เรียก  preventDefault() บนเหตุการณ์ vclick เท่ากับเรียก preventDefault() ในเหตุการณ์คลิกจริงระหว่างขั้นตอนเหตุการณ์การ bubble ส่วนอุปกรณ์การสัมผัสนั้นเป็นบิตที่มีความซับซ้อนมากขึ้นตั้งแต่เหตุการณ์ของการคลิกจริงเป็นการส่งประมาณ 300ms ภายหลังเหตุการณ์ vclick สำหรับอุปกรณ์การสัมผัสการเรียก preventDefault() ในเหตุการณ์ vclick เรียกโค้ดบางส่วนในปลั๊กอิน vmouse พยายามที่จะทำให้ร่วมกับเหตุการณ์การคลิกถัดไปที่ได้รับการส่งโดยเบราว์เซอร์ ในระหว่างขั้นตอนเหตุการณ์การ capture และเรียก  preventDefault() และ stopPropagation() ในนั้นดังที่ได้กล่าวข้างต้นในการเตือนบางครั้งเป็นเรื่องยากที่จะให้ตรงกันกับเหตุการณ์การสัมผัสกับเหตุการณ์เมาส์ที่สอดคล้องกันเพราะเป้าหมายต่างกัน ด้วยเหตุนี้ปลั๊กอิน vmouse ยังกลับไปพยายามระบุเหตุการณ์คลิกที่สอดคล้องกันด้วยการ coordinates และยังคงมีกรณีที่มีความต้องการที่ตรงกันและมีการแยกแยะcoordinate ที่ผิดพลาดซึ่งผลลัพท์ในเหตุการณ์ ซึ่งส่งผลให้ในเหตุการณ์คลิกนั้นเริ่มที่จะส่งและเรียกการ action กลับคืนเป็นค่าเริ่มต้นขององค์ประกอบนั้นหรือในกรณีที่เนื้อหาได้มีการเลื่อน
หรือเปลี่ยนแปลงการเรียกคลิกบนความแตกต่างขององค์ประกอบหากเหตุการณ์นี้เกิดขึ้นเป็นปกติเพื่อที่
จะให้องค์ประกอบ/การควบคุม ขอแนะนำให้คุณใช้การคลิกเพื่อที่จะเรียก action ของคุณ

จำลองเหตุการณ์เมาส์ที่สามารถกำกนดได้ดังนี้

การปรับเปลี่ยนเหตุการณ์(Orientation change event)

   จะมีการเรียกเมื่อมีการเปลี่ยนแปลงการวางแนวอุปกรณ์ (โดยการหมุนในแนวตั้งหรือแนวนอน)เมื่อผูกกับเหตุการณ์นี้จะเรียกฟังก์ชันที่มีอาร์กิวเมนต์กลับ
Note:ในปัจจุบันเราได้ผูกไว้กับเหตุการณ์การปรับขนาดเมื่อ orientationchange ไม่สนับสนุน nativelyหรือเมื่อ $.mobile.orientationChangeEnabled กำหนดค่าเป็น false 


การควบคุมจังหวะการปรับเปลี่ยน

   การควบคุมการปรับเปลี่ยนที่มีความสัมพันธ์กับการเปลี่ยนแปลงของลูกค้าที่สูงและขนาดความกว้างที่เป็นข้อแตกต่างกันระหว่างเบราว์เซอร์แม้ว่าการดำเนินงานปัจจุบันจะทำให้ค่าสำหรับ event.orientation มาจาก window.orientation ซึ่งหมายความว่าถ้าหากการผูกเหตุการณ์ของคุณจะต้องขึ้นอยู่กับความสูงและความกว้างของค่าที่คุณต้องการที่จะปิดการใช้งานการ orientationChange ทั้งหมดด้วยกันกับ $.mobile.orientationChangeEnabled = false เพื่อการปรับขนาดโค้ด fallback ได้เรียกการผูกเหตุการณ์นั้นของคุณ

เหตุการณ์ Scroll(Scroll events)

scrollstart - เรียกใช้เมื่อเริ่มScroll

Note:อุปกรณ์ iOS หยุดการจัดการ DOM ระหว่างการเลื่อนจะใช้อีกครั้งเมื่อเสร็จสิ้นการเลื่อน ซึ่งเรากำลังหาทางที่จะจัดการให้ DOM ใช้ก่อนการเลื่อน

scrollstop - เรียกใช้เมื่อมีการเลื่อนเสร็จสิ้น

เหตุการณ์การโหลดหน้าเพจ (Page load events)

   เมื่อใดก็ตามที่เป็นการโหลดหน้าเพจภายนอกเข้าสู่ application ใน DOM จะมี 2 เหตุการณ์ที่เกี่ยวข้องคือ

pagebeforeload

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


$( document ).bind( "pagebeforeload", function( event, data ){
	// Let the framework know we're going to handle the load.
	event.preventDefault();
	// ... load the document then insert it into the DOM ...
	// at some point, either in this callback, or through
	// some other async means, call resolve, passing in
	// the following args, plus a jQuery collection object
	// containing the DOM element for the page.
	data.deferred.resolve( data.absUrl, data.options, page );
});
or rejected like this:
$( document ).bind( "pagebeforeload", function( event, data ){
	// Let the framework know we're going to handle the load.
	event.preventDefault();
	// ... load the document then insert it into the DOM ...
	// at some point, if the load fails, either in this
	// callback, or through some other async means, call
	// reject like this:
	data.deferred.reject( data.absUrl, data.options );
});

 

© CSMJU