Hướng dẫn dùng callback

#1

Em chào anh chị,

    <html>
    <body>
        <div>Hello</div>
    </body>
   <script>
        const el = document.getElementsByTagName("div")[0];
        el.addEventListener("click", [[Callback ở đây]]);
    </script>
    </html>

Để truyền đối số callback vào hàm addEventListener thì anh/ chị thường dùng cách nào ạ?

Cách :one: :
Khai báo anonymous function trực tiếp trong addEventListener

el.addEventListener("click", () => {
        alert("Đã click")
    });

Cách :two: : Khai báo express function bên ngoài rồi truyền vào sau

    const handleClick = () => alert("Đã click!");
    el.addEventListener("click", handleClick);

Em muốn hỏi là nên dùng cách nào, 2 cách có phải hoàn toàn giống nhau không? Em nghe youtuber trên mạng kêu dùng cách 2 tối ưu hơn, ít tốn bộ nhớ. Mong được khai sáng. Em cảm ơn!

1 Like
#2

với cá nhân mình thì nếu cái callback đó dùng lại ở nhiều chỗ khác thì mình sẽ làm theo cách 2, hoặc là removeEventListener thì là bắt buộc rồi

6 Likes
#3

Cách 1: chỉ xài một lần cho event này, nên áp dụng cho logic ngắn, đơn giản và dễ đọc
Cách 2: cho các event khác xài chung, áp dụng cho logic phức tạp và dài. Cách này thì tối ưu hơn do chỉ khai báo một lần

2 Likes
#4

Dạ em cảm ơn anh @htwap và @Hoang_Hieu1, tại sao khi removeEventListener phải truyền vào đúng hàm callback đã addEventListener ban đầu? Em nghĩ chỉ cần 1 đối số “click” là đủ, trong removeEventListener("click"), hàm removeEventListener nó không tự hiểu “click” đi kèm với callback handleClick hả mọi người? Như cặp key-value á.

#5

Một sự kiện có thể có vô số hàm callback được đăng kí vào. Bạn phải truyền đúng hàm cần loại bỏ để nó xóa đi.

let cb1 = () => console.log("This is 1");
ele.addEventListener("click", cb1);
let cb2 = () => console.log("This is 2");
ele.addEventListener("click", cb2);
let cb3 = () => console.log("This is 3");
ele.addEventListener("click", cb3);

// Remove 2
ele.removeEventListener("click", cb2);

Phương thức removeEventListener cần 2 tham số bắt buộc.

Đó là lý do nó có tên là addEventListener chứ không phải setEventListener.

7 Likes
#6

cb3 trong ele.addEventListener("click", cb3); tham chiếu đến let cb3 = () => console.log("This is 3"); phải không anh?

1 Like
#7

Giống như ví dụ thứ 2 của bạn thôi.

2 Likes
#8

2 Hàm truyền chung 1 biến (biến này là callback) thì truyền tham chiếu ô nhớ là đúng rồi bạn

#9

mình học trên f8 bây giờ chỉ còn nhớ là callback function là hàm được truyền vào với tư cách là 1 đối số

83% thành viên diễn đàn không hỏi bài tập, còn bạn thì sao?