Cách sử dụng jQuery addEventListener và Javascript addEventListener

Trong jQuery, việc lắng nghe và xử lý sự kiện không sử dụng trực tiếp addEventListener() như trong JavaScript thông thường. Thay vào đó, jQuery cung cấp các phương thức như .on(), .bind(), hoặc .delegate() (phần lớn đã bị thay thế bởi .on() từ phiên bản jQuery 1.7) để gắn event listener vào các phần tử DOM.

Khái niệm

• addEventListener (trong JavaScript thuần): Gắn một hàm xử lý sự kiện vào phần tử DOM. Một phần tử có thể có nhiều sự kiện hoặc nhiều hàm được xử lý đồng thời.
• Trong jQuery: Bạn sử dụng các hàm như .on() hoặc .bind() thay thế cho addEventListener. Phương pháp này giúp viết code ngắn gọn và dễ đọc hơn.

Cú pháp sử dụng trong jQuery

.on() - Phương thức chính để thêm sự kiện.

javascript

$(selector).on(eventType, childSelector, data, function)

• selector: Phần tử mà bạn muốn lắng nghe sự kiện.
• eventType: Loại sự kiện cần lắng nghe (click, keyup, mouseover, v.v.).
• childSelector: (Tùy chọn) Các phần tử con cụ thể để lắng nghe sự kiện (dùng trong event delegation).
• data: (Tùy chọn) Dữ liệu bổ sung truyền đến hàm xử lý sự kiện.
• function: Hàm xử lý sự kiện.

Ví dụ minh họa

Ví dụ 1: Lắng nghe sự kiện click

html

<button id="myButton">Click Me</button>
<script>
$("#myButton").on("click", function ()
{
  alert("Button clicked!");
});
</script>

Ví dụ 2: Lắng nghe nhiều sự kiện trên một phần tử

html

<input type="text" id="myInput" placeholder="Type here...">
<script>
$("#myInput").on("focus blur", function (event)
{
if (event.type === "focus")
{
  console.log("Input is focused!");
}
else if (event.type === "blur")
{
  console.log("Input lost focus!");
}
});
</script>

Ví dụ 3: Sử dụng event delegation

html

<ul id="myList"> <li>Item 1</li> <li>Item 2</li> </ul>
<script>
$("#myList").on("click", "li", function ()
{
  alert($(this).text() + " clicked!");
});
// Thêm một phần tử mới và sự kiện vẫn hoạt động
$("#myList").append("<li>Item 3</li>");
</script>

Ví dụ 4: Gắn sự kiện kèm dữ liệu bổ sung

html

<button id="greet">Greet</button>
<script>
$("#greet").on("click", { name: "Alice" }, function (event)
{
  alert("Hello " + event.data.name + "!");
});
</script>

Ví dụ 5: Loại bỏ sự kiện bằng .off()

html

<button id="disable">Disable Event</button> <button id="test">Test Button</button>
<script>
function alertMessage()
{   alert("Test button clicked!");
}
$("#test").on("click", alertMessage);
$("#disable").on("click", function ()
{
  $("#test").off("click", alertMessage);
  alert("Event listener removed!");
});
</script>

Ví dụ 6: Một sự kiện chỉ chạy một lần (sử dụng .one())

html

<button id="singleClick">Click Once</button>
<script>
$("#singleClick").one("click", function ()
{
  alert("This will only show once!");
});
</script>

Ví dụ 7: Gắn sự kiện nhiều lần cho cùng một phần tử

html

<button id="multiEvent">Click Me</button>
<script>
$("#multiEvent").on("click", function ()
{
  console.log("First event triggered!");
});
$("#multiEvent").on("click", function ()
{
  console.log("Second event triggered!");
});
</script>

So sánh với addEventListener trong JavaScript

Trong JavaScript thuần, addEventListener() được dùng như sau:

javascript

document.getElementById("myButton").addEventListener("click", function ()
{
  alert("Button clicked!");
});

Nhưng với jQuery, cú pháp đơn giản hơn:

javascript

$("#myButton").on("click", function ()
{
  alert("Button clicked!");
});

Sử dụng jQuery giúp viết mã dễ bảo trì hơn khi xử lý các sự kiện phức tạp hoặc event delegation.

Tham khảo thêm:

• Stackoverflow
• DOM Document addEventListener