Phương thức addEventListener () - Mã ví dụ về trình xử lý sự kiện JavaScript

Phương thức addEventListener () của JavaScript cho phép bạn thiết lập các hàm được gọi khi một sự kiện cụ thể xảy ra, chẳng hạn như khi người dùng nhấp vào một nút. Hướng dẫn này chỉ cho bạn cách bạn có thể triển khai addEventListener () trong mã của mình.

Hiểu sự kiện và trình xử lý sự kiện

Sự kiện là các hành động xảy ra khi người dùng hoặc trình duyệt thao tác trên một trang. Chúng đóng một vai trò quan trọng vì chúng có thể khiến các phần tử của trang web thay đổi động.

Ví dụ: khi trình duyệt tải xong một tài liệu, thì một loadsự kiện đã xảy ra. Nếu người dùng nhấp vào một nút trên một trang, thì một clicksự kiện đã xảy ra.

Nhiều sự kiện có thể xảy ra một lần, nhiều lần hoặc không bao giờ. Bạn cũng có thể không biết khi nào một sự kiện sẽ xảy ra, đặc biệt nếu sự kiện đó do người dùng tạo.

Trong các tình huống này, bạn cần một trình xử lý sự kiện để phát hiện khi nào một sự kiện xảy ra. Bằng cách này, bạn có thể thiết lập mã để phản ứng với các sự kiện khi chúng xảy ra nhanh chóng.

JavaScript cung cấp một trình xử lý sự kiện ở dạng addEventListener()phương thức. Trình xử lý này có thể được đính kèm với một phần tử HTML cụ thể mà bạn muốn theo dõi các sự kiện và phần tử này có thể có nhiều trình xử lý được đính kèm.

Cú pháp addEventListener ()

Đây là cú pháp:

target.addEventListener(event, function, useCapture) 
  • target : phần tử HTML mà bạn muốn thêm trình xử lý sự kiện của mình vào. Phần tử này tồn tại như một phần của Mô hình đối tượng tài liệu (DOM) và bạn có thể muốn tìm hiểu về cách chọn phần tử DOM.
  • event : một chuỗi chỉ định tên của sự kiện. Chúng tôi đã đề cập loadclickcác sự kiện. Đối với những người tò mò, đây là danh sách đầy đủ các sự kiện HTML DOM.
  • function : chỉ định hàm chạy khi sự kiện được phát hiện. Đây là điều kỳ diệu có thể cho phép các trang web của bạn thay đổi động.
  • useCapture : một giá trị Boolean tùy chọn (đúng hoặc sai) chỉ định liệu sự kiện nên được thực thi trong giai đoạn bắt hoặc tạo bọt. Trong trường hợp các phần tử HTML lồng nhau (chẳng hạn như imgtrong a div) có trình xử lý sự kiện đính kèm, giá trị này xác định sự kiện nào được thực thi trước. Theo mặc định, nó được đặt thành false, có nghĩa là trình xử lý sự kiện HTML trong cùng được thực thi đầu tiên (giai đoạn sôi nổi).

Ví dụ về mã addEventListener ()

Đây là một ví dụ đơn giản mà tôi đã làm cho bạn thấy addEventListener()hành động của nó.

Khi người dùng nhấp vào nút, một thông báo sẽ được hiển thị. Một nút bấm khác sẽ ẩn tin nhắn. Đây là JavaScript có liên quan:

let button = document.querySelector('#button'); let msg = document.querySelector('#message'); button.addEventListener('click', ()=>{ msg.classList.toggle('reveal'); }) 

Thực hiện theo cú pháp được hiển thị trước đây cho addEventListener():

  • target : phần tử HTML vớiid='button'
  • chức năng : ẩn danh (mũi tên) chức năng thiết lập mã cần thiết để tiết lộ / ẩn tin nhắn
  • useCapture : trái sang giá trị mặc định củafalse

Chức năng của tôi có thể tiết lộ / ẩn thông báo bằng cách thêm / xóa một lớp CSS được gọi là "lộ" để thay đổi khả năng hiển thị của phần tử thông báo.

Tất nhiên trong mã của bạn, hãy tùy chỉnh chức năng này. Bạn cũng có thể thay thế chức năng ẩn danh bằng một chức năng được đặt tên của riêng bạn.

Chuyển sự kiện dưới dạng tham số

Đôi khi chúng tôi có thể muốn biết thêm thông tin về sự kiện, chẳng hạn như phần tử nào đã được nhấp. Trong tình huống này, chúng ta cần truyền một tham số sự kiện vào hàm của chúng ta.

Ví dụ này cho thấy cách bạn có thể lấy id của phần tử:

button.addEventListener('click', (e)=>{ console.log(e.target.id) }) 

Ở đây tham số sự kiện là một biến được đặt tên enhưng nó có thể dễ dàng được gọi bất kỳ thứ gì khác chẳng hạn như "sự kiện". Tham số này là một đối tượng chứa nhiều thông tin khác nhau về sự kiện, chẳng hạn như id đích.

Bạn không phải làm bất cứ điều gì đặc biệt và JavaScript tự động biết phải làm gì khi bạn chuyển một tham số theo cách này vào hàm của mình.

Xóa trình xử lý sự kiện

Nếu vì lý do nào đó mà bạn không muốn trình xử lý sự kiện kích hoạt nữa, thì đây là cách xóa nó:

target.removeEventListener(event, function, useCapture); 

Các thông số giống như addEventListener().

Tập luyện giúp hoàn hảo hơn

Cách tốt nhất để trở nên tốt hơn với trình xử lý sự kiện là thực hành với mã của riêng bạn.

Đây là một dự án ví dụ mà tôi đã thực hiện, trong đó tôi đã sử dụng các trình xử lý sự kiện để thay đổi màu sắc, kích thước và tốc độ của bong bóng chảy trên nền của trang web (bạn sẽ cần nhấp vào bảng điều khiển trung tâm để hiển thị các điều khiển).

Hãy vui vẻ và đi làm một cái gì đó tuyệt vời!

Để có thêm kiến ​​thức phát triển web thân thiện với người mới bắt đầu, hãy truy cập blog của tôi tại 1000 Mile World và theo dõi tôi trên Twitter.