วิธีการ on แบบสากลใน jQuery

สำหรับการผูกเหตุการณ์ คุณยังสามารถใช้วิธีการสากล on ได้อีกด้วย พารามิเตอร์แรกมันรับชื่อของเหตุการณ์ (เช่น 'click') และพารามิเตอร์ที่สองคือ ฟังก์ชันที่ควรจะถูกผูก

ลองดูตัวอย่างจากโค้ด HTML ต่อไปนี้:

<ul>
	<li>ข้อความ</li>
	<li>ข้อความ</li>
	<li>ข้อความ</li>
</ul>

CSS มีหน้าตาดังนี้:

li {
	width: 100px;
	cursor: pointer;
}

ตอนนี้มาเขียนโค้ดสำหรับ li ใหม่ ซึ่งเราเคยเขียนไว้ก่อนหน้านี้ด้วยวิธีการ on สำหรับทดสอบการทำงาน ลองคลิกที่รายการในลิสต์:

$('li').on('click', function() {
	$(this).append('!');
});

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

$('li').on('click mousemove', function func() {
	$(this).append('!');
});

ให้ผูกเหตุการณ์ให้กับลิงก์ทั้งหมด - เมื่อ เลื่อนเมาส์มาวางบนลิงก์ ให้เพิ่มค่า href ของมันลงไปท้ายข้อความ ในวงเล็บ

ให้ผูกเหตุการณ์ให้กับอินพุตทั้งหมด - เมื่อสูญเสียโฟกัส ให้แต่ละอินพุตแสดงค่า value ของมัน ในย่อหน้าที่มี id=#test