Rate this post

“addEventListener” là một phương thức trong JavaScript cho phép bạn gắn một hàm xử lý sự kiện vào một phần tử cụ thể trên một trang web. Khi sự kiện được chỉ định xảy ra trên phần tử đó, hàm xử lý sự kiện sẽ được thực thi.

Các bài viết liên quan:

Cú pháp cơ bản để sử dụng “addEventListener” là:

element.addEventListener(event, function, useCapture);

Trong đó:

  • “element” là phần tử mà bạn muốn gắn sự kiện
  • “event” là sự kiện mà bạn muốn gắn, ví dụ như “click”, “mouseover”, “submit”
  • “function” là hàm xử lý sự kiện được gọi khi sự kiện xảy ra
  • “useCapture” (tùy chọn) cho biết liệu hàm xử lý sự kiện sẽ được gọi trong quá trình bắt sự kiện (“true”) hay sau khi sự kiện được bắt (“false”).

Tại sao nên sử dụng addEventListener() ?

Một số lý do sử dụng addEventListener() trong JavaScript:

  1. addEventListener() cho phép bạn gắn nhiều hàm xử lý sự kiện vào một phần tử duy nhất, giúp cho việc quản lý và bảo trì có thể dễ dàng hơn.
  2. Sử dụng addEventListener() có thể tránh được việc ghi đè lên các hàm xử lý sự kiện của thư viện hoặc framework khác mà bạn đang sử dụng.
  3. addEventListener() có thể chạy được trên cả trình duyệt cũ và mới, giúp cho việc chuyển đổi giữa các trình duyệt trở nên dễ dàng hơn.
  4. Nó cho phép bạn chọn phương thức xử lý sự kiện được gọi trong quá trình bắt sự kiện (capture) hoặc sau khi sự kiện được bắt (bubbling), giúp cho việc quản lý sự kiện trở nên linh hoạt hơn.

Sử dụng addEventListener() trong JavaScript như thế nào ?

Sử dụng addEventListener() trong JavaScript rất đơn giản, bạn cần làm theo các bước sau:

  1. Lấy tham chiếu đến phần tử mà bạn muốn gắn sự kiện, bạn có thể sử dụng các hàm như document.getElementById(), document.querySelector(), document.getElementsByClassName() để lấy tham chiếu đến phần tử.
  2. Gọi phương thức addEventListener() trên phần tử đó, truyền vào 2 tham số đầu tiên là tên sự kiện và hàm xử lý sự kiện.
let button = document.getElementById("myBtn");

button.addEventListener("click", function(){

    console.log("Button was clicked!");

});
  1. (Optional) Truyền tham số thứ ba vào addEventListener() để chỉ định phương thức xử lý sự kiện (capturing hoặc bubbling).
let button = document.getElementById("myBtn");

button.addEventListener("click", function(){

    console.log("Button was clicked!");

}, true); // use capturing

Sau khi thực hiện các bước trên, hàm xử lý sự kiện sẽ được gọi mỗi khi sự kiện “click” xảy ra trên nút có id là “myBtn”. Bạn có thể thay đổi tên sự kiện và hàm xử lý sự kiện để thích ứng với nhu cầu của bạn.

Lưu ý khi sử dụng : 

Dưới đây là một vài lưu ý khi sử dụng addEventListener() trong JavaScript:

  1. Sự kiện được gắn vào phần tử chỉ khi phần tử đó tồn tại trong DOM, nên chắc chắn rằng bạn đang gắn sự kiện vào phần tử sau khi nó đã được tạo ra.
  2. Nếu bạn muốn gắn sự kiện vào nhiều phần tử cùng một loại, bạn có thể sử dụng getElementsByClassName() hoặc getElementsByTagName() để lấy tham chiếu đến các phần tử và gắn sự kiện vào chúng.
  3. Sử dụng removeEventListener() để hủy bỏ sự kiện đã được gắn vào một phần tử.
  1. Nếu bạn muốn sử dụng this trong hàm xử lý sự kiện, bạn cần sử dụng arrow function hoặc gán hàm xử lý sự kiện vào một biến trước khi gọi addEventListener().
  2. Lưu ý rằng một số sự kiện như “submit” chỉ xảy ra trên form, còn một số sự kiện như “mouseover” chỉ xảy ra trên các phần tử có thể hover chuột.
  3. Khi bạn gắn sự kiện trên một phần tử cha, sự kiện có thể được bắt thông qua quá trình bubbling cho tất cả các phần tử con. Còn nếu gắn trên phần tử con, sự kiện sẽ chỉ được bắt trên phần tử đó thông qua quá trình capturing.
  4. Khi gắn sự kiện vào các phần tử được tạo ra dinamic, bạn nên gắn sự kiện trên phần tử cha của chúng, để tránh việc phải gắn lại sự kiện mỗi khi tạo phần tử mới.

Khi nào nên sử dụng addEventListener()

Bạn nên sử dụng addEventListener() trong JavaScript khi bạn muốn gắn một hàm xử lý sự kiện vào một phần tử cụ thể trên trang web và thực hiện một hành động cụ thể khi sự kiện xảy ra.

Ví dụ, bạn có thể sử dụng addEventListener() để gắn sự kiện click vào một nút, và khi nút được nhấn thì sẽ chạy một hàm cụ thể.

Hoặc bạn cũng có thể sử dụng addEventListener() để gắn sự kiện keyup, keydown, hover, scroll vào các phần tử cụ thể trên trang web để thực hiện các hành động tương ứng.

Tóm lại, bạn nên sử dụng addEventListener() khi bạn muốn gắn sự kiện vào một phần tử và thực hiện một hành động cụ thể khi sự kiện xảy ra.

Ví dụ nâng cao khi sử dụng addEventListener()

Dưới đây là một số ví dụ nâng cao khi sử dụng addEventListener() trong JavaScript:

  1. Gắn sự kiện click vào nhiều nút cùng một lúc:
let buttons = document.getElementsByClassName("myBtn");

for (let i = 0; i < buttons.length; i++) {

    buttons[i].addEventListener("click", function(){

        console.log("Button " + i + " was clicked!");

    });

}
  1. Gắn sự kiện keyup vào ô input để kiểm tra nội dung được nhập:
let input = document.getElementById("myInput");

input.addEventListener("keyup", function(){

    if (this.value.length > 10) {

        alert("Too many characters!");

    }

});
  1. Gắn sự kiện scroll cho trang web để thay đổi trạng thái của header khi cuộn trang:
let header = document.getElementById("header");

document.addEventListener("scroll", function(){

    if (window.scrollY > 50) {

        header.classList.add("scrolled");

    } else {

        header.classList.remove("scrolled");

    }

});
  1. Gắn sự kiện hover cho phần tử để thay đổi trạng thái của nó khi di chuột qua.
let element = document.getElementById("element");

element.addEventListener("mouseover", function(){

    element.classList.add("hover");

});

element.addEventListener("mouseout", function(){

    element.classList.remove("hover");

});

Kết luận

Tóm lại, addEventListener() là một phương thức mạnh mẽ trong JavaScript cho phép bạn gắn hàm xử lý sự kiện vào các phần tử cụ thể trên trang web và thực hiện các hành động cụ thể khi sự kiện đó xảy ra. Rất quan trọng để lưu ý các điểm đã nói trước khi sử dụng addEventListener để tránh các lỗi và cải thiện hiệu suất của trang web của bạn.

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

Contact Me on Zalo
Call now