กรอบงาน JavaScript ทุกอันใช้การจัดการเหตุการณ์ข้ามเบราว์เซอร์ กระตุ้นให้คุณย้ายออกจากการต่อท้ายเหตุการณ์แบบอินไลน์แบบเก่า และใช้แนวทางเชิงเส้นที่มีประสิทธิภาพ ดูตัวอย่าง jQuery ในรายการ 6 ที่ใช้เหตุการณ์โฮเวอร์เพื่อเน้นองค์ประกอบ div
รายการ 6: การแนบเหตุการณ์โฮเวอร์โดยใช้ jQuery
$('#the-box').hover(function() {
$(this).addClass('highlight');
}, การทำงาน() {
$(this).removeClass('highlight');
-
นี่เป็นกิจกรรมพิเศษของ jQuery และคุณจะพบว่ามันมีสองฟังก์ชัน ฟังก์ชันแรกจะถูกเรียกเมื่อเหตุการณ์ onMouseOver เริ่มทำงาน และฟังก์ชันที่สองจะถูกเรียกเมื่อเหตุการณ์ onMouseOut เริ่มทำงาน เนื่องจากไม่มีเหตุการณ์ DOM มาตรฐานสำหรับโฮเวอร์ มาดูเหตุการณ์ทั่วไปเช่นการคลิก (ลองดูรายการ 7):
รายการ 7: การแนบเหตุการณ์การคลิกโดยใช้ jQuery
$('#the-button').คลิก(ฟังก์ชั่น() {
alert('คุณกดปุ่มแล้ว!');
-
อย่างที่คุณเห็น มีพารามิเตอร์ฟังก์ชันเพียงตัวเดียวในอินสแตนซ์ เหตุการณ์ส่วนใหญ่ใน jQuery ได้รับการจัดการในลักษณะเดียวกัน โดยใช้ตัวจัดการเหตุการณ์ใน jQuery บริบทจะอ้างถึงวัตถุที่ทริกเกอร์เหตุการณ์ เฟรมเวิร์กบางตัวไม่ทำงานในลักษณะนี้ ในกรณีของ Prototype โค้ดใน Listing 7 จะดูเหมือนกับ Listing 8
รายการ 8: การแนบเหตุการณ์การคลิกโดยใช้ Prototype
$('the-button').observe('click', function(e) {
alert('คุณกดปุ่มแล้ว!');
-
สิ่งแรกที่คุณจะสังเกตเห็นคือไม่มีฟังก์ชันการคลิก แต่เป็นฟังก์ชันการสังเกตที่ยอมรับพารามิเตอร์เหตุการณ์ก่อนที่จะอ้างอิงตัวเอง นอกจากนี้ คุณจะสังเกตเห็นว่าฟังก์ชันยอมรับพารามิเตอร์ e โดยที่บริบทอ้างถึงองค์ประกอบที่ทำให้เกิดเหตุการณ์ หากต้องการดูวิธีการทำงาน เรามาเขียนโค้ดใหม่ในรายการ 6 โดยใช้ Prototype (ดูรายการ 9)
รายการ 9: การแนบเหตุการณ์โฮเวอร์โดยใช้ Prototype
$('the-box').observe('mouseover', function(e) {
var el = Event.element(e);
el.addClassName('ไฮไลท์');
-
$('the-box').observe('mouseout', function(e) {
var el = Event.element(e);
el.removeClassName('ไฮไลท์');
-
jQuery นั้นแตกต่างออกไป คุณเพียงแค่ใช้ฟังก์ชัน $ เพื่อรับตัวแปรบริบท ในขณะที่ไลบรารี Prototype ใช้ฟังก์ชัน Event.element() นอกจากนี้ คุณสังเกตเห็นว่าคุณต้องแยกเหตุการณ์ mouseover และ mouseout ออก
จากบทช่วยสอนบางส่วนในบทความนี้ คุณจะเห็นว่าฟังก์ชันต่างๆ ได้รับการสร้างขึ้นในบรรทัดและไม่ได้ตั้งชื่อ ซึ่งหมายความว่าไม่สามารถใช้ซ้ำได้ และตัวอย่างโฮเวอร์ของ Prototype ยังเปิดโอกาสให้เราดูวิธีใช้ฟังก์ชันที่มีชื่ออีกด้วย รายการ 10 แสดงให้เห็นถึงวิธีการนี้
รายการ 10: การปรับปรุงเหตุการณ์โฮเวอร์โดยใช้ Prototype
คุณจะสังเกตเห็นว่า ณ จุดนี้ คุณจะต้องกำหนดฟังก์ชันเดียวเท่านั้น มันถูกเรียกโดยทั้งเหตุการณ์ mouseover และ mouseout ฟังก์ชันนี้กำหนดว่าองค์ประกอบมีชื่อคลาส "เน้น" หรือไม่ และเพิ่มหรือลบออกตามผลลัพธ์ คุณจะสังเกตเห็นว่าพารามิเตอร์ e ถูกส่งผ่านโดยปริยาย กล่าวอีกนัยหนึ่ง คุณส่งผ่านอาร์กิวเมนต์ที่ไม่ชัดเจนไปยังฟังก์ชันการสังเกต
ที่อยู่พิมพ์ซ้ำ: http://www.denisdeng.com/?p=720
ที่อยู่เดิม: http://www.ibm.com/developerworks/web/library/wa-jsframeworks/index.html
ฟังก์ชั่นtoggleClass (e) {
var el = Event.element(e);
ถ้า(el.hasClassName('ไฮไลท์'))
row.removeClassName('ไฮไลท์');
อื่น
row.addClassName('ไฮไลท์');
-
$('the-box').observe('mouseover', toggleClass);
$('the-box').observe('mouseout', toggleClass);