Thuộc tính Event.cancelable trong JavaScript là gì?

Trong JavaScript, để ngăn thực thi hành động từ một sự kiện (event) ví dụ sự kiện submit, click,... Chúng ta có thể sử dụng method preventDefault(). Để xem một event bất kỳ có cho phép dừng hành động của nó hay không, các bạn có thể sử dụng thuộc tính cancelable trong JavaScript.

Thuộc tính cancelable sẽ trả về một giá trị boolean cho biết event có thể hủy hay không. Hầu hết những sự kiện do chúng ta tương tác với trang đều có thể được hủy nếu muốn (cancelable trả về true), ví dụ như sự kiện click, wheel,...

Để tránh lỗi xảy ra khi muốn hủy một sự kiện bất kỳ bằng preventDefault(), các bạn có thể sử dụng thuộc tính cancelable để xem sự kiện này có thể hủy hay không, ví dụ:

<p>Nhập tên của bạn bằng chữ thường (lowercase letters).</p>

<form>
  <input type="text" id="name" autocomplete="off" />
</form>

Trong đoạn JavaScript dưới đây, chúng ta giả sử chỉ được phép nhập chữ thường, các bạn có thể sử dụng preventDefault() để hủy sự kiện nếu ký tự không hợp lệ ^^. Nếu muốn chắc ăn event keypress này có thể hủy được thì các bạn sử dụng thêm thuộc tính cancelable để check.

const textbox = document.getElementById("name");

textbox.addEventListener("keypress", function (evt) {
  const charCode = evt.key.charCodeAt();

  if (charCode !== 0 && (charCode < 97 || charCode > 122)) {
    if (evt.cancelable) {
      evt.preventDefault();
      alert("Bạn chỉ được phép sử dụng chữ thường a-z.");
    }
  }
});