การผูกเหตุการณ์ใน jQuery

เหตุการณ์ JavaScript เกือบทุกเหตุการณ์มีวิธีการใน jQuery ที่สอดคล้องกัน ตัวอย่างเช่น การคลิกบนองค์ประกอบ สามารถตรวจจับได้ดังนี้: $(ตัวเลือก).click(ฟังก์ชัน)

พิจารณาโค้ด HTML ต่อไปนี้:

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

สำหรับโค้ดนี้ได้เขียน CSS ไว้:

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

มาทำให้เมื่อคลิกที่ li ใด ๆ จะแสดง เครื่องหมายอัศเจรีย์ ลองคลิกที่รายการ รายการ:

javascript$('li').click(function() {
  alert('!');
});

ภายในฟังก์ชันที่ถูกผูก จะสามารถเข้าถึง this ได้ ซึ่งอ้างอิงถึงองค์ประกอบที่เกิด เหตุการณ์ขึ้น (ในกรณีของเราคือ li ที่ ถูกคลิก) this นี้สามารถใช้ในสไตล์ ของ JavaScript ได้ เช่น this.innerHTML หรือ ในสไตล์ของ jQuery - สำหรับการนี้ this ควร ถูกห่อด้วย $ ดังนี้: $(this)

ใช้โค้ด HTML:

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

สำหรับโค้ดนี้ได้เขียนสไตล์ CSS ต่อไปนี้:

cssli {
  width: 100px;
}
li:hover {
  color: red;
  cursor: pointer;
}

มาทำให้เมื่อคลิกที่ li จะเพิ่ม '!' เข้าไปท้าย เพื่อทดสอบการทำงาน ลองคลิก ที่รายการรายการ:

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