Cách sử dụng jQuery trigger

Khái niệm về jQuery.trigger()

Phương thức trigger() trong jQuery được sử dụng để kích hoạt một sự kiện (event) cụ thể trên một phần tử DOM.

• Công dụng chính:

  • Mô phỏng hành vi của một sự kiện thực tế (như click chuột, gõ phím, v.v...).
  • Kích hoạt event handler (hàm xử lý sự kiện) đã gắn với phần tử.

• Cú pháp:

  javascript

  $(selector).trigger(eventType, [extraParameters])

  • selector: Phần tử mà bạn muốn kích hoạt sự kiện.
  • eventType: Loại sự kiện (click, change, keyup, focus, v.v.).
  • extraParameters: (Không bắt buộc) Dữ liệu bổ sung truyền đến hàm xử lý sự kiện.

Cách sử dụng jQuery.trigger()

1. Kích hoạt các sự kiện mặc định (vd: click, submit).
2. Gửi thêm dữ liệu bổ sung để xử lý sự kiện.
3. Tích hợp hoặc kiểm tra hệ thống event handler đã được triển khai.

Ví dụ minh họa jQuery Trigger

Ví dụ 1: Kích hoạt sự kiện click

html

<button id="btn">Click me!</button>
<script>
$("#btn").click(function ()
{
alert("Button clicked!");
});
// Kích hoạt sự kiện click bằng trigger
$("#btn").trigger("click");
</script>

Ví dụ 2: Kích hoạt sự kiện change cho ô input

html

<input type="text" id="name" placeholder="Enter your name">
<script>
$("#name").on("change", function ()
{
alert("Value changed to: " + $(this).val());
});
// Kích hoạt sự kiện change và cập nhật giá trị
$("#name").val("John").trigger("change");
</script>

Ví dụ 3: Kích hoạt sự kiện submit

html

<form id="myForm"> <input type="text" placeholder="Enter something"> <button type="submit">Submit</button> </form>
<script>
$("#myForm").on("submit", function (e)
{
e.preventDefault(); alert("Form submitted!");
});
// Kích hoạt submit
$("#myForm").trigger("submit");
</script>

Ví dụ 4: Gửi dữ liệu bổ sung với trigger

html

<button id="showMsg">Show Message</button>
<script>
$("#showMsg").on("customEvent", function (e, message)
{
alert("Received message: " + message);
});
// Kích hoạt customEvent với dữ liệu bổ sung
$("#showMsg").trigger("customEvent", ["Hello, world!"]);
</script>

Ví dụ 5: Kích hoạt nhiều sự kiện liên tiếp

html

<input type="text" id="inputField" placeholder="Type something"> <button id="triggerEvents">Trigger Events</button>
<script> $("#inputField").on("focus keyup", function ()
{
console.log("Event triggered!");
});
// Kích hoạt cả hai sự kiện: focus và keyup
$("#triggerEvents").click(function ()
{
$("#inputField").trigger("focus").trigger("keyup"); });
</script>

Tóm lại:

• jQuery.trigger() là công cụ hữu ích để kiểm soát và kiểm tra sự kiện trong ứng dụng.
• Ngoài việc tái sử dụng event handler, nó còn giúp mô phỏng hành vi người dùng trong UI.

Tham khảo:

• Stackoverflow
• jQuery trigger