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

Đối với bạn nào mà chuyên sâu về javascript thì event listener là một event không thể thiếu trong code của mỗi developer javascript (devjs). Ở bài này tôi cũng show cho devjs nào chưa biết or mới chỉ biết được một cách đó là "Làm thế nào để đăng ký multiple elements với event listener trong javascript. 

Trong javascript chúng ta có thể add event listener với một element với cú pháp như sau:

document.querySelector('.my-element').addEventListener('click', event => {
  //handle click
})

Nhưng ở đời không là mơ, nếu như chúng ta có nhiều trường hợp là có nhiều elements để có thể add event listener thì chúng làm thế nào? Có hai cách sẽ giải quyết vấn đề này. 

1 - Using Loop.

- class giống nhau: 

Nếu như trong body của chúng ta có nhiều class giống nhau thì có thể dùng querySelectorAll('.some-class') để get tất cả class trong body html. và method này sẽ return về một array. Từ đó chúng ta có thế sử dụng với forEach(). 

Ví dụ:

document.querySelectorAll('.some-class').forEach(item => {
  item.addEventListener('click', event => {
    //handle click
  }
})

- class khác nhau: 

Nếu trong body của bạn có nhiều class khác nhau nhưng cùng chung mục đích add an event listener. Thì chúng ta có thể viết cách này.

[document.querySelector('.a-class'), document.querySelector('.another-class')].forEach(item => {
  item.addEventListener('click', event => {
    //handle click
  }
})

or

let element1 = document.querySelector('.a-class'), element2 = document.querySelector('.another-class');

[element1, element2].forEach(item => {
  item.addEventListener('click', event => {
    //handle click
  }
})

2 - Using event bubbling

Event bubbling là một cụm từ trong lập trình có thể bạn chưa biết, nhưng trên đoạn đường javascript có thể bạn đã gặp rồi nhưng chưa biết. Nó liên quan đến thứ tự mà các trình xử lý sự kiện. Nói tóm lại Event Bubbling là cách mà event được lan truyền từ DOM con lên DOM cha. 

Nghĩa là, khi chúng ta click trên một phần tử con thì event click của phần tử cha nó cũng được gọi.

ví dụ: 
const element1 = document.querySelector('.a-class')
const element2 = document.querySelector('.another-class')

body.addEventListener('click', event => {
  if (event.target !== element1 && event.target !== element2) {
    return
  }
  //handle click
}

# Kết Luận

Bài viết này chỉ là một tips javascript nhỏ, nên cũng không cần phải suy nghĩ nhiều. Và nó cũng không mới so với những devjs chuyên về js. Nếu bạn cảm thấy giúp ích cho bạn thì hãy giúp những người khác bằng cách share bài này ra cộng đồng. Thanks alot!