Làm cách nào chúng tôi có thể xử lý các sự kiện trong JavaScript?

Tương tác của JavaScript với HTML được xử lý thông qua các sự kiện xảy ra khi người dùng hoặc trình duyệt thao tác trên trang

Khi trang tải, nó được gọi là một sự kiện. Khi người dùng nhấp vào một nút, lần nhấp đó cũng là một sự kiện. Các ví dụ khác bao gồm các sự kiện như nhấn phím bất kỳ, đóng cửa sổ, thay đổi kích thước cửa sổ, v.v.

Các nhà phát triển có thể sử dụng các sự kiện này để thực thi các phản hồi được mã hóa JavaScript, khiến các nút đóng cửa sổ, thông báo được hiển thị cho người dùng, dữ liệu được xác thực và hầu như bất kỳ loại phản hồi nào khác có thể tưởng tượng được

Sự kiện là một phần của Mô hình đối tượng tài liệu (DOM) Cấp 3 và mọi phần tử HTML đều chứa một tập hợp các sự kiện có thể kích hoạt Mã JavaScript

Vui lòng xem qua hướng dẫn nhỏ này để hiểu rõ hơn Tham khảo sự kiện HTML. Ở đây chúng ta sẽ thấy một vài ví dụ để hiểu mối quan hệ giữa Sự kiện và JavaScript -

onclick Loại sự kiện

Đây là loại sự kiện được sử dụng thường xuyên nhất xảy ra khi người dùng nhấp vào nút bên trái của chuột. Bạn có thể đặt xác nhận, cảnh báo, v.v. , đối với loại sự kiện này

Thí dụ

Hãy thử ví dụ sau

      
            
   
   
   
      
Click the following button and see result
      
      
         
            
   

đầu ra

onsubmit Loại sự kiện

onsubmit là sự kiện xảy ra khi bạn cố gắng gửi biểu mẫu. Bạn có thể đặt xác thực biểu mẫu của mình đối với loại sự kiện này

Thí dụ

Ví dụ sau đây cho thấy cách sử dụng onsubmit. Ở đây chúng tôi đang gọi một hàm validate() trước khi gửi dữ liệu biểu mẫu tới máy chủ web. Nếu hàm validate() trả về true thì form sẽ được gửi, ngược lại sẽ không gửi dữ liệu

Hãy thử ví dụ sau

      
            
   
   
      
      
         .......
         
            
   

onmouseover và onmouseout

Hai loại sự kiện này sẽ giúp bạn tạo hiệu ứng đẹp mắt với hình ảnh hoặc thậm chí cả với văn bản. Sự kiện onmouseover kích hoạt khi bạn đưa chuột qua bất kỳ phần tử nào và onmouseout kích hoạt khi bạn di chuyển chuột ra khỏi phần tử đó. Hãy thử ví dụ sau

      
            
   
   
   
      
Bring your mouse inside the division to see the result:
      
      

         
 This is inside the division 
      
         
   

đầu ra

Sự kiện tiêu chuẩn HTML 5

Các sự kiện HTML 5 tiêu chuẩn được liệt kê ở đây để bạn tham khảo. Tập lệnh ở đây chỉ ra một chức năng Javascript sẽ được thực thi đối với sự kiện đó

Các sự kiện trong JavaScript cho phép các nhà phát triển lắng nghe các thay đổi trong tài liệu và xử lý chúng khi cần thiết. Ví dụ: bạn có thể nghe khi nhấp vào nút để mở phương thức. Một ví dụ khác là hiển thị nút "cuộn lên" khi người dùng cuộn nửa trang

Bài viết này giúp người mới bắt đầu hiểu Sự kiện trong JavaScript là gì và cách xử lý chúng

Tại sao nên sử dụng Sự kiện

Các trang web hiện đại đã phát triển để tương tác và phản ứng. Thay vì trình bày tất cả thông tin hoặc chức năng cùng một lúc, một số thông tin hoặc chức năng có thể được hiển thị cho người dùng dựa trên một hành động cụ thể được thực hiện. Ví dụ được đề cập trước đó trong bài viết minh họa điều này

Các sự kiện cũng hữu ích trong việc phát hiện các trạng thái khác nhau của trang web của bạn. Ví dụ: phát hiện khi màn hình được thay đổi kích thước có thể giúp đảm bảo khả năng phản hồi của một số thành phần trên trang

Danh sách các trường hợp sử dụng mà các sự kiện hữu ích là vô tận. Sự kiện là một phần thiết yếu của quá trình phát triển web bằng JavaScript và điều quan trọng là phải hiểu cách sử dụng chúng

Thêm trình xử lý sự kiện

Để lắng nghe các sự kiện, bạn có thể sử dụng phương thức addEventListener. Phương thức này khả dụng trên mọi Phần tử và Nút trong tài liệu

addEventListener chấp nhận ba tham số. tham số đầu tiên là tên của sự kiện để lắng nghe;

Trong hầu hết các trường hợp, bạn chỉ cần sử dụng hai tham số đầu tiên. Đây là một ví dụ về việc xử lý sự kiện click trên một nút

const button = document.querySelector("button");
button.addEventListener("click", function (e) {
    alert("Button clicked");
});

Điều này truy xuất nút đầu tiên trên trang và khi nút được nhấp, sẽ hiển thị cảnh báo

Một sự kiện có thể có nhiều hơn một trình xử lý không?

Cùng một sự kiện có thể có nhiều trình xử lý. Các trình xử lý được kích hoạt từng cái một khi sự kiện xảy ra

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

Như bạn có thể thấy, hàm được truyền dưới dạng tham số thứ hai cho addEventListener đã nhận đối số

document.querySelector("input").addEventListener("change", function (e) {
    alert(e.target.value);
});

0. Đây là một đối tượng Sự kiện. Đối tượng này có thể có các thuộc tính khác nhau tùy thuộc vào loại cơ bản của nó. Tuy nhiên, nó có một số thuộc tính quan trọng phổ biến

Một thuộc tính được sử dụng thường xuyên trên đối tượng Sự kiện là thuộc tính

document.querySelector("input").addEventListener("change", function (e) {
    alert(e.target.value);
});

1. Đây là yếu tố mà sự kiện đã được kích hoạt trên. Điều này có thể hữu ích khi bạn có cùng một trình xử lý cho nhiều phần tử

Ví dụ

document.querySelector("input").addEventListener("change", function (e) {
    alert(e.target.value);
});

Đoạn mã này thêm một trình xử lý sự kiện vào phần tử

document.querySelector("input").addEventListener("change", function (e) {
    alert(e.target.value);
});

2 đầu tiên trong sự kiện

document.querySelector("input").addEventListener("change", function (e) {
    alert(e.target.value);
});

3. Sự kiện

document.querySelector("input").addEventListener("change", function (e) {
    alert(e.target.value);
});

3 được kích hoạt khi bạn thay đổi giá trị của đầu vào, sau đó di chuyển tiêu điểm khỏi đầu vào (ví dụ: nhấp vào một thứ khác trên trang)

Khi sự kiện

document.querySelector("input").addEventListener("change", function (e) {
    alert(e.target.value);
});

3 xảy ra và trình xử lý được kích hoạt, giá trị của đầu vào được truy xuất bằng cách sử dụng

document.querySelector("input").addEventListener("change", function (e) {
    alert(e.target.value);
});

6 và được sử dụng trong cảnh báo

Ngăn chặn hành vi mặc định của sự kiện

Trong một số trường hợp, bạn muốn ngăn hành vi mặc định của một số sự kiện nhất định. Ví dụ: khi một liên kết được nhấp vào một trang, bạn có thể muốn hiển thị thông báo xác nhận trước khi người dùng thực sự được đưa đến một trang mới

Để ngăn hành vi mặc định của một sự kiện, bạn có thể sử dụng phương thức

document.querySelector("input").addEventListener("change", function (e) {
    alert(e.target.value);
});

7 trên đối tượng Sự kiện

Ví dụ

const a = document.querySelector("a.some-link");
a.addEventListener("click", function (e) {
    e.preventDefault();
    if(confirm("Are you sure?")) {
      window.location.href = e.target.href;
    }
});

Điều này thêm một trình xử lý sự kiện vào các sự kiện click trên một liên kết có lớp

document.querySelector("input").addEventListener("change", function (e) {
    alert(e.target.value);
});

9. Trong trình xử lý sự kiện,

const a = document.querySelector("a.some-link");
a.addEventListener("click", function (e) {
    e.preventDefault();
    if(confirm("Are you sure?")) {
      window.location.href = e.target.href;
    }
});

0 được sử dụng để ngăn hành vi mở trang mặc định được chỉ định trong thuộc tính

const a = document.querySelector("a.some-link");
a.addEventListener("click", function (e) {
    e.preventDefault();
    if(confirm("Are you sure?")) {
      window.location.href = e.target.href;
    }
});

1

Sau đó, nó hiển thị cho người dùng một cửa sổ xác nhận và nếu người dùng nhấp vào Có trên cửa sổ xác nhận, thì nó sẽ mở trang như mong đợi

Ngăn chặn các trình xử lý khác xử lý sự kiện này

Như đã đề cập trước đó, một sự kiện có thể có nhiều trình xử lý. Tuy nhiên, trong một số trường hợp, bạn có thể muốn hủy các sự kiện khác khỏi việc xử lý sự kiện này. Ví dụ: nếu một yêu cầu được gửi đến máy chủ khi gửi biểu mẫu và bạn không muốn các trình xử lý sự kiện gửi biểu mẫu khác gửi thêm yêu cầu

Có hai phương pháp có thể được sử dụng để ngăn các trình xử lý khác xử lý cùng một sự kiện.

const a = document.querySelector("a.some-link");
a.addEventListener("click", function (e) {
    e.preventDefault();
    if(confirm("Are you sure?")) {
      window.location.href = e.target.href;
    }
});

2 và

const a = document.querySelector("a.some-link");
a.addEventListener("click", function (e) {
    e.preventDefault();
    if(confirm("Are you sure?")) {
      window.location.href = e.target.href;
    }
});

3

const a = document.querySelector("a.some-link");
a.addEventListener("click", function (e) {
    e.preventDefault();
    if(confirm("Are you sure?")) {
      window.location.href = e.target.href;
    }
});

2 được sử dụng để ngăn các trình xử lý sự kiện khác xử lý một sự kiện trong giai đoạn bong bóng

Bong bóng là khi bạn có cùng một sự kiện trên cả phần tử con và phần tử cha. Sự kiện sẽ được kích hoạt đầu tiên trên phần tử con, sau đó "được tạo bọt" cho phần tử cha

Trong trường hợp này,

const a = document.querySelector("a.some-link");
a.addEventListener("click", function (e) {
    e.preventDefault();
    if(confirm("Are you sure?")) {
      window.location.href = e.target.href;
    }
});

2 ngăn không cho sự kiện được kích hoạt trên phần tử cha nếu được gọi trong trình xử lý của phần tử con. Tuy nhiên, nó không ngăn sự kiện lan truyền đến các trình xử lý sự kiện khác

Để ngăn sự kiện được xử lý bởi các trình xử lý tiếp theo, bạn có thể sử dụng

const a = document.querySelector("a.some-link");
a.addEventListener("click", function (e) {
    e.preventDefault();
    if(confirm("Are you sure?")) {
      window.location.href = e.target.href;
    }
});

3

Ví dụ

const button = document.querySelector("button");

button.addEventListener("click", function (e) {
  e.stopImmediatePropagation();
  alert("Hello!");
});

button.addEventListener("click", function (e) {
  alert("Bye!")
})

Mặc dù nút có hai trình xử lý sự kiện lắng nghe sự kiện click, nhưng chỉ có trình xử lý đầu tiên sẽ chạy vì nó gọi hàm

const a = document.querySelector("a.some-link");
a.addEventListener("click", function (e) {
    e.preventDefault();
    if(confirm("Are you sure?")) {
      window.location.href = e.target.href;
    }
});

3

Sự khác biệt giữa preventDefault, stopPropagation và stopImmediatePropagation

const a = document.querySelector("a.some-link");
a.addEventListener("click", function (e) {
    e.preventDefault();
    if(confirm("Are you sure?")) {
      window.location.href = e.target.href;
    }
});

9 chỉ ngăn hành vi mặc định của sự kiện. Tuy nhiên, nó không ngăn các trình xử lý khác xử lý sự kiện

const a = document.querySelector("a.some-link");
a.addEventListener("click", function (e) {
    e.preventDefault();
    if(confirm("Are you sure?")) {
      window.location.href = e.target.href;
    }
});

2 và

const a = document.querySelector("a.some-link");
a.addEventListener("click", function (e) {
    e.preventDefault();
    if(confirm("Are you sure?")) {
      window.location.href = e.target.href;
    }
});

3 chỉ ngăn những người xử lý khác xử lý sự kiện. Tuy nhiên, chúng không ngăn hành vi mặc định của sự kiện

Nếu bạn muốn ngăn cả hành vi mặc định và các trình xử lý khác xử lý sự kiện, hãy sử dụng

const a = document.querySelector("a.some-link");
a.addEventListener("click", function (e) {
    e.preventDefault();
    if(confirm("Are you sure?")) {
      window.location.href = e.target.href;
    }
});

9 với

const a = document.querySelector("a.some-link");
a.addEventListener("click", function (e) {
    e.preventDefault();
    if(confirm("Are you sure?")) {
      window.location.href = e.target.href;
    }
});

2 hoặc

const a = document.querySelector("a.some-link");
a.addEventListener("click", function (e) {
    e.preventDefault();
    if(confirm("Are you sure?")) {
      window.location.href = e.target.href;
    }
});

3

Xử lý sự kiện trên các phần tử động

Xem xét ví dụ sau

const buttons = document.querySelectorAll(".btn");

buttons.forEach((btn) => {
  btn.addEventListener("click", function (e) {
    alert("Hello!");
  });
})

//create new button
const button = document.createElement('button');
button.classList.add('btn');
button.textContent = "Bye";
document.body.append(button);

Trong ví dụ này, trước tiên bạn truy xuất tất cả các nút có lớp

const button = document.querySelector("button");

button.addEventListener("click", function (e) {
  e.stopImmediatePropagation();
  alert("Hello!");
});

button.addEventListener("click", function (e) {
  alert("Bye!")
})

5. Sau đó, bạn lặp qua các nút này và thêm trình xử lý sự kiện chỉ hiển thị cảnh báo "Xin chào" khi nút được nhấp

Sau đó, bạn tự động tạo một nút mới, thêm lớp

const button = document.querySelector("button");

button.addEventListener("click", function (e) {
  e.stopImmediatePropagation();
  alert("Hello!");
});

button.addEventListener("click", function (e) {
  alert("Bye!")
})

5 vào nút đó và thêm nó vào

const button = document.querySelector("button");

button.addEventListener("click", function (e) {
  e.stopImmediatePropagation();
  alert("Hello!");
});

button.addEventListener("click", function (e) {
  alert("Bye!")
})

7 của tài liệu

Nếu bạn thử nhấp vào các nút đã được thêm vào trong HTML của tài liệu hoặc đã được thêm vào trước khi thêm trình xử lý sự kiện, cảnh báo sẽ được hiển thị như mong đợi. Tuy nhiên, nếu bạn nhấp vào nút mới, sẽ không có cảnh báo nào được hiển thị

Điều này là do phần tử không phải là một phần của các phần tử được truy xuất bằng cách sử dụng

const button = document.querySelector("button");

button.addEventListener("click", function (e) {
  e.stopImmediatePropagation();
  alert("Hello!");
});

button.addEventListener("click", function (e) {
  alert("Bye!")
})

8 vì nó không tồn tại vào thời điểm đó

Mặc dù đây là kết quả hợp lý, nhưng trong các trang web lớn hơn, bạn có thể không đính kèm trình xử lý sự kiện mỗi khi tạo phần tử mới hoặc bạn có thể muốn đảm bảo rằng trình xử lý sự kiện được thêm vào tất cả các phần tử, cho dù được tạo ban đầu hay động

Trong trường hợp đó, thay vì thêm trực tiếp trình xử lý sự kiện vào từng phần tử một cách riêng biệt, bạn có thể thêm trình xử lý sự kiện vào

const button = document.querySelector("button");

button.addEventListener("click", function (e) {
  e.stopImmediatePropagation();
  alert("Hello!");
});

button.addEventListener("click", function (e) {
  alert("Bye!")
})

7 của tài liệu và sử dụng

const buttons = document.querySelectorAll(".btn");

buttons.forEach((btn) => {
  btn.addEventListener("click", function (e) {
    alert("Hello!");
  });
})

//create new button
const button = document.createElement('button');
button.classList.add('btn');
button.textContent = "Bye";
document.body.append(button);

0 để kiểm tra xem phần tử được kích hoạt có khớp với một điều kiện cụ thể hay không

Ví dụ: bạn có thể chuyển đổi ví dụ trước thành ví dụ sau

document.body.addEventListener("click", function (e) {
  if (e.target.classList.contains("btn")) {
    alert("Hello!");
  }
})

//create new button
const button = document.createElement('button');
button.classList.add('btn');
button.textContent = "Bye";
document.body.append(button);

Bạn thêm một trình xử lý vào sự kiện click trên

const button = document.querySelector("button");

button.addEventListener("click", function (e) {
  e.stopImmediatePropagation();
  alert("Hello!");
});

button.addEventListener("click", function (e) {
  alert("Bye!")
})

7. Trong trình xử lý, bạn kiểm tra xem

const buttons = document.querySelectorAll(".btn");

buttons.forEach((btn) => {
  btn.addEventListener("click", function (e) {
    alert("Hello!");
  });
})

//create new button
const button = document.createElement('button');
button.classList.add('btn');
button.textContent = "Bye";
document.body.append(button);

0 có lớp

const button = document.querySelector("button");

button.addEventListener("click", function (e) {
  e.stopImmediatePropagation();
  alert("Hello!");
});

button.addEventListener("click", function (e) {
  alert("Bye!")
})

5 hay không và chỉ thực hiện hành động cần thiết nếu có

Bây giờ, khi bất kỳ phần tử nào có lớp

const button = document.querySelector("button");

button.addEventListener("click", function (e) {
  e.stopImmediatePropagation();
  alert("Hello!");
});

button.addEventListener("click", function (e) {
  alert("Bye!")
})

5, dù được tạo động hay được tạo ban đầu, được nhấp vào, trình xử lý sự kiện sẽ chạy cho chúng

Tuy nhiên, cách tiếp cận này sẽ chạy trình xử lý sự kiện trên mọi sự kiện nhấp chuột trên phần thân. Vì vậy, điều quan trọng là phải xử lý nó dựa trên mục tiêu một cách cẩn thận

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

Trong một số trường hợp, bạn có thể muốn xóa trình xử lý sự kiện cho một phần tử. Để làm điều đó, bạn có thể sử dụng phương pháp

const buttons = document.querySelectorAll(".btn");

buttons.forEach((btn) => {
  btn.addEventListener("click", function (e) {
    alert("Hello!");
  });
})

//create new button
const button = document.createElement('button');
button.classList.add('btn');
button.textContent = "Bye";
document.body.append(button);

6. Phương thức này khả dụng trên mọi Phần tử và Nút trong tài liệu

Phương pháp này nhận được các tham số tương tự addEventListener nhận. Điều quan trọng là phải truyền chức năng giống như bạn đã truyền cho addEventListener. Vì lý do đó, mọi người thường định nghĩa hàm riêng biệt, sau đó chuyển nó cho addEventListener và

const buttons = document.querySelectorAll(".btn");

buttons.forEach((btn) => {
  btn.addEventListener("click", function (e) {
    alert("Hello!");
  });
})

//create new button
const button = document.createElement('button');
button.classList.add('btn');
button.textContent = "Bye";
document.body.append(button);

6

Ví dụ

const button = document.querySelector("button");

function handleClick (e) {
  alert("Hello");
}

button.addEventListener("click", handleClick);

//some time later
button.removeEventListener("click", handleClick);

Phần kết luận

Bài viết này vạch ra bề nổi của Sự kiện và giúp bạn hiểu rõ hơn về chúng. Để tìm hiểu thêm về Sự kiện trong JavaScript, hãy xem các tài nguyên sau

Các sự kiện được xử lý như thế nào trong JavaScript?

Cách ưa thích nhất để xử lý các sự kiện trong JavaScript là gì?

Làm thế nào các sự kiện được xử lý?

Làm cách nào chúng ta có thể xử lý các sự kiện trong HTML?