HomeLập trìnhJavaScriptPhương thức addEventListener()...

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 về Sự kiện và Trình xử lý Sự kiện

Sự kiện là những 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 thành phần của trang web thay đổi linh hoạt.

Ví dụ: khi trình duyệt tải xong một tài liệu, thì một load sự 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 click sự 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 những tình huống này, bạn cần một xử lý sự kiện để phát hiện khi 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 diễn ra nhanh chóng.

JavaScript cung cấp một trình xử lý sự kiện dưới dạng addEventListener() phương pháp. 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ử đó có thể có nhiều hơn một trình xử lý được đính kèm.

Đọc thêm  Hãy nói về dấu chấm phẩy trong JavaScript

addEventListener() Cú pháp

Đây là cú pháp:

target.addEventListener(event, function, useCapture)

  • Mục tiêu: 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.
  • Sự kiện: một chuỗi xác định tên của sự kiện. chúng tôi đã đề cập loadclick 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.
  • chức năng: chỉ định chức năng sẽ chạy khi phát hiện sự kiện. Đây là điều kỳ diệu có thể cho phép các trang web của bạn thay đổi linh hoạt.
  • sử dụngCapture: một giá trị Boolean tùy chọn (đúng hoặc sai) chỉ định liệu sự kiện có nên được thực thi trong giai đoạn thu thập hoặc tạo bọt hay không. Trong trường hợp các phần tử HTML lồng nhau (chẳng hạn như một img trong vòng một div) với các trình xử lý sự kiện được đính kèm, giá trị này sẽ xác định sự kiện nào được thực hiện trước. Theo mặc định, nó được đặt thành false, điều đó có nghĩa là trình xử lý sự kiện HTML trong cùng được thực thi trước (giai đoạn sủi bọt).

addEventListener() Mã ví dụ

Ví dụ đơn giản chứng minh addEventListener()

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

Đọc thêm  Tại sao JavaScript là ngôn ngữ lập trình của tương lai

Khi người dùng nhấp vào nút, một thông báo sẽ được hiển thị. Một lần bấm nút 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');
})

Đi theo cú pháp được hiển thị trước đó cho addEventListener():

  • Mục tiêu: phần tử HTML với id='button'
  • chức năng: chức năng ẩn danh (mũi tên) thiết lập mã cần thiết để hiển thị/ẩn tin nhắn
  • sử dụngCapture: để lại giá trị mặc định của false

Chức năng của tôi có thể hiển thị/ẩn thông báo bằng cách thêm/xóa một lớp CSS có tên là “tiết lộ” làm thay đổi mức độ hiển thị của thành phần thông báo.

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

Truyề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 chuyển một tham số sự kiện cho hàm của mình.

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ên e nhưng nó có thể dễ dàng được gọi là 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.

Đọc thêm  Giới thiệu về cách thức hoạt động của trình quản lý gói JavaScript

Bạn không phải làm bất cứ điều gì đặc biệt và JavaScript sẽ tự động biết phải làm gì khi bạn chuyển tham số theo cách này cho 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 kích hoạt trình xử lý sự kiện nữa, đây là cách xóa trình xử lý sự kiệ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 để cải thiện 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 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!

Để biết 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.





Zik.vn – Biên dịch & Biên soạn Lại

spot_img

Create a website from scratch

Just drag and drop elements in a page to get started with Newspaper Theme.

Buy Now ⟶

Bài viết liên quang

DMCA.com Protection Status