Nếu các bạn chưa xem bài viết trước thì dưới đây là link nhé:

HTML Event là gì ? ❔

Một HTML Event, hay nói ngắn gọn là Event, là 1 hành động xảy ra bởi sự tác động của trình duyệt hoặc của user lên các HTML Element. Ví dụ như:

Trang web được tải xong
User thay đổi nội dung của thẻ input
User nhấn vào 1 button

Khi nào cần sử dụng HTML Event ? 🤔

Event có thể được sử dụng để xử lý và kiểm duyệt nội dung được nhập bởi user hoặc những hành động của user hay trình duyệt như:

Xử lý sau mỗi lần trang web được load (VD: cấp quyền truy cập)
Xử lý cần thực hiện khi trang web bị đóng (VD: cảnh báo nếu user chưa lưu đữ liệu đang nhập)
Xử lý hành động khi user click vào 1 button (VD: gửi dữ liệu tới backend)
Kiểm tra dữ liệu có được user nhập liệu đúng hay không (VD: kiểm tra email có hợp lệ không)
Và nhiều TH khác nữa ...

Tại sao nên sử dụng addEventListener ✌️

Thay vì trực tiếp thêm sự kiện như là 1 thuộc tính kiểu <div onclick="..."> thì chúng ta sẽ sử dụng hàm addEventListener. Vì những lợi ích sau:

giống như onclick thì addEventListener cũng cho phép đính kèm 1 sự kiện vào 1 đối tượng DOM
Không ghi đè sự kiện đã được tạo trước đó
Có thể tạo được nhiều sự kiện
Có thể tạo được nhiều sự kiện có tên giống nhau. VD: bạn có thể tạo được 4 sự kiện click và mỗi sự kiện đều có xử lý logic khác nhau
Tách biệt code javascript ra khỏi html, tránh gặp TH khó đọc hiểu, dễ dàng kiểm soát code hơn

Cú pháp và cách sử dụng ✒️

const element = document.querySelector('div');
element.addEventListener(event, function, useCapture);

Tham số đầu tiên là kiểu sự kiện (VD: click, mousedown, ...). Tham số thứ 2 lầ function mà chúng ta muốn gọi khi sự kiện xảy ra

Tham số cuối cùng là 1 giá trị boolean (True/False). Nó liên quan đến việc sử dụng event bubbling và event capturing. Tham số này là tùy chọn, có thể có hoặc không.

Không mất thời gian nữa, chúng ta sẽ tiếp tục học cách làm việc với DOM Events ngay sau đây

Tạo sự kiện

// tạo nhiều sự kiện giống nhau
element.addEventListener("click", myFunction);
element.addEventListener("click", myFunction2);

// tạo nhiều loại sự kiện khác nhau
element.addEventListener("mousedown", myFunction3);
element.addEventListener("mouseover", myFunction4);

Tạo sự kiện khi input thay đổi giá trị

// 1. rõ ràng là phải tìm input trước
const input = document.querySelector('input')

// 2. ràng buộc sự kiện change để có thể biết
// khi nào input thay đổi giá trị
input.addEventListener('change', function(){
  console.log(this.value)
})

Tạo sự kiện khi form được submit

const form = document.querySelector('form')

form.addEventListener('submit', myFunction)

Để biết thêm thông tin về tên các event có thể sử dụng, các bạn có thể tham khảo tại đây: https://www.w3schools.com/jsref/dom_obj_event.asp

Hiểu về Event bubbling và Event capturing 🤓

Khi sự kiện được xảy ra, có 2 con đường mà sự kiện có thể được lan truyền là bubbling và capturing

Event-Propagration.png (Xem ảnh gốc)

Khái niệm lan truyền sự kiện là 1 cách để định nghĩa thứ tự xảy ra sự kiện trên đối tượng element nào.

Cùng xem xét đoạn code sau, tôi gán giá trị true cho tham số thứ 3. Nghĩa là, sử dụng capturing event

const p = document.querySelector("p")
const a = document.querySelector("a")

const fn1 = () => console.log('click p')
const fn2 = () => console.log('click a')

p.addEventListener("click", fn1, true);
a.addEventListener("click", fn2, true);
// Kết quả log sẽ là: 
// click p   => sự kiện click ở p sẽ xảy ra trước
// click a

// đổi giá trị sang false
p.addEventListener("click", fn1, false);
a.addEventListener("click", fn2, false);
// Kết quả log sẽ là: 
// click a   => sự kiện click ở a sẽ xảy ra trước
// click p

Hành vi lan truyền sự kiện này có thể gây ra những xử lý không mong muốn. Như ví dụ trên ta có thể thấy, người dùng chỉ mong muốn click vào thẻ <a>, tuy nhiên xử lý ở thẻ <p> lại được gọi.

Để ngăn chặn việc này xảy ra, ta có thể sử dụng stopPropagation()

//...
const fn1 = () => console.log('click p')
const fn2 = (ev) => {
  // ngăn chặn hành vi lan truyền sự kiện
  ev.stopPropagation()
  console.log('click a')
}

p.addEventListener("click", fn1, false);
a.addEventListener("click", fn2, false);
// Kết quả log sẽ là: 
// click a  => sự kiện click vào p ko xảy ra

Tạm kết

Đến đây, có lẽ các bạn đã hiểu rõ cách ràng buộc sự kiện cho 1 đối tượng DOM rồi đúng không ? Bài viết tiếp theo chúng ra sẽ làm quen với việc lấy dữ liệu từ backend sử dụng Javascript

JS First Step: Cách làm việc với Event