ตัวอย่าง
แนบเหตุการณ์คลิกไปที่ <p> องค์ประกอบ:
$("p").on("click", function(){
alert("The
paragraph was
clicked.");
}); ลองตัวเอง» ความหมายและการใช้งาน
on() วิธีการยึดติดอย่างใดอย่างหนึ่งหรือเหตุการณ์อื่น ๆ รถยกสำหรับองค์ประกอบที่เลือกและองค์ประกอบของเด็ก
ในฐานะของ jQuery รุ่น 1.7 ที่ on() วิธีการคือการเปลี่ยนใหม่สำหรับ bind(), live() และ delegate() วิธีการ วิธีการนี้จะนำจำนวนมากของความสอดคล้องกับ API และเราขอแนะนำให้คุณใช้วิธีนี้มันช่วยลดความยุ่งยากฐานรหัส jQuery
หมายเหตุ: ตัวจัดการเหตุการณ์ที่แนบมาใช้ on() วิธีการจะทำงานให้องค์ประกอบทั้งในปัจจุบันและอนาคต (เช่นองค์ประกอบใหม่ที่สร้างขึ้นโดยสคริปต์)
เคล็ดลับ: เมื่อต้องการเอาตัวจัดการเหตุการณ์ใช้ off() วิธีการ
เคล็ดลับ: การแนบเหตุการณ์ที่จะทำงานครั้งเดียวแล้วเอาตัวเองให้ใช้ one() วิธีการ
วากยสัมพันธ์
$(selector).on(event,childSelector,data,function,map)
| พารามิเตอร์ | ลักษณะ |
|---|---|
| event | จำเป็นต้องใช้ ระบุหนึ่งหรือมากกว่า event(s) หรือ namespaces จะแนบไปกับองค์ประกอบที่เลือก ค่าเหตุการณ์หลายถูกแยกออกจากพื้นที่ จะต้องเป็นเหตุการณ์ที่ถูกต้อง |
| childSelector | ไม่จำเป็น ระบุว่าการจัดการเหตุการณ์ควรจะยึดติดอยู่กับองค์ประกอบของเด็กที่ระบุ (และไม่เลือกตัวเองเหมือนที่เลิกใช้ delegate() วิธีการ) |
| data | ไม่จำเป็น ระบุข้อมูลเพิ่มเติมที่จะผ่านไปพร้อมกับฟังก์ชั่น |
| function | จำเป็นต้องใช้ ระบุฟังก์ชันการทำงานเมื่อมีเหตุการณ์เกิดขึ้น |
| map | ระบุเหตุการณ์แผนที่ ( {event:function, event:function, ...}) มีหนึ่งหรือเหตุการณ์อื่น ๆ อีกมากมายที่จะแนบไปกับองค์ประกอบที่เลือกและฟังก์ชั่นการทำงานเมื่อมีเหตุการณ์เกิดขึ้น |
ลองตัวเอง - ตัวอย่าง
เปลี่ยนจาก bind() เพื่อ on()
วิธีการใช้งาน on() เพื่อให้บรรลุผลเช่นเดียวกับ bind()
เปลี่ยนจาก delegate() เพื่อ on()
วิธีการใช้งาน on() เพื่อให้บรรลุผลเช่นเดียวกับ delegate()
เปลี่ยนจาก live() เพื่อ on()
วิธีการใช้งาน on() เพื่อให้บรรลุผลเช่นเดียวกับ live()
แนบหลายเหตุการณ์
วิธีการที่แนบเหตุการณ์หลายองค์ประกอบ
แนบจัดการเหตุการณ์ต่างๆโดยใช้พารามิเตอร์แผนที่
วิธีการที่แนบจัดการเหตุการณ์หลายองค์ประกอบที่เลือกโดยใช้พารามิเตอร์แผนที่
แนบเหตุการณ์ที่กำหนดเองในองค์ประกอบ
วิธีการที่แนบเหตุการณ์ namespace ปรับแต่งองค์ประกอบ
ผ่านพร้อมข้อมูลไปยังฟังก์ชั่น
วิธีการส่งข้อมูลไปยังพร้อมฟังก์ชั่น
เพิ่มตัวจัดการเหตุการณ์สำหรับองค์ประกอบในอนาคต
แสดงให้เห็นว่า on() วิธีการนี้ยังทำงานสำหรับองค์ประกอบยังไม่ได้สร้าง
นำตัวจัดการเหตุการณ์
วิธีการเอาตัวจัดการเหตุการณ์ใช้ off() วิธีการ