E => trong javascript là gì?

Như đã đề cập ở trên, các sự kiện là các hành động hoặc sự cố xảy ra trong hệ thống mà bạn đang lập trình — hệ thống tạo ra (hoặc "kích hoạt") một loại tín hiệu nào đó khi một sự kiện xảy ra và cung cấp một cơ chế để có thể tự động thực hiện một hành động ( . Các sự kiện được kích hoạt bên trong cửa sổ trình duyệt và có xu hướng được gắn vào một mục cụ thể nằm trong đó. Đây có thể là một phần tử, một tập hợp các phần tử, tài liệu HTML được tải trong tab hiện tại hoặc toàn bộ cửa sổ trình duyệt. Có nhiều loại sự kiện khác nhau có thể xảy ra

Ví dụ

• Người dùng chọn, nhấp hoặc di con trỏ qua một phần tử nhất định
• Người dùng chọn một phím trên bàn phím
• Người dùng thay đổi kích thước hoặc đóng cửa sổ trình duyệt
• Một trang web tải xong
• Một biểu mẫu được gửi
• Video được phát, tạm dừng hoặc kết thúc
• Xảy ra lỗi

Bạn có thể thu thập từ điều này (và từ việc xem qua tham chiếu sự kiện MDN) rằng có rất nhiều sự kiện có thể được kích hoạt

Để phản ứng với một sự kiện, bạn đính kèm một trình xử lý sự kiện cho nó. Đây là một khối mã (thường là hàm JavaScript mà bạn với tư cách là lập trình viên tạo) chạy khi sự kiện kích hoạt. Khi một khối mã như vậy được xác định để chạy để phản hồi lại một sự kiện, chúng tôi nói rằng chúng tôi đang đăng ký một trình xử lý sự kiện. Ghi chú. Trình xử lý sự kiện đôi khi được gọi là trình xử lý sự kiện — chúng có thể thay thế cho nhau theo mục đích của chúng tôi, mặc dù nói đúng ra, chúng hoạt động cùng nhau. Người nghe lắng nghe sự kiện đang xảy ra và trình xử lý là mã được chạy để phản hồi lại sự kiện đang xảy ra

Ghi chú. Các sự kiện web không phải là một phần của ngôn ngữ JavaScript cốt lõi — chúng được định nghĩa là một phần của các API được tích hợp trong trình duyệt

Hãy xem xét một ví dụ đơn giản về những gì chúng tôi muốn nói ở đây. Trong ví dụ sau, chúng tôi có một

const btn = document.querySelector('button');

function random(number) {
  return Math.floor(Math.random() * (number+1));
}

function changeBackground() {
  const rndCol = `rgb(${random(255)}, ${random(255)}, ${random(255)})`;
  document.body.style.backgroundColor = rndCol;
}

btn.addEventListener('click', changeBackground);

<button>Change color</button>

button {
  margin: 10px;
}

JavaScript trông giống như vậy

const btn = document.querySelector('button');

function random(number) {
  return Math.floor(Math.random() * (number+1));
}

btn.addEventListener('click', () => {
  const rndCol = `rgb(${random(255)}, ${random(255)}, ${random(255)})`;
  document.body.style.backgroundColor = rndCol;
});

Trong đoạn mã này, chúng tôi lưu trữ một tham chiếu đến phần tử

const btn = document.querySelector('button');

function random(number) {
  return Math.floor(Math.random() * (number+1));
}

function changeBackground() {
  const rndCol = `rgb(${random(255)}, ${random(255)}, ${random(255)})`;
  document.body.style.backgroundColor = rndCol;
}

btn.addEventListener('click', changeBackground);

const btn = document.querySelector('button');

function random(number) {
  return Math.floor(Math.random() * (number+1));
}

function changeBackground() {
  const rndCol = `rgb(${random(255)}, ${random(255)}, ${random(255)})`;
  document.body.style.backgroundColor = rndCol;
}

btn.addEventListener('click', changeBackground);

const btn = document.querySelector('button');

function random(number) {
  return Math.floor(Math.random() * (number+1));
}

function changeBackground() {
  const rndCol = `rgb(${random(255)}, ${random(255)}, ${random(255)})`;
  document.body.style.backgroundColor = rndCol;
}

btn.addEventListener('click', changeBackground);

Chúng tôi cũng định nghĩa một hàm trả về một số ngẫu nhiên

Phần thứ ba của mã là nơi chúng tôi xác định và đăng ký trình xử lý sự kiện. Phần tử

const btn = document.querySelector('button');

function random(number) {
  return Math.floor(Math.random() * (number+1));
}

function changeBackground() {
  const rndCol = `rgb(${random(255)}, ${random(255)}, ${random(255)})`;
  document.body.style.backgroundColor = rndCol;
}

btn.addEventListener('click', changeBackground);

const btn = document.querySelector('button');

function random(number) {
  return Math.floor(Math.random() * (number+1));
}

function changeBackground() {
  const rndCol = `rgb(${random(255)}, ${random(255)}, ${random(255)})`;
  document.body.style.backgroundColor = rndCol;
}

btn.addEventListener('click', changeBackground);

const btn = document.querySelector('button');

function random(number) {
  return Math.floor(Math.random() * (number+1));
}

function changeBackground() {
  const rndCol = `rgb(${random(255)}, ${random(255)}, ${random(255)})`;
  document.body.style.backgroundColor = rndCol;
}

btn.addEventListener('click', changeBackground);

const btn = document.querySelector('button');

function random(number) {
  return Math.floor(Math.random() * (number+1));
}

function changeBackground() {
  const rndCol = `rgb(${random(255)}, ${random(255)}, ${random(255)})`;
  document.body.style.backgroundColor = rndCol;
}

btn.addEventListener('click', changeBackground);

• chuỗi

  const btn = document.querySelector('button');
  
  function random(number) {
    return Math.floor(Math.random() * (number+1));
  }
  
  function changeBackground() {
    const rndCol = `rgb(${random(255)}, ${random(255)}, ${random(255)})`;
    document.body.style.backgroundColor = rndCol;
  }
  
  btn.addEventListener('click', changeBackground);
  

  7, để cho biết rằng chúng tôi muốn lắng nghe sự kiện nhấp chuột
• một chức năng để gọi khi sự kiện xảy ra. Trong trường hợp của chúng tôi, chức năng tạo ra một màu RGB ngẫu nhiên và đặt trang

  btn.removeEventListener('click', changeBackground);
  

  1

  btn.removeEventListener('click', changeBackground);
  

  2 bằng màu đó

Đầu ra ví dụ như sau. Hãy thử bấm vào nút

Các sự kiện không phải là duy nhất đối với JavaScript — hầu hết các ngôn ngữ lập trình đều có một số loại mô hình sự kiện và cách hoạt động của mô hình này thường khác với cách của JavaScript. Trên thực tế, mô hình sự kiện trong JavaScript cho các trang web khác với mô hình sự kiện cho JavaScript vì nó được sử dụng trong các môi trường khác

Ví dụ, nút. js là một thời gian chạy JavaScript rất phổ biến cho phép các nhà phát triển sử dụng JavaScript để xây dựng các ứng dụng phía máy chủ và mạng. nút. mô hình sự kiện js dựa vào các bộ lắng nghe để lắng nghe các sự kiện và các bộ phát để phát ra các sự kiện theo định kỳ — nghe có vẻ không khác lắm, nhưng mã hoàn toàn khác, sử dụng các chức năng như

btn.removeEventListener('click', changeBackground);

btn.removeEventListener('click', changeBackground);

Bạn cũng có thể sử dụng JavaScript để xây dựng các tiện ích bổ sung trên nhiều trình duyệt — cải tiến chức năng của trình duyệt — sử dụng công nghệ có tên là WebExtensions. Mô hình sự kiện tương tự như mô hình sự kiện trên web, nhưng hơi khác một chút — các thuộc tính của trình xử lý sự kiện được đặt trong vỏ lạc đà (chẳng hạn như

btn.removeEventListener('click', changeBackground);

btn.removeEventListener('click', changeBackground);

btn.removeEventListener('click', changeBackground);

Bạn không cần phải hiểu gì về những môi trường khác như vậy ở giai đoạn này trong quá trình học tập của mình;

Cơ chế khuyến nghị để thêm trình xử lý sự kiện vào trang web là phương thức

const btn = document.querySelector('button');

function random(number) {
  return Math.floor(Math.random() * (number+1));
}

function changeBackground() {
  const rndCol = `rgb(${random(255)}, ${random(255)}, ${random(255)})`;
  document.body.style.backgroundColor = rndCol;
}

btn.addEventListener('click', changeBackground);

const btn = document.querySelector('button');

function random(number) {
  return Math.floor(Math.random() * (number+1));
}

btn.addEventListener('click', () => {
  const rndCol = `rgb(${random(255)}, ${random(255)}, ${random(255)})`;
  document.body.style.backgroundColor = rndCol;
});

Ghi chú. Bạn có thể tìm mã nguồn đầy đủ cho ví dụ này trên GitHub (cũng có thể xem nó đang chạy trực tiếp)

Bên trong hàm

const btn = document.querySelector('button');

function random(number) {
  return Math.floor(Math.random() * (number+1));
}

function changeBackground() {
  const rndCol = `rgb(${random(255)}, ${random(255)}, ${random(255)})`;
  document.body.style.backgroundColor = rndCol;
}

btn.addEventListener('click', changeBackground);

Bạn có thể đặt chức năng xử lý thành một chức năng được đặt tên riêng, như thế này

const btn = document.querySelector('button');

function random(number) {
  return Math.floor(Math.random() * (number+1));
}

function changeBackground() {
  const rndCol = `rgb(${random(255)}, ${random(255)}, ${random(255)})`;
  document.body.style.backgroundColor = rndCol;
}

btn.addEventListener('click', changeBackground);

Có nhiều sự kiện khác nhau có thể được kích hoạt bởi một phần tử nút. hãy thử nghiệm

Đầu tiên, tạo một bản sao cục bộ của Random-color-addeventlistener. html và mở nó trong trình duyệt của bạn. Nó chỉ là một bản sao của ví dụ màu ngẫu nhiên đơn giản mà chúng ta đã thử. Bây giờ hãy thử lần lượt thay đổi

const controller = new AbortController();

btn.addEventListener('click', () => {
  const rndCol = `rgb(${random(255)}, ${random(255)}, ${random(255)})`;
  document.body.style.backgroundColor = rndCol;
}, { signal: controller.signal }); // pass an AbortSignal to this handler

• const controller = new AbortController();
  
  btn.addEventListener('click', () => {
    const rndCol = `rgb(${random(255)}, ${random(255)}, ${random(255)})`;
    document.body.style.backgroundColor = rndCol;
  }, { signal: controller.signal }); // pass an AbortSignal to this handler
  

  2 và

  const controller = new AbortController();
  
  btn.addEventListener('click', () => {
    const rndCol = `rgb(${random(255)}, ${random(255)}, ${random(255)})`;
    document.body.style.backgroundColor = rndCol;
  }, { signal: controller.signal }); // pass an AbortSignal to this handler
  

  3 — Màu thay đổi khi nút được lấy nét và không lấy nét; . Chúng thường được sử dụng để hiển thị thông tin về việc điền vào các trường biểu mẫu khi chúng được đặt tiêu điểm hoặc để hiển thị thông báo lỗi nếu một trường biểu mẫu được điền bằng một giá trị không chính xác

• const controller = new AbortController();
  
  btn.addEventListener('click', () => {
    const rndCol = `rgb(${random(255)}, ${random(255)}, ${random(255)})`;
    document.body.style.backgroundColor = rndCol;
  }, { signal: controller.signal }); // pass an AbortSignal to this handler
  

  4 — Màu chỉ thay đổi khi nhấp đúp vào nút

• const controller = new AbortController();
  
  btn.addEventListener('click', () => {
    const rndCol = `rgb(${random(255)}, ${random(255)}, ${random(255)})`;
    document.body.style.backgroundColor = rndCol;
  }, { signal: controller.signal }); // pass an AbortSignal to this handler
  

  5 và

  const controller = new AbortController();
  
  btn.addEventListener('click', () => {
    const rndCol = `rgb(${random(255)}, ${random(255)}, ${random(255)})`;
    document.body.style.backgroundColor = rndCol;
  }, { signal: controller.signal }); // pass an AbortSignal to this handler
  

  6 — Màu thay đổi tương ứng khi con trỏ chuột di chuyển qua nút hoặc khi con trỏ di chuyển ra khỏi nút

Một số sự kiện, chẳng hạn như

const controller = new AbortController();

btn.addEventListener('click', () => {
  const rndCol = `rgb(${random(255)}, ${random(255)}, ${random(255)})`;
  document.body.style.backgroundColor = rndCol;
}, { signal: controller.signal }); // pass an AbortSignal to this handler

const controller = new AbortController();

btn.addEventListener('click', () => {
  const rndCol = `rgb(${random(255)}, ${random(255)}, ${random(255)})`;
  document.body.style.backgroundColor = rndCol;
}, { signal: controller.signal }); // pass an AbortSignal to this handler

const controller = new AbortController();

btn.addEventListener('click', () => {
  const rndCol = `rgb(${random(255)}, ${random(255)}, ${random(255)})`;
  document.body.style.backgroundColor = rndCol;
}, { signal: controller.signal }); // pass an AbortSignal to this handler

Nếu bạn đã thêm trình xử lý sự kiện bằng cách sử dụng

const btn = document.querySelector('button');

function random(number) {
  return Math.floor(Math.random() * (number+1));
}

function changeBackground() {
  const rndCol = `rgb(${random(255)}, ${random(255)}, ${random(255)})`;
  document.body.style.backgroundColor = rndCol;
}

btn.addEventListener('click', changeBackground);

controller.abort(); // removes any/all event handlers associated with this controller

controller.abort(); // removes any/all event handlers associated with this controller

btn.removeEventListener('click', changeBackground);

Trình xử lý sự kiện cũng có thể được gỡ bỏ bằng cách chuyển một số

controller.abort(); // removes any/all event handlers associated with this controller

const btn = document.querySelector('button');

function random(number) {
  return Math.floor(Math.random() * (number+1));
}

function changeBackground() {
  const rndCol = `rgb(${random(255)}, ${random(255)}, ${random(255)})`;
  document.body.style.backgroundColor = rndCol;
}

btn.addEventListener('click', changeBackground);

controller.abort(); // removes any/all event handlers associated with this controller

controller.abort(); // removes any/all event handlers associated with this controller

controller.abort(); // removes any/all event handlers associated with this controller

const controller = new AbortController();

btn.addEventListener('click', () => {
  const rndCol = `rgb(${random(255)}, ${random(255)}, ${random(255)})`;
  document.body.style.backgroundColor = rndCol;
}, { signal: controller.signal }); // pass an AbortSignal to this handler

Sau đó, trình xử lý sự kiện được tạo bởi đoạn mã trên có thể được xóa như thế này

controller.abort(); // removes any/all event handlers associated with this controller

Đối với các chương trình nhỏ, đơn giản, việc dọn dẹp các trình xử lý sự kiện cũ, không sử dụng là không cần thiết, nhưng đối với các chương trình lớn hơn, phức tạp hơn, nó có thể cải thiện hiệu quả. Ngoài ra, khả năng loại bỏ các trình xử lý sự kiện cho phép bạn có cùng một nút thực hiện các hành động khác nhau trong các trường hợp khác nhau. tất cả những gì bạn phải làm là thêm hoặc xóa trình xử lý

Bằng cách thực hiện nhiều lệnh gọi tới

const btn = document.querySelector('button');

function random(number) {
  return Math.floor(Math.random() * (number+1));
}

function changeBackground() {
  const rndCol = `rgb(${random(255)}, ${random(255)}, ${random(255)})`;
  document.body.style.backgroundColor = rndCol;
}

btn.addEventListener('click', changeBackground);

myElement.addEventListener('click', functionA);
myElement.addEventListener('click', functionB);

Cả hai chức năng sẽ chạy khi phần tử được nhấp vào

Có các tính năng và tùy chọn mạnh mẽ khác có sẵn với

const btn = document.querySelector('button');

function random(number) {
  return Math.floor(Math.random() * (number+1));
}

function changeBackground() {
  const rndCol = `rgb(${random(255)}, ${random(255)}, ${random(255)})`;
  document.body.style.backgroundColor = rndCol;
}

btn.addEventListener('click', changeBackground);

Đây là một chút ngoài phạm vi của bài viết này, nhưng nếu bạn muốn đọc chúng, hãy truy cập trang tham khảo

const btn = document.querySelector('button');

function random(number) {
  return Math.floor(Math.random() * (number+1));
}

function changeBackground() {
  const rndCol = `rgb(${random(255)}, ${random(255)}, ${random(255)})`;
  document.body.style.backgroundColor = rndCol;
}

btn.addEventListener('click', changeBackground);

controller.abort(); // removes any/all event handlers associated with this controller

Chúng tôi khuyên bạn nên sử dụng

const btn = document.querySelector('button');

function random(number) {
  return Math.floor(Math.random() * (number+1));
}

function changeBackground() {
  const rndCol = `rgb(${random(255)}, ${random(255)}, ${random(255)})`;
  document.body.style.backgroundColor = rndCol;
}

btn.addEventListener('click', changeBackground);

Các đối tượng (chẳng hạn như các nút) có thể kích hoạt các sự kiện cũng thường có các thuộc tính có tên là

myElement.addEventListener('click', functionA);
myElement.addEventListener('click', functionB);

myElement.addEventListener('click', functionA);
myElement.addEventListener('click', functionB);

Ví dụ: chúng ta có thể viết lại ví dụ về màu ngẫu nhiên như thế này

const btn = document.querySelector('button');

function random(number) {
  return Math.floor(Math.random() * (number+1));
}

btn.onclick = () => {
  const rndCol = `rgb(${random(255)}, ${random(255)}, ${random(255)})`;
  document.body.style.backgroundColor = rndCol;
}

Bạn cũng có thể đặt thuộc tính trình xử lý thành một hàm được đặt tên

button {
  margin: 10px;
}

Với các thuộc tính của trình xử lý sự kiện, bạn không thể thêm nhiều trình xử lý cho một sự kiện. Ví dụ: bạn có thể gọi

myElement.addEventListener('click', functionA);
myElement.addEventListener('click', functionB);

button {
  margin: 10px;
}

Điều này là không thể với các thuộc tính của trình xử lý sự kiện vì mọi nỗ lực đặt thuộc tính sau đó sẽ ghi đè lên các thuộc tính trước đó

button {
  margin: 10px;
}

Bạn cũng có thể thấy một mẫu như thế này trong mã của mình

button {
  margin: 10px;
}

button {
  margin: 10px;
}

Phương pháp đăng ký trình xử lý sự kiện sớm nhất được tìm thấy trên Web có liên quan (hoặc trình xử lý sự kiện nội tuyến) giống như phương pháp được hiển thị ở trên — giá trị thuộc tính theo nghĩa đen là mã JavaScript bạn muốn chạy khi sự kiện xảy ra. Ví dụ trên gọi một hàm được xác định bên trong phần tử

myElement.addEventListener('click', functionA);
myElement.addEventListener('click', functionB);

button {
  margin: 10px;
}

Bạn có thể tìm thấy thuộc tính HTML tương đương với nhiều thuộc tính xử lý sự kiện; . Việc sử dụng thuộc tính trình xử lý sự kiện có vẻ dễ dàng nếu bạn đang làm một việc gì đó thực sự nhanh chóng, nhưng chúng nhanh chóng trở nên khó quản lý và không hiệu quả

Để bắt đầu, không nên trộn lẫn HTML và JavaScript của bạn, vì nó trở nên khó đọc. Giữ JavaScript của bạn riêng biệt là một phương pháp hay và nếu nó nằm trong một tệp riêng biệt, bạn có thể áp dụng nó cho nhiều tài liệu HTML

Ngay cả trong một tệp, trình xử lý sự kiện nội tuyến không phải là một ý tưởng hay. Một nút thì được, nhưng nếu bạn có 100 nút thì sao? . Với JavaScript, bạn có thể dễ dàng thêm chức năng xử lý sự kiện vào tất cả các nút trên trang bất kể có bao nhiêu nút, bằng cách sử dụng nội dung như thế này

button {
  margin: 10px;
}

Cuối cùng, nhiều cấu hình máy chủ phổ biến sẽ không cho phép JavaScript nội tuyến, như một biện pháp bảo mật

Bạn không bao giờ nên sử dụng các thuộc tính trình xử lý sự kiện HTML - những thuộc tính này đã lỗi thời và việc sử dụng chúng là một cách làm không tốt

Đôi khi, bên trong một hàm xử lý sự kiện, bạn sẽ thấy một tham số được chỉ định với tên chẳng hạn như

myElement.addEventListener('click', functionA);
myElement.addEventListener('click', functionB);

myElement.addEventListener('click', functionA);
myElement.addEventListener('click', functionB);

myElement.addEventListener('click', functionA);
myElement.addEventListener('click', functionB);

button {
  margin: 10px;
}

Ghi chú. Bạn có thể tìm mã nguồn đầy đủ cho ví dụ này trên GitHub (cũng có thể xem nó đang chạy trực tiếp)

Ở đây bạn có thể thấy chúng tôi đang bao gồm một đối tượng sự kiện, e, trong hàm và trong hàm thiết lập kiểu màu nền trên

const btn = document.querySelector('button');

function random(number) {
  return Math.floor(Math.random() * (number+1));
}

btn.onclick = () => {
  const rndCol = `rgb(${random(255)}, ${random(255)}, ${random(255)})`;
  document.body.style.backgroundColor = rndCol;
}

const btn = document.querySelector('button');

function random(number) {
  return Math.floor(Math.random() * (number+1));
}

btn.onclick = () => {
  const rndCol = `rgb(${random(255)}, ${random(255)}, ${random(255)})`;
  document.body.style.backgroundColor = rndCol;
}

Ghi chú. Xem phần bên dưới để biết ví dụ nơi chúng tôi sử dụng

const btn = document.querySelector('button');

function random(number) {
  return Math.floor(Math.random() * (number+1));
}

btn.onclick = () => {
  const rndCol = `rgb(${random(255)}, ${random(255)}, ${random(255)})`;
  document.body.style.backgroundColor = rndCol;
}

Ghi chú. Bạn có thể sử dụng bất kỳ tên nào bạn thích cho đối tượng sự kiện — bạn chỉ cần chọn một tên mà sau đó bạn có thể sử dụng để tham chiếu nó bên trong hàm xử lý sự kiện.

myElement.addEventListener('click', functionA);
myElement.addEventListener('click', functionB);

myElement.addEventListener('click', functionA);
myElement.addEventListener('click', functionB);

myElement.addEventListener('click', functionA);
myElement.addEventListener('click', functionB);

Hầu hết các đối tượng sự kiện đều có sẵn một bộ thuộc tính và phương thức tiêu chuẩn trên đối tượng sự kiện;

Một số đối tượng sự kiện thêm các thuộc tính bổ sung có liên quan đến loại sự kiện cụ thể đó. Ví dụ: sự kiện

const btn = document.querySelector('button');

function random(number) {
  return Math.floor(Math.random() * (number+1));
}

btn.onclick = () => {
  const rndCol = `rgb(${random(255)}, ${random(255)}, ${random(255)})`;
  document.body.style.backgroundColor = rndCol;
}

const btn = document.querySelector('button');

function random(number) {
  return Math.floor(Math.random() * (number+1));
}

btn.onclick = () => {
  const rndCol = `rgb(${random(255)}, ${random(255)}, ${random(255)})`;
  document.body.style.backgroundColor = rndCol;
}

const btn = document.querySelector('button');

function random(number) {
  return Math.floor(Math.random() * (number+1));
}

btn.onclick = () => {
  const rndCol = `rgb(${random(255)}, ${random(255)}, ${random(255)})`;
  document.body.style.backgroundColor = rndCol;
}

button {
  margin: 10px;
}

button {
  margin: 10px;
}

button {
  margin: 10px;
}

const btn = document.querySelector('button');

function random(number) {
  return Math.floor(Math.random() * (number+1));
}

btn.addEventListener('click', () => {
  const rndCol = `rgb(${random(255)}, ${random(255)}, ${random(255)})`;
  document.body.style.backgroundColor = rndCol;
});

Hãy thử nhập vào hộp văn bản và xem đầu ra

Đôi khi, bạn sẽ gặp tình huống mà bạn muốn ngăn một sự kiện thực hiện những gì nó thực hiện theo mặc định. Ví dụ phổ biến nhất là biểu mẫu web, ví dụ: biểu mẫu đăng ký tùy chỉnh. Khi bạn điền thông tin chi tiết và nhấp vào nút gửi, hành vi tự nhiên là dữ liệu sẽ được gửi đến một trang cụ thể trên máy chủ để xử lý và trình duyệt sẽ được chuyển hướng đến một trang "thông báo thành công" nào đó (hoặc

Rắc rối xảy ra khi người dùng gửi dữ liệu không chính xác — với tư cách là nhà phát triển, bạn muốn ngăn việc gửi dữ liệu đến máy chủ và đưa ra thông báo lỗi cho biết có gì sai và cần phải làm gì để khắc phục sự cố. Một số trình duyệt hỗ trợ các tính năng xác thực dữ liệu biểu mẫu tự động, nhưng vì nhiều trình duyệt không hỗ trợ, bạn không nên dựa vào các tính năng đó và thực hiện kiểm tra xác thực của riêng mình. Hãy xem một ví dụ đơn giản

Đầu tiên, một biểu mẫu HTML đơn giản yêu cầu bạn nhập họ và tên của mình

const btn = document.querySelector('button');

function random(number) {
  return Math.floor(Math.random() * (number+1));
}

btn.addEventListener('click', () => {
  const rndCol = `rgb(${random(255)}, ${random(255)}, ${random(255)})`;
  document.body.style.backgroundColor = rndCol;
});

const btn = document.querySelector('button');

function random(number) {
  return Math.floor(Math.random() * (number+1));
}

btn.addEventListener('click', () => {
  const rndCol = `rgb(${random(255)}, ${random(255)}, ${random(255)})`;
  document.body.style.backgroundColor = rndCol;
});

Bây giờ là một số JavaScript - ở đây chúng tôi triển khai một kiểm tra rất đơn giản bên trong trình xử lý cho sự kiện

button {
  margin: 10px;
}

button {
  margin: 10px;
}

const btn = document.querySelector('button');

function random(number) {
  return Math.floor(Math.random() * (number+1));
}

btn.addEventListener('click', () => {
  const rndCol = `rgb(${random(255)}, ${random(255)}, ${random(255)})`;
  document.body.style.backgroundColor = rndCol;
});

Rõ ràng, đây là cách xác thực biểu mẫu khá yếu — ví dụ: nó sẽ không ngăn người dùng xác thực biểu mẫu bằng dấu cách hoặc số được nhập vào các trường — nhưng nó vẫn ổn cho các mục đích ví dụ. Đầu ra như sau

Ghi chú. Để biết mã nguồn đầy đủ, hãy xem ngăn chặn xác thực mặc định. html (cũng có thể thấy nó đang chạy trực tiếp tại đây)

Bong bóng sự kiện mô tả cách trình duyệt xử lý các sự kiện được nhắm mục tiêu vào các phần tử lồng nhau

Hãy xem xét một trang web như thế này

const btn = document.querySelector('button');

function random(number) {
  return Math.floor(Math.random() * (number+1));
}

btn.addEventListener('click', () => {
  const rndCol = `rgb(${random(255)}, ${random(255)}, ${random(255)})`;
  document.body.style.backgroundColor = rndCol;
});

Ở đây nút nằm bên trong một phần tử khác, phần tử

button {
  margin: 10px;
}

button {
  margin: 10px;
}

const btn = document.querySelector('button');

function random(number) {
  return Math.floor(Math.random() * (number+1));
}

btn.addEventListener('click', () => {
  const rndCol = `rgb(${random(255)}, ${random(255)}, ${random(255)})`;
  document.body.style.backgroundColor = rndCol;
});

Bạn sẽ thấy nút cha kích hoạt sự kiện nhấp chuột khi người dùng nhấp vào nút

const btn = document.querySelector('button');

function random(number) {
  return Math.floor(Math.random() * (number+1));
}

btn.addEventListener('click', () => {
  const rndCol = `rgb(${random(255)}, ${random(255)}, ${random(255)})`;
  document.body.style.backgroundColor = rndCol;
});

Điều này thật ý nghĩa. nút nằm bên trong

button {
  margin: 10px;
}

Điều gì xảy ra nếu chúng ta thêm trình xử lý sự kiện vào nút và cha mẹ?

const btn = document.querySelector('button');

function random(number) {
  return Math.floor(Math.random() * (number+1));
}

btn.addEventListener('click', () => {
  const rndCol = `rgb(${random(255)}, ${random(255)}, ${random(255)})`;
  document.body.style.backgroundColor = rndCol;
});

Hãy thử thêm các trình xử lý sự kiện nhấp chuột vào nút, phần tử gốc của nó (_______5_______03) và phần tử

btn.removeEventListener('click', changeBackground);

const btn = document.querySelector('button');

function random(number) {
  return Math.floor(Math.random() * (number+1));
}

btn.addEventListener('click', () => {
  const rndCol = `rgb(${random(255)}, ${random(255)}, ${random(255)})`;
  document.body.style.backgroundColor = rndCol;
});

Bạn sẽ thấy rằng cả ba phần tử đều kích hoạt sự kiện nhấp chuột khi người dùng nhấp vào nút

const btn = document.querySelector('button');

function random(number) {
  return Math.floor(Math.random() * (number+1));
}

btn.addEventListener('click', () => {
  const rndCol = `rgb(${random(255)}, ${random(255)}, ${random(255)})`;
  document.body.style.backgroundColor = rndCol;
});

Trong trường hợp này

• lần nhấp vào nút sẽ kích hoạt trước
• tiếp theo là nhấp chuột vào cha mẹ của nó (phần tử

  button {
    margin: 10px;
  }
  

  03)
• theo sau là cha của phần tử

  button {
    margin: 10px;
  }
  

  03 (phần tử

  btn.removeEventListener('click', changeBackground);
  

  1)

Chúng tôi mô tả điều này bằng cách nói rằng sự kiện nổi lên từ phần tử trong cùng đã được nhấp vào

Hành vi này có thể hữu ích và cũng có thể gây ra sự cố không mong muốn. Trong các phần tiếp theo, chúng ta sẽ xem vấn đề mà nó gây ra và tìm giải pháp

Trong ví dụ này, trang của chúng tôi chứa một video ban đầu bị ẩn và một nút có nhãn "Hiển thị video". Chúng tôi muốn tương tác sau đây

• Khi người dùng nhấp vào nút "Hiển thị video", hiển thị hộp chứa video nhưng chưa bắt đầu phát video
• Khi người dùng nhấp vào video, bắt đầu phát video
• Khi người dùng nhấp vào bất kỳ đâu trong hộp bên ngoài video, hãy ẩn hộp

HTML trông như thế này

const btn = document.querySelector('button');

function random(number) {
  return Math.floor(Math.random() * (number+1));
}

btn.addEventListener('click', () => {
  const rndCol = `rgb(${random(255)}, ${random(255)}, ${random(255)})`;
  document.body.style.backgroundColor = rndCol;
});

Nó bao gồm

• một phần tử

  const btn = document.querySelector('button');
  
  function random(number) {
    return Math.floor(Math.random() * (number+1));
  }
  
  function changeBackground() {
    const rndCol = `rgb(${random(255)}, ${random(255)}, ${random(255)})`;
    document.body.style.backgroundColor = rndCol;
  }
  
  btn.addEventListener('click', changeBackground);
  

  2
• một phần tử

  button {
    margin: 10px;
  }
  

  03 ban đầu có thuộc tính

  button {
    margin: 10px;
  }
  

  13
• một phần tử

  const controller = new AbortController();
  
  btn.addEventListener('click', () => {
    const rndCol = `rgb(${random(255)}, ${random(255)}, ${random(255)})`;
    document.body.style.backgroundColor = rndCol;
  }, { signal: controller.signal }); // pass an AbortSignal to this handler
  

  9 được lồng bên trong phần tử

  button {
    margin: 10px;
  }
  

  03

Chúng tôi đang sử dụng CSS để ẩn các phần tử với tập hợp lớp

button {
  margin: 10px;
}

const btn = document.querySelector('button');

function random(number) {
  return Math.floor(Math.random() * (number+1));
}

btn.addEventListener('click', () => {
  const rndCol = `rgb(${random(255)}, ${random(255)}, ${random(255)})`;
  document.body.style.backgroundColor = rndCol;
});

JavaScript trông như thế này

const btn = document.querySelector('button');

function random(number) {
  return Math.floor(Math.random() * (number+1));
}

btn.addEventListener('click', () => {
  const rndCol = `rgb(${random(255)}, ${random(255)}, ${random(255)})`;
  document.body.style.backgroundColor = rndCol;
});

Điều này thêm ba người nghe sự kiện

const btn = document.querySelector('button');

function random(number) {
  return Math.floor(Math.random() * (number+1));
}

function changeBackground() {
  const rndCol = `rgb(${random(255)}, ${random(255)}, ${random(255)})`;
  document.body.style.backgroundColor = rndCol;
}

btn.addEventListener('click', changeBackground);

• một trên

  const btn = document.querySelector('button');
  
  function random(number) {
    return Math.floor(Math.random() * (number+1));
  }
  
  function changeBackground() {
    const rndCol = `rgb(${random(255)}, ${random(255)}, ${random(255)})`;
    document.body.style.backgroundColor = rndCol;
  }
  
  btn.addEventListener('click', changeBackground);
  

  2, hiển thị

  button {
    margin: 10px;
  }
  

  03 có chứa

  const controller = new AbortController();
  
  btn.addEventListener('click', () => {
    const rndCol = `rgb(${random(255)}, ${random(255)}, ${random(255)})`;
    document.body.style.backgroundColor = rndCol;
  }, { signal: controller.signal }); // pass an AbortSignal to this handler
  

  9
• một trên

  const controller = new AbortController();
  
  btn.addEventListener('click', () => {
    const rndCol = `rgb(${random(255)}, ${random(255)}, ${random(255)})`;
    document.body.style.backgroundColor = rndCol;
  }, { signal: controller.signal }); // pass an AbortSignal to this handler
  

  9, bắt đầu phát video
• một trên

  button {
    margin: 10px;
  }
  

  03, ẩn video

Hãy xem cách nó hoạt động

Bạn sẽ thấy rằng khi bạn nhấp vào nút, hộp và video chứa trong đó sẽ hiển thị. Nhưng sau đó khi bạn nhấp vào video, video bắt đầu phát nhưng hộp lại bị ẩn

Video nằm trong

button {
  margin: 10px;
}

Như chúng ta đã thấy trong phần trước, sự kiện sủi bọt đôi khi có thể tạo ra sự cố, nhưng có một cách để ngăn chặn điều đó. Đối tượng

const btn = document.querySelector('button');

function random(number) {
  return Math.floor(Math.random() * (number+1));
}

btn.onclick = () => {
  const rndCol = `rgb(${random(255)}, ${random(255)}, ${random(255)})`;
  document.body.style.backgroundColor = rndCol;
}

button {
  margin: 10px;
}

Chúng tôi có thể khắc phục sự cố hiện tại của mình bằng cách thay đổi JavaScript thành điều này

const btn = document.querySelector('button');

function random(number) {
  return Math.floor(Math.random() * (number+1));
}

btn.addEventListener('click', () => {
  const rndCol = `rgb(${random(255)}, ${random(255)}, ${random(255)})`;
  document.body.style.backgroundColor = rndCol;
});

Tất cả những gì chúng ta đang làm ở đây là gọi

button {
  margin: 10px;
}

const btn = document.querySelector('button');

function random(number) {
  return Math.floor(Math.random() * (number+1));
}

function changeBackground() {
  const rndCol = `rgb(${random(255)}, ${random(255)}, ${random(255)})`;
  document.body.style.backgroundColor = rndCol;
}

btn.addEventListener('click', changeBackground);

const controller = new AbortController();

btn.addEventListener('click', () => {
  const rndCol = `rgb(${random(255)}, ${random(255)}, ${random(255)})`;
  document.body.style.backgroundColor = rndCol;
}, { signal: controller.signal }); // pass an AbortSignal to this handler

const btn = document.querySelector('button');

function random(number) {
  return Math.floor(Math.random() * (number+1));
}

btn.addEventListener('click', () => {
  const rndCol = `rgb(${random(255)}, ${random(255)}, ${random(255)})`;
  document.body.style.backgroundColor = rndCol;
});

const btn = document.querySelector('button');

function random(number) {
  return Math.floor(Math.random() * (number+1));
}

btn.addEventListener('click', () => {
  const rndCol = `rgb(${random(255)}, ${random(255)}, ${random(255)})`;
  document.body.style.backgroundColor = rndCol;
});

Một hình thức lan truyền sự kiện thay thế là chụp sự kiện. Điều này giống như bong bóng sự kiện nhưng thứ tự bị đảo ngược. vì vậy, thay vì sự kiện kích hoạt đầu tiên trên phần tử trong cùng được nhắm mục tiêu, sau đó lần lượt kích hoạt các phần tử ít lồng nhau hơn, sự kiện sẽ kích hoạt trước trên phần tử lồng nhau ít nhất, sau đó là các phần tử lồng nhau liên tiếp hơn, cho đến khi đạt được mục tiêu

Chụp sự kiện bị tắt theo mặc định. Để kích hoạt nó, bạn phải vượt qua tùy chọn

button {
  margin: 10px;
}

const btn = document.querySelector('button');

function random(number) {
  return Math.floor(Math.random() * (number+1));
}

function changeBackground() {
  const rndCol = `rgb(${random(255)}, ${random(255)}, ${random(255)})`;
  document.body.style.backgroundColor = rndCol;
}

btn.addEventListener('click', changeBackground);

Ví dụ này giống như ví dụ chúng ta đã thấy trước đó, ngoại trừ việc chúng ta đã sử dụng tùy chọn

button {
  margin: 10px;
}

const btn = document.querySelector('button');

function random(number) {
  return Math.floor(Math.random() * (number+1));
}

btn.addEventListener('click', () => {
  const rndCol = `rgb(${random(255)}, ${random(255)}, ${random(255)})`;
  document.body.style.backgroundColor = rndCol;
});

const btn = document.querySelector('button');

function random(number) {
  return Math.floor(Math.random() * (number+1));
}

btn.addEventListener('click', () => {
  const rndCol = `rgb(${random(255)}, ${random(255)}, ${random(255)})`;
  document.body.style.backgroundColor = rndCol;
});

Trong trường hợp này, thứ tự các tin nhắn bị đảo ngược. trình xử lý sự kiện

btn.removeEventListener('click', changeBackground);

button {
  margin: 10px;
}

const btn = document.querySelector('button');

function random(number) {
  return Math.floor(Math.random() * (number+1));
}

function changeBackground() {
  const rndCol = `rgb(${random(255)}, ${random(255)}, ${random(255)})`;
  document.body.style.backgroundColor = rndCol;
}

btn.addEventListener('click', changeBackground);

const btn = document.querySelector('button');

function random(number) {
  return Math.floor(Math.random() * (number+1));
}

btn.addEventListener('click', () => {
  const rndCol = `rgb(${random(255)}, ${random(255)}, ${random(255)})`;
  document.body.style.backgroundColor = rndCol;
});

Tại sao phải bận tâm với cả chụp và sủi bọt? . Khi W3C quyết định cố gắng chuẩn hóa hành vi và đạt được sự đồng thuận, họ đã kết thúc với hệ thống này bao gồm cả hai, đó là điều mà các trình duyệt hiện đại triển khai

Theo mặc định, hầu hết tất cả các trình xử lý sự kiện đều được đăng ký trong giai đoạn bong bóng và điều này thường có ý nghĩa hơn trong hầu hết thời gian

Trong phần trước, chúng ta đã xem xét sự cố do bong bóng sự kiện gây ra và cách khắc phục sự cố đó. Tuy nhiên, bong bóng sự kiện không chỉ gây phiền nhiễu. nó có thể rất hữu ích. Đặc biệt, nó cho phép ủy quyền sự kiện. Trong thực tế này, khi chúng tôi muốn một số mã chạy khi người dùng tương tác với bất kỳ một trong số lượng lớn các phần tử con, chúng tôi đặt trình xử lý sự kiện trên cha mẹ của chúng và có các sự kiện xảy ra trên chúng bong bóng lên cha mẹ của chúng thay vì phải

Hãy quay lại ví dụ đầu tiên của chúng tôi, nơi chúng tôi đặt màu nền của toàn bộ trang khi người dùng nhấp vào nút. Giả sử rằng thay vào đó, trang được chia thành 16 ô và chúng tôi muốn đặt mỗi ô thành một màu ngẫu nhiên khi người dùng nhấp vào ô đó

Đây là HTML

const btn = document.querySelector('button');

function random(number) {
  return Math.floor(Math.random() * (number+1));
}

btn.addEventListener('click', () => {
  const rndCol = `rgb(${random(255)}, ${random(255)}, ${random(255)})`;
  document.body.style.backgroundColor = rndCol;
});

Chúng tôi có một ít CSS, để đặt kích thước và vị trí của các ô

const btn = document.querySelector('button');

function random(number) {
  return Math.floor(Math.random() * (number+1));
}

function changeBackground() {
  const rndCol = `rgb(${random(255)}, ${random(255)}, ${random(255)})`;
  document.body.style.backgroundColor = rndCol;
}

btn.addEventListener('click', changeBackground);

Bây giờ trong JavaScript, chúng tôi có thể thêm trình xử lý sự kiện nhấp chuột cho mọi ô. Nhưng một tùy chọn đơn giản và hiệu quả hơn nhiều là đặt trình xử lý sự kiện nhấp chuột trên cấp độ gốc và dựa vào bong bóng sự kiện để đảm bảo rằng trình xử lý được thực thi khi người dùng nhấp vào ô xếp

const btn = document.querySelector('button');

function random(number) {
  return Math.floor(Math.random() * (number+1));
}

function changeBackground() {
  const rndCol = `rgb(${random(255)}, ${random(255)}, ${random(255)})`;
  document.body.style.backgroundColor = rndCol;
}

btn.addEventListener('click', changeBackground);

Đầu ra như sau (hãy thử nhấp vào nó)

Ghi chú. Trong ví dụ này, chúng tôi đang sử dụng

const btn = document.querySelector('button');

function random(number) {
  return Math.floor(Math.random() * (number+1));
}

btn.onclick = () => {
  const rndCol = `rgb(${random(255)}, ${random(255)}, ${random(255)})`;
  document.body.style.backgroundColor = rndCol;
}

button {
  margin: 10px;
}

Ghi chú. Xem mục tiêu sự kiện hữu ích. html cho mã nguồn đầy đủ;

Bạn đã đọc đến cuối bài viết này, nhưng liệu bạn có nhớ được thông tin quan trọng nhất không? . Sự kiện

Bây giờ bạn sẽ biết tất cả những gì bạn cần biết về các sự kiện web ở giai đoạn đầu này. Như đã đề cập, các sự kiện không thực sự là một phần của JavaScript cốt lõi — chúng được xác định trong API Web của trình duyệt

Ngoài ra, điều quan trọng là phải hiểu rằng các bối cảnh khác nhau mà JavaScript được sử dụng có các mô hình sự kiện khác nhau — từ API Web đến các lĩnh vực khác như WebExtensions và Node của trình duyệt. js (JavaScript phía máy chủ). Chúng tôi không mong đợi bạn hiểu tất cả các lĩnh vực này ngay bây giờ, nhưng nó chắc chắn sẽ giúp bạn hiểu được những điều cơ bản của các sự kiện khi bạn tiếp tục học phát triển web

Nếu có gì chưa hiểu vui lòng đọc lại bài viết hoặc liên hệ với chúng tôi để được trợ giúp

Tham số e trong JavaScript là gì?

Sự kiện e là gì?

e có nghĩa là gì trong phản ứng JS?

Sự khác biệt giữa hàm () và hàm e là gì?