[Javascript] Event Handlers và Event Listeners

Events!
Một phần không thể thiếu của một trang web. Thứ giúp người dùng có cảm giác rằng đang thực sự giao tiếp trang web chứ không chỉ đơn thuần như đọc báo hay xem phim.
Event hiểu đơn giản là các hành động diễn ra trong trình duyệt có thể được tạo bởi người dùng hoặc chính trình duyệt.
Ví dụ như khi người dùng click chuột vào phần tử, gõ văn bản vào textfield hay di chuyển con trỏ vào phần tử nào đó.

Trong bài viết này, mình sẽ nói về hai cách xử lý sự kiện và sử dụng hợp lý cho từng trường hợp.

Sử dụng Event Handler

Bạn có thể dùng thuộc tính EventHandler có sẵn của object để "bắt sự kiện".

Nghe có vẻ hơi phức tạp, nhưng có thể bạn đã làm nó mà chưa biết tên nó chăng.

const button = document.querySelector(".btn")

button.onclick = function() {
  console.log("Hello!");
};

// OR using Javascript one-liners make you look like a pro
button.onclick = () => {console.log("Hello!")};

Trong ví dụ này, thuộc tính onclick được sử dụng để khi người dùng nhấp vào button, nó sẽ in ra dòng chữ "Xin chào!" vào console log.
Thuộc tính "onclick" chỉ là một trong những EventHandlercó thể sử dụng được thôi. Dước đây là một số thuộc tính thông dụng có thể dùng.

Thêm Event Listener

Ngoài những thuộc tính EventHandler trên ra, chúng ta cũng có thể thêm có sự kiện vào đối tượng thông qua addEventListener.

Bằng cách thêm event listener vào một đối tượng, chúng ta có thể bắt được một loạt các sự kiện do người dùng hoặc trình duyệt tạo ra.

const button = document.querySelector(".btn")
button.addEventListener("click", function(event) {
  console.log("Hello!");
})

// OR using Javascript one-liners
button.addEventListener("click", event => console.log("Hello!"))

Thay vì dùng thuộc tính onclick, thì ở đây mình dùng method addEventListener():

target.addEventListener(event, function, useCapture);

• target: Đây là phần tử bạn cần thêm Event Listeners vào. (Sử dụng DOM Selector).
• event: Là các loại sự kiện như click, mouseover, ... (Bạn có thể xem ở đây)
• function: Tên hàm bạn cần thêm vào

Khác biệt giữa Event Handlers và addEventListener

Nếu bạn sẽ sử dụng EventHandler, điểm khác biệt rõ ràng nhất chính là nếu bạn thêm nhiều sự kiện cho cùng một loại(ví dụ là onclick vào nút), thì sự kiện thứ 2 sẽ ghi đè lên sự kiện đầu tiên và chỉ sự kiện đó được thực thi. Nguyên nhân là do:

Đối với một phần tử nhất định, bạn chỉ có thể có một event handler cho mỗi loại sự kiện, nhưng bạn có thể có nhiều event listeners.

const button = document.querySelector(".btn")
button.onclick = () => {
  console.log("Hello!");
};
button.onclick = () => {
  console.log("How are you?");
};

// When click button
// "How are you?"

Những lúc như thế này thì chúng ta sẽ cần đến addEventListener

const button = document.querySelector(".btn")
button.addEventListener("click", event => {
  console.log("Hello!");
})
button.addEventListener("click", event => {
  console.log("How are you?");
})

// This will log to the console
// "Hello!"
// "How are you?"

Nên sử dụng cách nào?

Phương pháp nào bạn nên sử dụng còn tùy thuộc vào trường hợp sử dụng đến nó.

Bạn có cần bổ sung thêm nhiều sự kiện vào một phần tử không? Trong tương lai sẽ có cần thêm sự có phần tử đó không?

Đúng vậy, đó là lý do tại sao addEventListener lại được khuyên dùng.

Tham khảo

https://medium.com/dailyjs/whats-the-difference-between-event-handlers-addeventlistener-in-js-963431f05c34