Video học lập trình mỗi ngày

Event Handlers và addEventListener trong js là hai khái niệm gần gũi quen thuộc trong mỗi lập trình viên. Hiểu được khái niệm là một chuyện, để sử dụng là một chuyện khác. Và khác hơn nữa là sử dụng loại nào và ở tình huống nào. Hôm nay, trong bài viết thảo luận này, tôi sẽ làm rõ như ban ngày thông qua việc chia sẻ trong series - Mẹo viết javascript.

Event javascript

Trước tiên để bài viết này diễn ra suôn sẻ thì chúng ta hay đi từ định nghĩa đơn giản nhất đó là Event js là gì? Theo MDN thì: "Event js chính là một giao diện đại diện cho một sự kiện diễn ra trong DOM" -> Ngắn gọn những công nhận dễ hiểu. 

Ví dụ, người dùng click vào đâu, và sau sự kiện đó thì những gì xảy ra tiếp theo là gì? Chỉ cần hiểu vậy ok rồi. Để làm được như vậy thì hiện nay chúng ta chỉ có hai cách để kích hoạt sự kiện đó. Đó chính là Event Handlers và addEventListener. Tôi sẽ nói rõ, 2 thằng này nó khác nhau thế nào? Còn việc sử dụng là của bạn, tuỳ thuộc vào mục đích bạn muốn gì.

Event Handlers trong js

JavaScript có thể nhận kích hoạt một sự kiện nào đó từ một Object bằng cách sử dụng thuộc tính "EventHandler". Nghe đảm bảo dễ gì 100% các ông dev hiểu. Nhưng khi tôi viết ra ví dụ này thì các ông lại thở ra, "à hoá ra là cái này..."

const button = document.querySelector(".btn");
button.onclick = function() {
  console.log("Hello anonystick!");
};
// OR
button.onclick = () => {
  console.log("Hello anonystick!");
};

Event trên kia in ra gì? Tự trả lời. Đây là một sự kiện "click" trong bao nhiêu sự kiện mà thôi. Để có danh sách đầy đủ, bạn có thể xem toàn bộ danh sách trên MDN .

AddEventListener trong js

Phương pháp khác để sử dụng sự kiện trong JavaScript là thêm trình xử lý sự kiện vào một Object. Bạn cũng có thể quen thuộc với điều này. Code có thể trông giống như sau:

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

Quen quá đúng không? Vậy mà có những ông vẫn chưa biết đấy... Cũng như vậy có hàng tấn "EventListener" và đây là danh sách đầy đủ của tất cả các sự kiện trong addEventListener. Ui dời, 2 cái trên ai chả biết, ông nói dài quá, tôi chỉ cần biết nó khác nhau cái gì thôi? Dạ dạ, đợi chút em nói liền đây.

Sự khác nhau giữa EventHandler và addEventListener

Tuy nó giống nhau nhưng có một sự khác biệt nhưng nó rất quan trọng. Đó là nếu bạn sử dụng EventHandler để kích hoạt sự kiện thì nếu bạn kích hoạt hai lần thì lần thứ hai sẽ đè lên lần thứ nhất. Ví dụ sau đây nói lên tất cả:

const button = document.querySelector(".btn");
button.onclick = () => {
  console.log("Hello anonystick!");
};
button.onclick = () => {
  console.log("How are you?");
};
// This wil log "How are you?" to the console.

Trong ví dụ trên chúng ta kích hoạt hai lần, và kết quả là nó lấy thằng thứ 2. OK, tiếp vậy nếu chúng ta sử dụng addEventListener thì khác thế nào, cùng xem code tiếp.

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

Trong ví dụ trên, chúng ta thêm 2 sự kiện kích hoạt thì nó vẫn active cả hai. Ngon đấy, có thể là đa kích hoạt, mỗi thằng làm một nhiệm vụ.

À, khi sử dụng addEventListener thì nhớ là kiểm tra object đó null hay là không? Bởi vì hay xuất hiện lỗi sau

Cannot read property 'addEventListener' of null

Cách fix "Cannot read property 'addEventListener' of null" rất dễ dàng. Lý do là object đó bằng null. Cách fix, rất dễ chỉ cần check null trước khi addEventListener mà thôi.

var el = document.getElementById('btn');
if(el){
  el.addEventListener('click', swapper, false);
}

Hoặc

document.addEventListener('DOMContentLoaded', function () {
    el.addEventListener('click', swapper, false);
});

Sử dụng EventHandler hay addEventListener tốt hơn?

Thật ra như tôi nói, nó tuỳ thuộc vào mỗi người mỗi hoàn cảnh. Nhưng trong tương lai, có nhiều ban cùng làm trên một object thì có thể addEventListener sẽ được nhắc tới. Đó là lý do tại sao, nói chung, việc sử dụng “addEventListener” được khuyên dùng.

OK, bài viết này chỉ vậy thôi. Bạn đã học được phân biệt addEventListener và EventHandler rồi, bây giò, xách câu hỏi này đi đố các bạn khác xem thế nào? Nhớ nhé, theo dõi series - Mẹo viết javascript đó.

Ref: hatsanegg.com