Xử lý sự kiện trong javascript với ví dụ

Một số chương trình hoạt động với đầu vào trực tiếp của người dùng, chẳng hạn như hành động của chuột và bàn phím. Loại đầu vào đó không có sẵn dưới dạng cấu trúc dữ liệu được tổ chức tốt—nó xuất hiện từng phần một, theo thời gian thực và chương trình dự kiến ​​sẽ phản hồi nó khi nó xảy ra

xử lý sự kiện

Hãy tưởng tượng một giao diện mà cách duy nhất để biết liệu một phím trên bàn phím có được nhấn hay không là đọc trạng thái hiện tại của phím đó. Để có thể phản ứng với các lần nhấn phím, bạn sẽ phải liên tục đọc trạng thái của phím để bắt được nó trước khi nó được nhả ra lần nữa. Sẽ rất nguy hiểm khi thực hiện các tính toán tốn nhiều thời gian khác vì bạn có thể bỏ lỡ một lần nhấn phím

Một số máy nguyên thủy xử lý đầu vào như thế. Một bước tiến lên từ điều này là phần cứng hoặc hệ điều hành sẽ nhận thấy thao tác nhấn phím và đặt nó vào hàng đợi. Sau đó, một chương trình có thể định kỳ kiểm tra hàng đợi cho các sự kiện mới và phản ứng với những gì nó tìm thấy ở đó

Tất nhiên, nó phải nhớ xem hàng đợi và làm điều đó thường xuyên, bởi vì bất kỳ khoảng thời gian nào giữa phím được nhấn và chương trình nhận thấy sự kiện sẽ khiến phần mềm cảm thấy không phản hồi. Cách tiếp cận này được gọi là bỏ phiếu. Hầu hết các lập trình viên muốn tránh nó

Một cơ chế tốt hơn là hệ thống sẽ chủ động thông báo cho mã của chúng ta khi có sự kiện xảy ra. Các trình duyệt thực hiện điều này bằng cách cho phép chúng tôi đăng ký các chức năng làm trình xử lý cho các sự kiện cụ thể

<p>Click this document to activate the handler.</p>
<script>
  window.addEventListener("click", () => {
    console.log("You knocked?");
  });
</script>

Liên kết

<button>Act-once button</button>
<script>
  let button = document.querySelector("button");
  function once() {
    console.log("Done.");
    button.removeEventListener("click", once);
  }
  button.addEventListener("click", once);
</script>

<button>Act-once button</button>
<script>
  let button = document.querySelector("button");
  function once() {
    console.log("Done.");
    button.removeEventListener("click", once);
  }
  button.addEventListener("click", once);
</script>

Sự kiện và nút DOM

Mỗi trình xử lý sự kiện của trình duyệt được đăng ký trong một ngữ cảnh. Trong ví dụ trước, chúng tôi đã gọi

<button>Act-once button</button>
<script>
  let button = document.querySelector("button");
  function once() {
    console.log("Done.");
    button.removeEventListener("click", once);
  }
  button.addEventListener("click", once);
</script>

<button>Act-once button</button>
<script>
  let button = document.querySelector("button");
  function once() {
    console.log("Done.");
    button.removeEventListener("click", once);
  }
  button.addEventListener("click", once);
</script>

<button>Click me</button>
<p>No handler here.</p>
<script>
  let button = document.querySelector("button");
  button.addEventListener("click", () => {
    console.log("Button clicked.");
  });
</script>

Ví dụ đó gắn một trình xử lý vào nút nút. Bấm vào nút khiến trình xử lý đó chạy, nhưng bấm vào phần còn lại của tài liệu thì không

Cung cấp cho một nút một thuộc tính

<button>Act-once button</button>
<script>
  let button = document.querySelector("button");
  function once() {
    console.log("Done.");
    button.removeEventListener("click", once);
  }
  button.addEventListener("click", once);
</script>

<button>Act-once button</button>
<script>
  let button = document.querySelector("button");
  function once() {
    console.log("Done.");
    button.removeEventListener("click", once);
  }
  button.addEventListener("click", once);
</script>

Nhưng một nút chỉ có thể có một thuộc tính

<button>Act-once button</button>
<script>
  let button = document.querySelector("button");
  function once() {
    console.log("Done.");
    button.removeEventListener("click", once);
  }
  button.addEventListener("click", once);
</script>

<button>Act-once button</button>
<script>
  let button = document.querySelector("button");
  function once() {
    console.log("Done.");
    button.removeEventListener("click", once);
  }
  button.addEventListener("click", once);
</script>

Phương thức

<button>Act-once button</button>
<script>
  let button = document.querySelector("button");
  function once() {
    console.log("Done.");
    button.removeEventListener("click", once);
  }
  button.addEventListener("click", once);
</script>

<button>Act-once button</button>
<script>
  let button = document.querySelector("button");
  function once() {
    console.log("Done.");
    button.removeEventListener("click", once);
  }
  button.addEventListener("click", once);
</script>

<button>Act-once button</button>
<script>
  let button = document.querySelector("button");
  function once() {
    console.log("Done.");
    button.removeEventListener("click", once);
  }
  button.addEventListener("click", once);
</script>

Hàm được cung cấp cho

<button>Act-once button</button>
<script>
  let button = document.querySelector("button");
  function once() {
    console.log("Done.");
    button.removeEventListener("click", once);
  }
  button.addEventListener("click", once);
</script>

<button>Act-once button</button>
<script>
  let button = document.querySelector("button");
  function once() {
    console.log("Done.");
    button.removeEventListener("click", once);
  }
  button.addEventListener("click", once);
</script>

đối tượng sự kiện

Mặc dù chúng ta đã bỏ qua nó cho đến nay, nhưng các hàm xử lý sự kiện được truyền một đối số. đối tượng sự kiện. Đối tượng này chứa thông tin bổ sung về sự kiện. Ví dụ: nếu chúng ta muốn biết nút chuột nào đã được nhấn, chúng ta có thể xem thuộc tính

<button>Act-once button</button>
<script>
  let button = document.querySelector("button");
  function once() {
    console.log("Done.");
    button.removeEventListener("click", once);
  }
  button.addEventListener("click", once);
</script>

<button>Act-once button</button>
<script>
  let button = document.querySelector("button");
  function once() {
    console.log("Done.");
    button.removeEventListener("click", once);
  }
  button.addEventListener("click", once);
</script>

Thông tin được lưu trữ trong một đối tượng sự kiện khác nhau tùy theo loại sự kiện. Chúng ta sẽ thảo luận về các loại khác nhau sau trong chương này. Thuộc tính

<button>Act-once button</button>
<script>
  let button = document.querySelector("button");
  function once() {
    console.log("Done.");
    button.removeEventListener("click", once);
  }
  button.addEventListener("click", once);
</script>

<button>Act-once button</button>
<script>
  let button = document.querySelector("button");
  function once() {
    console.log("Done.");
    button.removeEventListener("click", once);
  }
  button.addEventListener("click", once);
</script>

<button>Act-once button</button>
<script>
  let button = document.querySelector("button");
  function once() {
    console.log("Done.");
    button.removeEventListener("click", once);
  }
  button.addEventListener("click", once);
</script>

Lan truyền

Đối với hầu hết các loại sự kiện, trình xử lý đã đăng ký trên các nút có nút con cũng sẽ nhận được các sự kiện xảy ra ở nút con. Nếu một nút bên trong một đoạn văn được nhấp vào, trình xử lý sự kiện trên đoạn văn cũng sẽ thấy sự kiện nhấp chuột

Nhưng nếu cả đoạn văn và nút đều có trình xử lý, thì trình xử lý cụ thể hơn—trình xử lý trên nút—sẽ đi trước. Sự kiện được cho là lan truyền ra bên ngoài, từ nút nơi nó xảy ra đến nút cha của nút đó và đến thư mục gốc của tài liệu. Cuối cùng, sau khi tất cả các trình xử lý đã đăng ký trên một nút cụ thể đã đến lượt của họ, những trình xử lý đã đăng ký trên toàn bộ cửa sổ sẽ có cơ hội phản hồi sự kiện

Tại bất kỳ thời điểm nào, trình xử lý sự kiện có thể gọi phương thức

<button>Act-once button</button>
<script>
  let button = document.querySelector("button");
  function once() {
    console.log("Done.");
    button.removeEventListener("click", once);
  }
  button.addEventListener("click", once);
</script>

Ví dụ sau đăng ký trình xử lý

<button>Act-once button</button>
<script>
  let button = document.querySelector("button");
  function once() {
    console.log("Done.");
    button.removeEventListener("click", once);
  }
  button.addEventListener("click", once);
</script>

<button>Act-once button</button>
<script>
  let button = document.querySelector("button");
  function once() {
    console.log("Done.");
    button.removeEventListener("click", once);
  }
  button.addEventListener("click", once);
</script>

<button>Act-once button</button>
<script>
  let button = document.querySelector("button");
  function once() {
    console.log("Done.");
    button.removeEventListener("click", once);
  }
  button.addEventListener("click", once);
</script>

Hầu hết các đối tượng sự kiện đều có thuộc tính

<button>Act-once button</button>
<script>
  let button = document.querySelector("button");
  function once() {
    console.log("Done.");
    button.removeEventListener("click", once);
  }
  button.addEventListener("click", once);
</script>

Cũng có thể sử dụng thuộc tính

<button>Act-once button</button>
<script>
  let button = document.querySelector("button");
  function once() {
    console.log("Done.");
    button.removeEventListener("click", once);
  }
  button.addEventListener("click", once);
</script>

<button>Act-once button</button>
<script>
  let button = document.querySelector("button");
  function once() {
    console.log("Done.");
    button.removeEventListener("click", once);
  }
  button.addEventListener("click", once);
</script>

<button>Act-once button</button>
<script>
  let button = document.querySelector("button");
  function once() {
    console.log("Done.");
    button.removeEventListener("click", once);
  }
  button.addEventListener("click", once);
</script>

hành động mặc định

Nhiều sự kiện có một hành động mặc định được liên kết với chúng. Nếu bạn nhấp vào một liên kết, bạn sẽ được đưa đến mục tiêu của liên kết. Nếu bạn nhấn mũi tên xuống, trình duyệt sẽ cuộn trang xuống. Nếu bạn nhấp chuột phải, bạn sẽ nhận được một menu ngữ cảnh. Và như thế

Đối với hầu hết các loại sự kiện, trình xử lý sự kiện JavaScript được gọi trước khi hành vi mặc định diễn ra. Nếu trình xử lý không muốn hành vi bình thường này xảy ra, thường là do nó đã xử lý sự kiện rồi, thì nó có thể gọi phương thức

<button>Act-once button</button>
<script>
  let button = document.querySelector("button");
  function once() {
    console.log("Done.");
    button.removeEventListener("click", once);
  }
  button.addEventListener("click", once);
</script>

Điều này có thể được sử dụng để thực hiện các phím tắt hoặc menu ngữ cảnh của riêng bạn. Nó cũng có thể được sử dụng để can thiệp một cách đáng ghét vào hành vi mà người dùng mong đợi. Ví dụ: đây là một liên kết không thể theo dõi

<button>Act-once button</button>
<script>
  let button = document.querySelector("button");
  function once() {
    console.log("Done.");
    button.removeEventListener("click", once);
  }
  button.addEventListener("click", once);
</script>

Cố gắng không làm những việc như vậy trừ khi bạn có lý do thực sự chính đáng để. Sẽ rất khó chịu cho những người sử dụng trang của bạn khi hành vi dự kiến ​​bị phá vỡ

Tùy thuộc vào trình duyệt, một số sự kiện hoàn toàn không thể bị chặn. Ví dụ: trên Chrome, phím tắt để đóng tab hiện tại ( điều khiển -W hoặc lệnh-W) cannot be handled by JavaScript.

Sự kiện chính

Khi nhấn một phím trên bàn phím, trình duyệt của bạn sẽ kích hoạt sự kiện

<button>Act-once button</button>
<script>
  let button = document.querySelector("button");
  function once() {
    console.log("Done.");
    button.removeEventListener("click", once);
  }
  button.addEventListener("click", once);
</script>

<button>Act-once button</button>
<script>
  let button = document.querySelector("button");
  function once() {
    console.log("Done.");
    button.removeEventListener("click", once);
  }
  button.addEventListener("click", once);
</script>

<button>Act-once button</button>
<script>
  let button = document.querySelector("button");
  function once() {
    console.log("Done.");
    button.removeEventListener("click", once);
  }
  button.addEventListener("click", once);
</script>

Mặc dù có tên như vậy, nhưng

<button>Act-once button</button>
<script>
  let button = document.querySelector("button");
  function once() {
    console.log("Done.");
    button.removeEventListener("click", once);
  }
  button.addEventListener("click", once);
</script>

Ví dụ đã xem xét thuộc tính

<button>Act-once button</button>
<script>
  let button = document.querySelector("button");
  function once() {
    console.log("Done.");
    button.removeEventListener("click", once);
  }
  button.addEventListener("click", once);
</script>

<button>Act-once button</button>
<script>
  let button = document.querySelector("button");
  function once() {
    console.log("Done.");
    button.removeEventListener("click", once);
  }
  button.addEventListener("click", once);
</script>

<button>Act-once button</button>
<script>
  let button = document.querySelector("button");
  function once() {
    console.log("Done.");
    button.removeEventListener("click", once);
  }
  button.addEventListener("click", once);
</script>

<button>Act-once button</button>
<script>
  let button = document.querySelector("button");
  function once() {
    console.log("Done.");
    button.removeEventListener("click", once);
  }
  button.addEventListener("click", once);
</script>

<button>Act-once button</button>
<script>
  let button = document.querySelector("button");
  function once() {
    console.log("Done.");
    button.removeEventListener("click", once);
  }
  button.addEventListener("click", once);
</script>

<button>Act-once button</button>
<script>
  let button = document.querySelector("button");
  function once() {
    console.log("Done.");
    button.removeEventListener("click", once);
  }
  button.addEventListener("click", once);
</script>

Các phím bổ trợ như shift , control , < . Tuy nhiên, khi tìm kiếm các tổ hợp phím, bạn cũng có thể tìm hiểu xem các phím này có được nhấn giữ hay không bằng cách xem các thuộc tính

<button>Act-once button</button>
<script>
  let button = document.querySelector("button");
  function once() {
    console.log("Done.");
    button.removeEventListener("click", once);
  }
  button.addEventListener("click", once);
</script>

<button>Act-once button</button>
<script>
  let button = document.querySelector("button");
  function once() {
    console.log("Done.");
    button.removeEventListener("click", once);
  }
  button.addEventListener("click", once);
</script>

<button>Act-once button</button>
<script>
  let button = document.querySelector("button");
  function once() {
    console.log("Done.");
    button.removeEventListener("click", once);
  }
  button.addEventListener("click", once);
</script>

<button>Act-once button</button>
<script>
  let button = document.querySelector("button");
  function once() {
    console.log("Done.");
    button.removeEventListener("click", once);
  }
  button.addEventListener("click", once);
</script>

<button>Act-once button</button>
<script>
  let button = document.querySelector("button");
  function once() {
    console.log("Done.");
    button.removeEventListener("click", once);
  }
  button.addEventListener("click", once);
</script>

<button>Act-once button</button>
<script>
  let button = document.querySelector("button");
  function once() {
    console.log("Done.");
    button.removeEventListener("click", once);
  }
  button.addEventListener("click", once);
</script>

<button>Act-once button</button>
<script>
  let button = document.querySelector("button");
  function once() {
    console.log("Done.");
    button.removeEventListener("click", once);
  }
  button.addEventListener("click", once);
</script>

<button>Act-once button</button>
<script>
  let button = document.querySelector("button");
  function once() {
    console.log("Done.");
    button.removeEventListener("click", once);
  }
  button.addEventListener("click", once);
</script>

<button>Act-once button</button>
<script>
  let button = document.querySelector("button");
  function once() {
    console.log("Done.");
    button.removeEventListener("click", once);
  }
  button.addEventListener("click", once);
</script>

Nút DOM nơi một sự kiện quan trọng bắt đầu phụ thuộc vào phần tử có tiêu điểm khi nhấn phím. Hầu hết các nút không thể có tiêu điểm trừ khi bạn cung cấp cho chúng thuộc tính

<button>Act-once button</button>
<script>
  let button = document.querySelector("button");
  function once() {
    console.log("Done.");
    button.removeEventListener("click", once);
  }
  button.addEventListener("click", once);
</script>

<button>Act-once button</button>
<script>
  let button = document.querySelector("button");
  function once() {
    console.log("Done.");
    button.removeEventListener("click", once);
  }
  button.addEventListener("click", once);
</script>

Khi người dùng đang nhập văn bản, việc sử dụng các sự kiện chính để tìm ra nội dung đang được nhập là một vấn đề. Một số nền tảng, đáng chú ý nhất là bàn phím ảo trên điện thoại Android, không kích hoạt các sự kiện quan trọng. Nhưng ngay cả khi bạn có bàn phím kiểu cũ, một số kiểu nhập văn bản không khớp với các phím bấm một cách đơn giản, chẳng hạn như phần mềm trình soạn phương thức nhập (IME) được sử dụng bởi những người có tập lệnh không vừa với bàn phím, trong đó

Để thông báo khi nội dung nào đó được nhập, các yếu tố mà bạn có thể nhập vào, chẳng hạn như thẻ

<button>Act-once button</button>
<script>
  let button = document.querySelector("button");
  function once() {
    console.log("Done.");
    button.removeEventListener("click", once);
  }
  button.addEventListener("click", once);
</script>

<button>Act-once button</button>
<script>
  let button = document.querySelector("button");
  function once() {
    console.log("Done.");
    button.removeEventListener("click", once);
  }
  button.addEventListener("click", once);
</script>

<button>Act-once button</button>
<script>
  let button = document.querySelector("button");
  function once() {
    console.log("Done.");
    button.removeEventListener("click", once);
  }
  button.addEventListener("click", once);
</script>

sự kiện con trỏ

Hiện tại có hai cách được sử dụng rộng rãi để chỉ vào những thứ trên màn hình. chuột (bao gồm các thiết bị hoạt động như chuột, chẳng hạn như bàn di chuột và bi xoay) và màn hình cảm ứng. Chúng tạo ra các loại sự kiện khác nhau

nhấp chuột

Nhấn nút chuột khiến một số sự kiện kích hoạt. Sự kiện

<button>Act-once button</button>
<script>
  let button = document.querySelector("button");
  function once() {
    console.log("Done.");
    button.removeEventListener("click", once);
  }
  button.addEventListener("click", once);
</script>

<button>Act-once button</button>
<script>
  let button = document.querySelector("button");
  function once() {
    console.log("Done.");
    button.removeEventListener("click", once);
  }
  button.addEventListener("click", once);
</script>

<button>Act-once button</button>
<script>
  let button = document.querySelector("button");
  function once() {
    console.log("Done.");
    button.removeEventListener("click", once);
  }
  button.addEventListener("click", once);
</script>

<button>Act-once button</button>
<script>
  let button = document.querySelector("button");
  function once() {
    console.log("Done.");
    button.removeEventListener("click", once);
  }
  button.addEventListener("click", once);
</script>

Sau sự kiện

<button>Act-once button</button>
<script>
  let button = document.querySelector("button");
  function once() {
    console.log("Done.");
    button.removeEventListener("click", once);
  }
  button.addEventListener("click", once);
</script>

<button>Act-once button</button>
<script>
  let button = document.querySelector("button");
  function once() {
    console.log("Done.");
    button.removeEventListener("click", once);
  }
  button.addEventListener("click", once);
</script>

<button>Act-once button</button>
<script>
  let button = document.querySelector("button");
  function once() {
    console.log("Done.");
    button.removeEventListener("click", once);
  }
  button.addEventListener("click", once);
</script>

Nếu hai lần nhấp xảy ra gần nhau, sự kiện

<button>Act-once button</button>
<script>
  let button = document.querySelector("button");
  function once() {
    console.log("Done.");
    button.removeEventListener("click", once);
  }
  button.addEventListener("click", once);
</script>

Để có thông tin chính xác về địa điểm xảy ra sự kiện chuột, bạn có thể xem các thuộc tính

<button>Act-once button</button>
<script>
  let button = document.querySelector("button");
  function once() {
    console.log("Done.");
    button.removeEventListener("click", once);
  }
  button.addEventListener("click", once);
</script>

<button>Act-once button</button>
<script>
  let button = document.querySelector("button");
  function once() {
    console.log("Done.");
    button.removeEventListener("click", once);
  }
  button.addEventListener("click", once);
</script>

<button>Act-once button</button>
<script>
  let button = document.querySelector("button");
  function once() {
    console.log("Done.");
    button.removeEventListener("click", once);
  }
  button.addEventListener("click", once);
</script>

<button>Act-once button</button>
<script>
  let button = document.querySelector("button");
  function once() {
    console.log("Done.");
    button.removeEventListener("click", once);
  }
  button.addEventListener("click", once);
</script>

Sau đây thực hiện một chương trình vẽ nguyên thủy. Mỗi khi bạn nhấp vào tài liệu, nó sẽ thêm một dấu chấm dưới con trỏ chuột của bạn. Xem Chương 19 để biết chương trình vẽ ít nguyên thủy hơn

<button>Act-once button</button>
<script>
  let button = document.querySelector("button");
  function once() {
    console.log("Done.");
    button.removeEventListener("click", once);
  }
  button.addEventListener("click", once);
</script>

chuyển động chuột

Mỗi khi con trỏ chuột di chuyển, một sự kiện

<button>Act-once button</button>
<script>
  let button = document.querySelector("button");
  function once() {
    console.log("Done.");
    button.removeEventListener("click", once);
  }
  button.addEventListener("click", once);
</script>

Ví dụ, chương trình sau hiển thị một thanh và thiết lập các trình xử lý sự kiện để việc kéo sang trái hoặc phải trên thanh này làm cho nó hẹp hơn hoặc rộng hơn

<button>Click me</button>
<p>No handler here.</p>
<script>
  let button = document.querySelector("button");
  button.addEventListener("click", () => {
    console.log("Button clicked.");
  });
</script>

Lưu ý rằng trình xử lý

<button>Act-once button</button>
<script>
  let button = document.querySelector("button");
  function once() {
    console.log("Done.");
    button.removeEventListener("click", once);
  }
  button.addEventListener("click", once);
</script>

Chúng ta phải ngừng thay đổi kích thước thanh khi thả nút chuột. Để làm được điều đó, chúng ta có thể sử dụng thuộc tính

<button>Act-once button</button>
<script>
  let button = document.querySelector("button");
  function once() {
    console.log("Done.");
    button.removeEventListener("click", once);
  }
  button.addEventListener("click", once);
</script>

<button>Act-once button</button>
<script>
  let button = document.querySelector("button");
  function once() {
    console.log("Done.");
    button.removeEventListener("click", once);
  }
  button.addEventListener("click", once);
</script>

Lưu ý rằng thứ tự của các mã này khác với thứ tự được sử dụng bởi

<button>Act-once button</button>
<script>
  let button = document.querySelector("button");
  function once() {
    console.log("Done.");
    button.removeEventListener("click", once);
  }
  button.addEventListener("click", once);
</script>

sự kiện chạm

Kiểu trình duyệt đồ họa mà chúng tôi sử dụng được thiết kế dành cho giao diện chuột, vào thời điểm mà màn hình cảm ứng còn hiếm. Để làm cho Web “hoạt động” trên điện thoại màn hình cảm ứng đời đầu, ở một mức độ nhất định, các trình duyệt dành cho những thiết bị đó đã giả vờ rằng các sự kiện chạm là sự kiện chuột. Nếu bạn nhấn vào màn hình, bạn sẽ nhận được các sự kiện

<button>Act-once button</button>
<script>
  let button = document.querySelector("button");
  function once() {
    console.log("Done.");
    button.removeEventListener("click", once);
  }
  button.addEventListener("click", once);
</script>

<button>Act-once button</button>
<script>
  let button = document.querySelector("button");
  function once() {
    console.log("Done.");
    button.removeEventListener("click", once);
  }
  button.addEventListener("click", once);
</script>

<button>Act-once button</button>
<script>
  let button = document.querySelector("button");
  function once() {
    console.log("Done.");
    button.removeEventListener("click", once);
  }
  button.addEventListener("click", once);
</script>

Nhưng ảo ảnh này không phải là rất mạnh mẽ. Màn hình cảm ứng hoạt động khác với chuột. nó không có nhiều nút, bạn không thể theo dõi ngón tay khi nó không ở trên màn hình (để mô phỏng

<button>Act-once button</button>
<script>
  let button = document.querySelector("button");
  function once() {
    console.log("Done.");
    button.removeEventListener("click", once);
  }
  button.addEventListener("click", once);
</script>

Sự kiện chuột chỉ bao gồm tương tác chạm trong các trường hợp đơn giản—nếu bạn thêm trình xử lý

<button>Act-once button</button>
<script>
  let button = document.querySelector("button");
  function once() {
    console.log("Done.");
    button.removeEventListener("click", once);
  }
  button.addEventListener("click", once);
</script>

Có các loại sự kiện cụ thể được kích hoạt bằng tương tác chạm. Khi một ngón tay bắt đầu chạm vào màn hình, bạn sẽ nhận được sự kiện

<button>Act-once button</button>
<script>
  let button = document.querySelector("button");
  function once() {
    console.log("Done.");
    button.removeEventListener("click", once);
  }
  button.addEventListener("click", once);
</script>

<button>Act-once button</button>
<script>
  let button = document.querySelector("button");
  function once() {
    console.log("Done.");
    button.removeEventListener("click", once);
  }
  button.addEventListener("click", once);
</script>

<button>Act-once button</button>
<script>
  let button = document.querySelector("button");
  function once() {
    console.log("Done.");
    button.removeEventListener("click", once);
  }
  button.addEventListener("click", once);
</script>

Vì nhiều màn hình cảm ứng có thể phát hiện nhiều ngón tay cùng lúc nên những sự kiện này không có một bộ tọa độ nào được liên kết với chúng. Thay vào đó, các đối tượng sự kiện của chúng có một thuộc tính

<button>Act-once button</button>
<script>
  let button = document.querySelector("button");
  function once() {
    console.log("Done.");
    button.removeEventListener("click", once);
  }
  button.addEventListener("click", once);
</script>

<button>Act-once button</button>
<script>
  let button = document.querySelector("button");
  function once() {
    console.log("Done.");
    button.removeEventListener("click", once);
  }
  button.addEventListener("click", once);
</script>

<button>Act-once button</button>
<script>
  let button = document.querySelector("button");
  function once() {
    console.log("Done.");
    button.removeEventListener("click", once);
  }
  button.addEventListener("click", once);
</script>

<button>Act-once button</button>
<script>
  let button = document.querySelector("button");
  function once() {
    console.log("Done.");
    button.removeEventListener("click", once);
  }
  button.addEventListener("click", once);
</script>

<button>Act-once button</button>
<script>
  let button = document.querySelector("button");
  function once() {
    console.log("Done.");
    button.removeEventListener("click", once);
  }
  button.addEventListener("click", once);
</script>

Bạn có thể làm điều gì đó như thế này để hiển thị các vòng tròn màu đỏ xung quanh mỗi ngón tay chạm vào

<button>Click me</button>
<p>No handler here.</p>
<script>
  let button = document.querySelector("button");
  button.addEventListener("click", () => {
    console.log("Button clicked.");
  });
</script>

Bạn sẽ thường muốn gọi

<button>Act-once button</button>
<script>
  let button = document.querySelector("button");
  function once() {
    console.log("Done.");
    button.removeEventListener("click", once);
  }
  button.addEventListener("click", once);
</script>

Cuộn sự kiện

Bất cứ khi nào một phần tử được cuộn, một sự kiện

<button>Act-once button</button>
<script>
  let button = document.querySelector("button");
  function once() {
    console.log("Done.");
    button.removeEventListener("click", once);
  }
  button.addEventListener("click", once);
</script>

Ví dụ sau vẽ một thanh tiến trình phía trên tài liệu và cập nhật nó để lấp đầy khi bạn cuộn xuống

<button>Click me</button>
<p>No handler here.</p>
<script>
  let button = document.querySelector("button");
  button.addEventListener("click", () => {
    console.log("Button clicked.");
  });
</script>

Đặt một phần tử là

<button>Act-once button</button>
<script>
  let button = document.querySelector("button");
  function once() {
    console.log("Done.");
    button.removeEventListener("click", once);
  }
  button.addEventListener("click", once);
</script>

<button>Act-once button</button>
<script>
  let button = document.querySelector("button");
  function once() {
    console.log("Done.");
    button.removeEventListener("click", once);
  }
  button.addEventListener("click", once);
</script>

<button>Act-once button</button>
<script>
  let button = document.querySelector("button");
  function once() {
    console.log("Done.");
    button.removeEventListener("click", once);
  }
  button.addEventListener("click", once);
</script>

<button>Click me</button>
<p>No handler here.</p>
<script>
  let button = document.querySelector("button");
  button.addEventListener("click", () => {
    console.log("Button clicked.");
  });
</script>

<button>Click me</button>
<p>No handler here.</p>
<script>
  let button = document.querySelector("button");
  button.addEventListener("click", () => {
    console.log("Button clicked.");
  });
</script>

Liên kết toàn cầu

<button>Click me</button>
<p>No handler here.</p>
<script>
  let button = document.querySelector("button");
  button.addEventListener("click", () => {
    console.log("Button clicked.");
  });
</script>

<button>Click me</button>
<p>No handler here.</p>
<script>
  let button = document.querySelector("button");
  button.addEventListener("click", () => {
    console.log("Button clicked.");
  });
</script>

<button>Click me</button>
<p>No handler here.</p>
<script>
  let button = document.querySelector("button");
  button.addEventListener("click", () => {
    console.log("Button clicked.");
  });
</script>

Gọi

<button>Act-once button</button>
<script>
  let button = document.querySelector("button");
  function once() {
    console.log("Done.");
    button.removeEventListener("click", once);
  }
  button.addEventListener("click", once);
</script>

Sự kiện tiêu điểm

Khi một phần tử đạt tiêu điểm, trình duyệt sẽ kích hoạt sự kiện

<button>Click me</button>
<p>No handler here.</p>
<script>
  let button = document.querySelector("button");
  button.addEventListener("click", () => {
    console.log("Button clicked.");
  });
</script>

<button>Click me</button>
<p>No handler here.</p>
<script>
  let button = document.querySelector("button");
  button.addEventListener("click", () => {
    console.log("Button clicked.");
  });
</script>

Không giống như các sự kiện đã thảo luận trước đó, hai sự kiện này không lan truyền. Trình xử lý trên phần tử cha không được thông báo khi phần tử con tăng hoặc giảm tiêu điểm

Ví dụ sau hiển thị văn bản trợ giúp cho trường văn bản hiện có tiêu điểm

<button>Click me</button>
<p>No handler here.</p>
<script>
  let button = document.querySelector("button");
  button.addEventListener("click", () => {
    console.log("Button clicked.");
  });
</script>

Đối tượng cửa sổ sẽ nhận các sự kiện

<button>Click me</button>
<p>No handler here.</p>
<script>
  let button = document.querySelector("button");
  button.addEventListener("click", () => {
    console.log("Button clicked.");
  });
</script>

<button>Click me</button>
<p>No handler here.</p>
<script>
  let button = document.querySelector("button");
  button.addEventListener("click", () => {
    console.log("Button clicked.");
  });
</script>

Tải sự kiện

Khi một trang tải xong, sự kiện

<button>Click me</button>
<p>No handler here.</p>
<script>
  let button = document.querySelector("button");
  button.addEventListener("click", () => {
    console.log("Button clicked.");
  });
</script>

<button>Click me</button>
<p>No handler here.</p>
<script>
  let button = document.querySelector("button");
  button.addEventListener("click", () => {
    console.log("Button clicked.");
  });
</script>

<button>Click me</button>
<p>No handler here.</p>
<script>
  let button = document.querySelector("button");
  button.addEventListener("click", () => {
    console.log("Button clicked.");
  });
</script>

Các phần tử như hình ảnh và thẻ tập lệnh tải tệp bên ngoài cũng có sự kiện

<button>Click me</button>
<p>No handler here.</p>
<script>
  let button = document.querySelector("button");
  button.addEventListener("click", () => {
    console.log("Button clicked.");
  });
</script>

Khi một trang bị đóng hoặc được điều hướng khỏi (ví dụ: bằng cách nhấp vào một liên kết), sự kiện

<button>Click me</button>
<p>No handler here.</p>
<script>
  let button = document.querySelector("button");
  button.addEventListener("click", () => {
    console.log("Button clicked.");
  });
</script>

<button>Click me</button>
<p>No handler here.</p>
<script>
  let button = document.querySelector("button");
  button.addEventListener("click", () => {
    console.log("Button clicked.");
  });
</script>

Sự kiện và vòng lặp sự kiện

Trong ngữ cảnh của vòng lặp sự kiện, như đã thảo luận trong Chương 11, trình xử lý sự kiện của trình duyệt hoạt động giống như các thông báo không đồng bộ khác. Chúng được lên lịch khi sự kiện xảy ra nhưng phải đợi các tập lệnh khác đang chạy kết thúc trước khi chúng có cơ hội chạy

Thực tế là các sự kiện chỉ có thể được xử lý khi không có gì khác đang chạy có nghĩa là nếu vòng lặp sự kiện được liên kết với công việc khác, mọi tương tác với trang (xảy ra thông qua các sự kiện) sẽ bị trì hoãn cho đến khi có thời gian để xử lý nó. Vì vậy, nếu bạn lên lịch quá nhiều công việc, với các trình xử lý sự kiện dài hạn hoặc nhiều sự kiện ngắn hạn, thì trang sẽ trở nên chậm và cồng kềnh khi sử dụng

Đối với trường hợp bạn thực sự muốn làm một số việc tốn thời gian trong nền mà không đóng băng trang, trình duyệt cung cấp một thứ gọi là nhân viên web. Công nhân là một quy trình JavaScript chạy dọc theo tập lệnh chính, theo dòng thời gian của chính nó

Hãy tưởng tượng rằng bình phương một số là một phép tính tốn nhiều thời gian mà chúng ta muốn thực hiện trong một chuỗi riêng biệt. Chúng ta có thể viết một tệp tên là

<button>Click me</button>
<p>No handler here.</p>
<script>
  let button = document.querySelector("button");
  button.addEventListener("click", () => {
    console.log("Button clicked.");
  });
</script>

<button>Click me</button>
<p>No handler here.</p>
<script>
  let button = document.querySelector("button");
  button.addEventListener("click", () => {
    console.log("Button clicked.");
  });
</script>

Để tránh sự cố có nhiều luồng chạm vào cùng một dữ liệu, worker không chia sẻ phạm vi toàn cầu của họ hoặc bất kỳ dữ liệu nào khác với môi trường của tập lệnh chính. Thay vào đó, bạn phải liên lạc với họ bằng cách gửi tin nhắn qua lại

Mã này sinh ra một công nhân đang chạy tập lệnh đó, gửi cho nó một vài tin nhắn và đưa ra các phản hồi

<button>Click me</button>
<p>No handler here.</p>
<script>
  let button = document.querySelector("button");
  button.addEventListener("click", () => {
    console.log("Button clicked.");
  });
</script>

Hàm

<button>Click me</button>
<p>No handler here.</p>
<script>
  let button = document.querySelector("button");
  button.addEventListener("click", () => {
    console.log("Button clicked.");
  });
</script>

<button>Click me</button>
<p>No handler here.</p>
<script>
  let button = document.querySelector("button");
  button.addEventListener("click", () => {
    console.log("Button clicked.");
  });
</script>

<button>Click me</button>
<p>No handler here.</p>
<script>
  let button = document.querySelector("button");
  button.addEventListener("click", () => {
    console.log("Button clicked.");
  });
</script>

hẹn giờ

Chúng ta đã thấy hàm

<button>Click me</button>
<p>No handler here.</p>
<script>
  let button = document.querySelector("button");
  button.addEventListener("click", () => {
    console.log("Button clicked.");
  });
</script>

Đôi khi bạn cần hủy một chức năng mà bạn đã lên lịch. Điều này được thực hiện bằng cách lưu trữ giá trị được trả về bởi

<button>Click me</button>
<p>No handler here.</p>
<script>
  let button = document.querySelector("button");
  button.addEventListener("click", () => {
    console.log("Button clicked.");
  });
</script>

<button>Click me</button>
<p>No handler here.</p>
<script>
  let button = document.querySelector("button");
  button.addEventListener("click", () => {
    console.log("Button clicked.");
  });
</script>

<button>Click me</button>
<p>No handler here.</p>
<script>
  let button = document.querySelector("button");
  button.addEventListener("click", () => {
    console.log("Button clicked.");
  });
</script>

Hàm

<button>Click me</button>
<p>No handler here.</p>
<script>
  let button = document.querySelector("button");
  button.addEventListener("click", () => {
    console.log("Button clicked.");
  });
</script>

<button>Click me</button>
<p>No handler here.</p>
<script>
  let button = document.querySelector("button");
  button.addEventListener("click", () => {
    console.log("Button clicked.");
  });
</script>

<button>Click me</button>
<p>No handler here.</p>
<script>
  let button = document.querySelector("button");
  button.addEventListener("click", () => {
    console.log("Button clicked.");
  });
</script>

Một bộ hàm tương tự,

<button>Click me</button>
<p>No handler here.</p>
<script>
  let button = document.querySelector("button");
  button.addEventListener("click", () => {
    console.log("Button clicked.");
  });
</script>

<button>Click me</button>
<p>No handler here.</p>
<script>
  let button = document.querySelector("button");
  button.addEventListener("click", () => {
    console.log("Button clicked.");
  });
</script>

<button>Click me</button>
<p>No handler here.</p>
<script>
  let button = document.querySelector("button");
  button.addEventListener("click", () => {
    console.log("Button clicked.");
  });
</script>

ra mắt

Một số loại sự kiện có khả năng xảy ra nhanh chóng, nhiều lần liên tiếp (ví dụ: sự kiện

<button>Act-once button</button>
<script>
  let button = document.querySelector("button");
  function once() {
    console.log("Done.");
    button.removeEventListener("click", once);
  }
  button.addEventListener("click", once);
</script>

<button>Act-once button</button>
<script>
  let button = document.querySelector("button");
  function once() {
    console.log("Done.");
    button.removeEventListener("click", once);
  }
  button.addEventListener("click", once);
</script>

Nếu bạn cần làm điều gì đó không cần thiết trong trình xử lý như vậy, bạn có thể sử dụng

<button>Click me</button>
<p>No handler here.</p>
<script>
  let button = document.querySelector("button");
  button.addEventListener("click", () => {
    console.log("Button clicked.");
  });
</script>

Trong ví dụ đầu tiên, chúng tôi muốn phản ứng khi người dùng đã nhập nội dung nào đó, nhưng chúng tôi không muốn thực hiện ngay lập tức cho mọi sự kiện đầu vào. Khi họ đang gõ nhanh, chúng tôi chỉ muốn đợi cho đến khi tạm dừng xảy ra. Thay vì ngay lập tức thực hiện một hành động trong trình xử lý sự kiện, chúng tôi đặt thời gian chờ. Chúng tôi cũng xóa thời gian chờ trước đó (nếu có) để khi các sự kiện xảy ra gần nhau (gần hơn độ trễ thời gian chờ của chúng tôi), thời gian chờ từ sự kiện trước đó sẽ bị hủy

<button>Click me</button>
<p>No handler here.</p>
<script>
  let button = document.querySelector("button");
  button.addEventListener("click", () => {
    console.log("Button clicked.");
  });
</script>

Đưa ra một giá trị không xác định cho

<button>Click me</button>
<p>No handler here.</p>
<script>
  let button = document.querySelector("button");
  button.addEventListener("click", () => {
    console.log("Button clicked.");
  });
</script>

Chúng tôi có thể sử dụng một mẫu hơi khác nếu chúng tôi muốn sắp xếp các phản hồi theo không gian để chúng cách nhau ít nhất một khoảng thời gian nhất định nhưng muốn kích hoạt chúng trong một chuỗi sự kiện, không chỉ sau đó. Ví dụ: chúng tôi có thể muốn phản hồi các sự kiện

<button>Act-once button</button>
<script>
  let button = document.querySelector("button");
  function once() {
    console.log("Done.");
    button.removeEventListener("click", once);
  }
  button.addEventListener("click", once);
</script>

<button>Click me</button>
<p>No handler here.</p>
<script>
  let button = document.querySelector("button");
  button.addEventListener("click", () => {
    console.log("Button clicked.");
  });
</script>

Tóm lược

Trình xử lý sự kiện giúp phát hiện và phản ứng với các sự kiện xảy ra trên trang web của chúng tôi. Phương thức

<button>Act-once button</button>
<script>
  let button = document.querySelector("button");
  function once() {
    console.log("Done.");
    button.removeEventListener("click", once);
  }
  button.addEventListener("click", once);
</script>

Mỗi sự kiện có một loại (

<button>Act-once button</button>
<script>
  let button = document.querySelector("button");
  function once() {
    console.log("Done.");
    button.removeEventListener("click", once);
  }
  button.addEventListener("click", once);
</script>

<button>Click me</button>
<p>No handler here.</p>
<script>
  let button = document.querySelector("button");
  button.addEventListener("click", () => {
    console.log("Button clicked.");
  });
</script>

Khi một trình xử lý sự kiện được gọi, nó sẽ truyền một đối tượng sự kiện với thông tin bổ sung về sự kiện. Đối tượng này cũng có các phương thức cho phép chúng tôi ngừng lan truyền thêm (

<button>Act-once button</button>
<script>
  let button = document.querySelector("button");
  function once() {
    console.log("Done.");
    button.removeEventListener("click", once);
  }
  button.addEventListener("click", once);
</script>

<button>Act-once button</button>
<script>
  let button = document.querySelector("button");
  function once() {
    console.log("Done.");
    button.removeEventListener("click", once);
  }
  button.addEventListener("click", once);
</script>

Nhấn một phím sẽ kích hoạt các sự kiện

<button>Act-once button</button>
<script>
  let button = document.querySelector("button");
  function once() {
    console.log("Done.");
    button.removeEventListener("click", once);
  }
  button.addEventListener("click", once);
</script>

<button>Act-once button</button>
<script>
  let button = document.querySelector("button");
  function once() {
    console.log("Done.");
    button.removeEventListener("click", once);
  }
  button.addEventListener("click", once);
</script>

<button>Act-once button</button>
<script>
  let button = document.querySelector("button");
  function once() {
    console.log("Done.");
    button.removeEventListener("click", once);
  }
  button.addEventListener("click", once);
</script>

<button>Act-once button</button>
<script>
  let button = document.querySelector("button");
  function once() {
    console.log("Done.");
    button.removeEventListener("click", once);
  }
  button.addEventListener("click", once);
</script>

<button>Act-once button</button>
<script>
  let button = document.querySelector("button");
  function once() {
    console.log("Done.");
    button.removeEventListener("click", once);
  }
  button.addEventListener("click", once);
</script>

<button>Act-once button</button>
<script>
  let button = document.querySelector("button");
  function once() {
    console.log("Done.");
    button.removeEventListener("click", once);
  }
  button.addEventListener("click", once);
</script>

<button>Act-once button</button>
<script>
  let button = document.querySelector("button");
  function once() {
    console.log("Done.");
    button.removeEventListener("click", once);
  }
  button.addEventListener("click", once);
</script>

<button>Act-once button</button>
<script>
  let button = document.querySelector("button");
  function once() {
    console.log("Done.");
    button.removeEventListener("click", once);
  }
  button.addEventListener("click", once);
</script>

<button>Act-once button</button>
<script>
  let button = document.querySelector("button");
  function once() {
    console.log("Done.");
    button.removeEventListener("click", once);
  }
  button.addEventListener("click", once);
</script>

Thao tác cuộn có thể được phát hiện với sự kiện

<button>Act-once button</button>
<script>
  let button = document.querySelector("button");
  function once() {
    console.log("Done.");
    button.removeEventListener("click", once);
  }
  button.addEventListener("click", once);
</script>

<button>Click me</button>
<p>No handler here.</p>
<script>
  let button = document.querySelector("button");
  button.addEventListener("click", () => {
    console.log("Button clicked.");
  });
</script>

<button>Click me</button>
<p>No handler here.</p>
<script>
  let button = document.querySelector("button");
  button.addEventListener("click", () => {
    console.log("Button clicked.");
  });
</script>

<button>Click me</button>
<p>No handler here.</p>
<script>
  let button = document.querySelector("button");
  button.addEventListener("click", () => {
    console.log("Button clicked.");
  });
</script>

bài tập

Khí cầu

Viết một trang hiển thị bong bóng (sử dụng biểu tượng cảm xúc bong bóng, 🎈). Khi bạn nhấn vào mũi tên lên, nó sẽ phồng lên (lớn lên) 10 phần trăm và khi bạn nhấn vào mũi tên xuống, nó sẽ xẹp xuống (co lại) 10 phần trăm

Bạn có thể kiểm soát kích thước của văn bản (biểu tượng cảm xúc là văn bản) bằng cách đặt thuộc tính CSS

<button>Click me</button>
<p>No handler here.</p>
<script>
  let button = document.querySelector("button");
  button.addEventListener("click", () => {
    console.log("Button clicked.");
  });
</script>

<button>Click me</button>
<p>No handler here.</p>
<script>
  let button = document.querySelector("button");
  button.addEventListener("click", () => {
    console.log("Button clicked.");
  });
</script>

Tên chính của các phím mũi tên là

<button>Click me</button>
<p>No handler here.</p>
<script>
  let button = document.querySelector("button");
  button.addEventListener("click", () => {
    console.log("Button clicked.");
  });
</script>

<button>Click me</button>
<p>No handler here.</p>
<script>
  let button = document.querySelector("button");
  button.addEventListener("click", () => {
    console.log("Button clicked.");
  });
</script>

Khi điều đó hoạt động, hãy thêm một tính năng trong đó, nếu bạn thổi quả bóng qua một kích thước nhất định, nó sẽ phát nổ. Trong trường hợp này, phát nổ có nghĩa là nó được thay thế bằng biểu tượng cảm xúc 💥 và trình xử lý sự kiện bị xóa (để bạn không thể thổi phồng hoặc xì hơi vụ nổ)

<button>Act-once button</button>
<script>
  let button = document.querySelector("button");
  function once() {
    console.log("Done.");
    button.removeEventListener("click", once);
  }
  button.addEventListener("click", once);
</script>

Bạn sẽ muốn đăng ký một trình xử lý cho sự kiện

<button>Act-once button</button>
<script>
  let button = document.querySelector("button");
  function once() {
    console.log("Done.");
    button.removeEventListener("click", once);
  }
  button.addEventListener("click", once);
</script>

<button>Click me</button>
<p>No handler here.</p>
<script>
  let button = document.querySelector("button");
  button.addEventListener("click", () => {
    console.log("Button clicked.");
  });
</script>

Kích thước hiện tại có thể được giữ trong một ràng buộc để bạn có thể căn cứ vào kích thước mới trên đó. Sẽ rất hữu ích khi xác định một hàm cập nhật kích thước—cả liên kết và kiểu của bong bóng trong DOM—để bạn có thể gọi hàm đó từ trình xử lý sự kiện của mình và cũng có thể một lần khi bắt đầu, để đặt kích thước ban đầu

Bạn có thể thay đổi bong bóng thành một vụ nổ bằng cách thay thế nút văn bản bằng một nút khác (sử dụng

<button>Click me</button>
<p>No handler here.</p>
<script>
  let button = document.querySelector("button");
  button.addEventListener("click", () => {
    console.log("Button clicked.");
  });
</script>

<button>Click me</button>
<p>No handler here.</p>
<script>
  let button = document.querySelector("button");
  button.addEventListener("click", () => {
    console.log("Button clicked.");
  });
</script>

đường mòn chuột

Trong những ngày đầu của JavaScript, thời kỳ đỉnh cao của các trang chủ lòe loẹt với nhiều hình ảnh hoạt hình, mọi người đã nghĩ ra một số cách thực sự truyền cảm hứng để sử dụng ngôn ngữ này.

Một trong số đó là đường chuột—một loạt các thành phần sẽ đi theo con trỏ chuột khi bạn di chuyển nó trên trang

Trong bài tập này, tôi muốn bạn thực hiện một vệt chuột. Sử dụng các phần tử

<button>Click me</button>
<p>No handler here.</p>
<script>
  let button = document.querySelector("button");
  button.addEventListener("click", () => {
    console.log("Button clicked.");
  });
</script>

Có nhiều cách tiếp cận có thể ở đây. Bạn có thể làm cho giải pháp của mình đơn giản hoặc phức tạp như bạn muốn. Một giải pháp đơn giản để bắt đầu là giữ một số phần tử đường mòn cố định và xoay vòng qua chúng, di chuyển phần tử tiếp theo đến vị trí hiện tại của chuột mỗi khi xảy ra sự kiện

<button>Act-once button</button>
<script>
  let button = document.querySelector("button");
  function once() {
    console.log("Done.");
    button.removeEventListener("click", once);
  }
  button.addEventListener("click", once);
</script>

<button>Act-once button</button>
<script>
  let button = document.querySelector("button");
  function once() {
    console.log("Done.");
    button.removeEventListener("click", once);
  }
  button.addEventListener("click", once);
</script>

Tạo các phần tử được thực hiện tốt nhất với một vòng lặp. Nối chúng vào tài liệu để làm cho chúng hiển thị. Để có thể truy cập chúng sau này nhằm thay đổi vị trí của chúng, bạn sẽ muốn lưu trữ các phần tử trong một mảng

Việc quay vòng qua chúng có thể được thực hiện bằng cách giữ một biến đếm và thêm 1 vào nó mỗi khi sự kiện

<button>Act-once button</button>
<script>
  let button = document.querySelector("button");
  function once() {
    console.log("Done.");
    button.removeEventListener("click", once);
  }
  button.addEventListener("click", once);
</script>

<button>Click me</button>
<p>No handler here.</p>
<script>
  let button = document.querySelector("button");
  button.addEventListener("click", () => {
    console.log("Button clicked.");
  });
</script>

Một hiệu ứng thú vị khác có thể đạt được bằng cách mô hình hóa một hệ thống vật lý đơn giản. Chỉ sử dụng sự kiện

<button>Act-once button</button>
<script>
  let button = document.querySelector("button");
  function once() {
    console.log("Done.");
    button.removeEventListener("click", once);
  }
  button.addEventListener("click", once);
</script>

<button>Click me</button>
<p>No handler here.</p>
<script>
  let button = document.querySelector("button");
  button.addEventListener("click", () => {
    console.log("Button clicked.");
  });
</script>

tab

Các bảng theo thẻ được sử dụng rộng rãi trong giao diện người dùng. Chúng cho phép bạn chọn một bảng giao diện bằng cách chọn từ một số tab “nhô ra” phía trên một thành phần

Trong bài tập này, bạn phải triển khai một giao diện theo thẻ đơn giản. Viết một hàm,

<button>Click me</button>
<p>No handler here.</p>
<script>
  let button = document.querySelector("button");
  button.addEventListener("click", () => {
    console.log("Button clicked.");
  });
</script>

<button>Click me</button>
<p>No handler here.</p>
<script>
  let button = document.querySelector("button");
  button.addEventListener("click", () => {
    console.log("Button clicked.");
  });
</script>

<button>Click me</button>
<p>No handler here.</p>
<script>
  let button = document.querySelector("button");
  button.addEventListener("click", () => {
    console.log("Button clicked.");
  });
</script>

<button>Click me</button>
<p>No handler here.</p>
<script>
  let button = document.querySelector("button");
  button.addEventListener("click", () => {
    console.log("Button clicked.");
  });
</script>

<button>Click me</button>
<p>No handler here.</p>
<script>
  let button = document.querySelector("button");
  button.addEventListener("click", () => {
    console.log("Button clicked.");
  });
</script>

Khi điều đó hoạt động, hãy mở rộng nó để tạo kiểu khác cho nút cho tab hiện được chọn để rõ ràng tab nào được chọn

<button>Act-once button</button>
<script>
  let button = document.querySelector("button");
  function once() {
    console.log("Done.");
    button.removeEventListener("click", once);
  }
  button.addEventListener("click", once);
</script>

Một cạm bẫy mà bạn có thể gặp phải là bạn không thể trực tiếp sử dụng thuộc tính

<button>Click me</button>
<p>No handler here.</p>
<script>
  let button = document.querySelector("button");
  button.addEventListener("click", () => {
    console.log("Button clicked.");
  });
</script>

<button>Click me</button>
<p>No handler here.</p>
<script>
  let button = document.querySelector("button");
  button.addEventListener("click", () => {
    console.log("Button clicked.");
  });
</script>

<button>Click me</button>
<p>No handler here.</p>
<script>
  let button = document.querySelector("button");
  button.addEventListener("click", () => {
    console.log("Button clicked.");
  });
</script>

<button>Click me</button>
<p>No handler here.</p>
<script>
  let button = document.querySelector("button");
  button.addEventListener("click", () => {
    console.log("Button clicked.");
  });
</script>

Bạn có thể bắt đầu bằng cách xây dựng một dãy tab để bạn có thể dễ dàng truy cập chúng. Để triển khai kiểu dáng của các nút, bạn có thể lưu trữ các đối tượng chứa cả bảng điều khiển tab và nút của nó

Tôi khuyên bạn nên viết một chức năng riêng để thay đổi tab. Bạn có thể lưu trữ tab đã chọn trước đó và chỉ thay đổi các kiểu cần thiết để ẩn tab đó và hiển thị tab mới hoặc bạn chỉ có thể cập nhật kiểu của tất cả các tab mỗi khi một tab mới được chọn

Bạn có thể muốn gọi chức năng này ngay lập tức để giao diện bắt đầu với tab đầu tiên hiển thị

Ví dụ xử lý sự kiện là gì?

Ví dụ về sự kiện JavaScript là gì?

8 loại sự kiện JavaScript là gì?