เมธอด on

เมธอด on ช่วยให้เพิ่มตัวจัดการ เหตุการณ์ให้กับองค์ประกอบได้ เพื่อลบตัวจัดการ สามารถใช้เมธอด off, เพื่อให้เหตุการณ์ทำงานเพียงครั้งเดียว จากนั้น ตัวจัดการจะลบตัวเอง - ใช้เมธอด one องค์ประกอบที่เราผูกตัวจัดการต้อง มีอยู่จริงในเวลาที่เรียกใช้ on

ไวยากรณ์

นี่คือวิธีที่เราเพิ่มตัวจัดการเหตุการณ์ให้กับองค์ประกอบ พารามิเตอร์แรกจะถูกส่งในรูปแบบสตริงซึ่งเป็น เหตุการณ์หนึ่งหรือหลายเหตุการณ์โดยคั่นด้วยช่องว่าง พารามิเตอร์ที่สอง ส่งเป็นตัวกรองเพิ่มเติม ซีเลกเตอร์ของลูกหลานภายในองค์ประกอบ พารามิเตอร์ที่สาม - ข้อมูลเพิ่มเติม ซึ่งจะถูกส่งไปยังตัวจัดการในคุณสมบัติ event.data เมื่อเหตุการณ์ทำงาน พารามิเตอร์ที่สองและสาม ไม่จำเป็น พารามิเตอร์ที่สี่ส่งเป็นฟังก์ชันตัวจัดการ ซึ่งจะรับวัตถุเหตุการณ์และพารามิเตอร์เพิ่มเติม ที่ไม่บังคับ ถ้าแทนที่จะส่งฟังก์ชันตัวจัดการ ส่ง false ฟังก์ชันจะคืนค่าเพียง false:

$(ซีเลกเตอร์).on(เหตุการณ์, [ซีเลกเตอร์], [ข้อมูล], ฟังก์ชันตัวจัดการ(วัตถุเหตุการณ์, [พารามิเตอร์เพิ่มเติม]));

สามารถใช้เมธอด on ในทางอื่นได้ ในกรณีนี้พารามิเตอร์แรกจะส่งเป็น วัตถุ JavaScript โดยที่คีย์คือประเภทของเหตุการณ์ และ ค่า คือ ฟังก์ชันตัวจัดการที่จะถูกเรียก สำหรับเหตุการณ์:

$(ซีเลกเตอร์).on({'ประเภทเหตุการณ์': handler}, [ซีเลกเตอร์], [ข้อมูล]);

หากเราไม่ส่งซีเลกเตอร์เพิ่มเติม เหตุการณ์จะทำงานบนองค์ประกอบที่เรา ติดตั้งตัวจัดการไว้ มิฉะนั้น - บน องค์ประกอบลูกหลานซึ่งตรงกับ ซีเลกเตอร์นั้น (เหตุการณ์ที่มอบหมาย) ตัวจัดการเหตุการณ์เดียวกันสามารถ ถูกผูกกับองค์ประกอบได้หลายครั้ง

ตัวอย่าง

มาแสดงข้อความของย่อหน้าที่มี #test ใน alert เมื่อคลิกที่มัน การคลิกที่ย่อหน้าอื่นจะไม่ทำให้ เกิดอะไรขึ้น:

<p>text1</p>
<p id="test">text2</p>
<p>text3</p>

$('#test').on('click', function() {
	alert( $(this).text() );
});

ตัวอย่าง

มาแสดงข้อมูลที่เราได้ส่งไปยังเมธอด on เมื่อคลิกที่ย่อหน้า ใช้ ฟังก์ชันตัวจัดการ testFunc ซึ่งเราได้สร้างขึ้น:

<p>click</p>

function testFunc(event) {
	alert(event.data.text);
}

$('p').on('click', {text: 'aaa'}, testFunc);

ดูเพิ่มเติม

เมธอด off,
ซึ่งช่วยลบตัวจัดการเหตุการณ์ จากองค์ประกอบ
เมธอด one,
ซึ่งช่วยให้เหตุการณ์ทำงานเพียงครั้งเดียว จากนั้นลบตัวจัดการอัตโนมัติ
วัตถุ event,
ซึ่งมีข้อมูลเกี่ยวกับเหตุการณ์
เมธอด trigger,
ซึ่งช่วยเรียกใช้ตัวจัดการเหตุการณ์ทั้งหมด ที่ผูกกับองค์ประกอบสำหรับเหตุการณ์ประเภทที่กำหนด
เมธอด JavaScript bind,
ซึ่งช่วยผูก context กับฟังก์ชัน