การ binding event ใน KnockoutJS

KnockoutJS

Created At : 2023-09-01 04:29

Views 👀 :

การ binding event ใน KnockoutJS นั้นทำได้โดยใช้ data-bind="event: function(event) { ... }"

data-bind="event: function(event) { ... } จะผูกฟังก์ชันให้กับองค์ประกอบ DOM ซึ่งจะทำงานเมื่อเหตุการณ์บางอย่างเกิดขึ้นกับองค์ประกอบ DOM

เหตุการณ์ที่คุณสามารถผูกได้นั้นมีมากมาย ตัวอย่างบางส่วน ได้แก่:

click: เหตุการณ์นี้เกิดขึ้นเมื่อองค์ประกอบ DOM ถูกคลิก
change: เหตุการณ์นี้เกิดขึ้นเมื่อค่าขององค์ประกอบ DOM เปลี่ยนแปลง
focus: เหตุการณ์นี้เกิดขึ้นเมื่อองค์ประกอบ DOM อยู่ในโฟกัส
blur: เหตุการณ์นี้เกิดขึ้นเมื่อองค์ประกอบ DOM ออกจากโฟกัส
keydown: เหตุการณ์นี้เกิดขึ้นเมื่อปุ่มคีย์บอร์ดถูกกด
keyup: เหตุการณ์นี้เกิดขึ้นเมื่อปุ่มคีย์บอร์ดถูกปล่อย
keypress: เหตุการณ์นี้เกิดขึ้นเมื่อปุ่มคีย์บอร์ดถูกกดและปล่อย
mouseenter: เหตุการณ์นี้เกิดขึ้นเมื่อเมาส์เข้าสู่องค์ประกอบ DOM
mouseleave: เหตุการณ์นี้เกิดขึ้นเมื่อเมาส์ออกจากองค์ประกอบ DOM
mousemove: เหตุการณ์นี้เกิดขึ้นเมื่อเมาส์เคลื่อนที่เหนือองค์ประกอบ DOM
mouseup: เหตุการณ์นี้เกิดขึ้นเมื่อเมาส์ปล่อยปุ่มเมาส์
mousedown: เหตุการณ์นี้เกิดขึ้นเมื่อเมาส์กดปุ่มเมาส์
scroll: เหตุการณ์นี้เกิดขึ้นเมื่อองค์ประกอบ DOM ถูกเลื่อน
resize: เหตุการณ์นี้เกิดขึ้นเมื่อองค์ประกอบ DOM ถูกปรับขนาด

ตัวอย่างเช่น:

<button data-bind="click: function(event) {
  alert('Hello, world!');
}">
  คลิก
</button>

สิ่งนี้จะสร้างปุ่มใหม่และผูกฟังก์ชัน alert() เข้ากับปุ่มนั้น เมื่อปุ่มถูกคลิก ฟังก์ชัน alert() จะทำงานและแสดงข้อความ “Hello, world!”

คุณยังสามารถใช้ data-bind="event: function(event) { ... } เพื่อผูกฟังก์ชันไปยังองค์ประกอบ DOM แบบไดนามิกได้

ตัวอย่างเช่น:

<div data-bind="click: function(event) {
  alert(event.target.textContent);
}">
  คลิกที่นี่เพื่อดูข้อความ
</div>

สิ่งนี้จะสร้างองค์ประกอบ DOM ใหม่และผูกฟังก์ชัน alert() เข้ากับองค์ประกอบ DOM นั้น เมื่อองค์ประกอบ DOM ถูกคลิก ฟังก์ชัน alert() จะทำงานและแสดงข้อความที่องค์ประกอบ DOM แสดง

Here are some examples of how you can use event binding in KnockoutJS:

You can use event binding to call a function when an event occurs:

<button data-bind="click: function(event) {
  alert('Hello, world!');
}">
  คลิก
</button>

You can use event binding to open a new window when an event occurs:

<a href="https://www.google.com" data-bind="click: function(event) {
  window.open('https://www.google.com');
}">
  ไปที่ Google
</a>

You can use event binding to change the value of a property when an event occurs:

1
2
3

<input type="text" data-bind="value: name, click: function(event) {
  name = 'New name';
}">

You can use event binding to perform a complex operation when an event occurs:

<div data-bind="click: function(event) {
  // Perform a complex operation
}">
  คลิกที่นี่
</div>

Event binding เป็นเครื่องมือที่ทรงพลังที่สามารถใช้เพื่อตอบสนองต่อเหตุการณ์ใน KnockoutJS

By using event binding, you can make your applications more interactive.