Event

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Note: This feature is available in Web Workers.

Giao diện Event biểu diễn một sự kiện xảy ra trên một EventTarget.

Một sự kiện có thể được kích hoạt bởi hành động của người dùng, chẳng hạn như nhấp chuột hoặc nhấn phím, hoặc được các API tạo ra để biểu diễn tiến trình của một tác vụ bất đồng bộ. Sự kiện cũng có thể được kích hoạt theo chương trình, chẳng hạn bằng cách gọi phương thức HTMLElement.click() của một phần tử, hoặc bằng cách định nghĩa sự kiện rồi gửi nó đến một đích được chỉ định bằng EventTarget.dispatchEvent().

Có nhiều loại sự kiện, trong đó một số loại dùng các giao diện khác dựa trên giao diện Event chính. Bản thân Event chứa các thuộc tính và phương thức chung cho mọi sự kiện.

Nhiều phần tử DOM có thể được cấu hình để nhận (hoặc "lắng nghe") các sự kiện này, và thực thi mã để phản hồi khi xử lý chúng. Các trình xử lý sự kiện thường được gắn (hoặc "đính kèm") vào nhiều phần tử HTML khác nhau (chẳng hạn <button>, <div>, <span>, v.v.) bằng EventTarget.addEventListener(), và cách này thường thay thế cho việc dùng các thuộc tính trình xử lý sự kiện cũ của HTML. Ngoài ra, khi được thêm đúng cách, các trình xử lý như vậy cũng có thể được gỡ ra nếu cần bằng removeEventListener().

Note: Một phần tử có thể có nhiều trình xử lý như vậy, kể cả cho cùng một sự kiện, đặc biệt nếu các mô-đun mã riêng biệt và độc lập cùng gắn chúng cho những mục đích độc lập của riêng mình. (Ví dụ: một trang web có mô-đun quảng cáo và mô-đun thống kê cùng theo dõi việc xem video.)

Khi có nhiều phần tử lồng nhau, mỗi phần tử lại có một hay nhiều trình xử lý riêng, việc xử lý sự kiện có thể trở nên rất phức tạp, đặc biệt khi phần tử cha nhận chính sự kiện mà phần tử con của nó nhận, vì chúng chồng lấn nhau về mặt "không gian", nên về mặt kỹ thuật sự kiện xảy ra ở cả hai, và thứ tự xử lý của các sự kiện như vậy phụ thuộc vào cài đặt sự lan truyền sự kiện của từng trình xử lý được kích hoạt.

Giao diện dựa trên Event

Dưới đây là danh sách các giao diện dựa trên giao diện Event chính, kèm liên kết đến tài liệu tương ứng trong phần tham chiếu API của MDN.

Lưu ý rằng mọi giao diện sự kiện đều có tên kết thúc bằng "Event".

Hàm khởi tạo

Event()

Tạo một đối tượng Event rồi trả về cho bên gọi.

Thuộc tính thể hiện

Event.bubbles Read only

Một giá trị boolean cho biết sự kiện có lan truyền lên qua cây DOM hay không.

Event.cancelable Read only

Một giá trị boolean cho biết sự kiện có thể bị hủy hay không.

Event.composed Read only

Một giá trị boolean cho biết sự kiện có thể lan truyền qua ranh giới giữa shadow DOM và DOM thông thường hay không.

Event.currentTarget Read only

Tham chiếu đến đích hiện đang được đăng ký cho sự kiện. Đây là đối tượng mà sự kiện hiện đang được lên lịch để gửi tới. Có thể giá trị này đã thay đổi dọc đường thông qua retargeting.

Event.defaultPrevented Read only

Cho biết lời gọi đến event.preventDefault() có hủy sự kiện hay không.

Event.eventPhase Read only

Cho biết pha nào của luồng sự kiện đang được xử lý. Giá trị là một trong các số sau: NONE, CAPTURING_PHASE, AT_TARGET, BUBBLING_PHASE.

Event.isTrusted Read only

Cho biết sự kiện được khởi tạo bởi trình duyệt (sau một cú nhấp chuột của người dùng, chẳng hạn) hay bởi script (ví dụ bằng một phương thức tạo sự kiện).

Event.srcElement Read only Deprecated

Một bí danh của thuộc tính Event.target. Hãy dùng Event.target thay thế.

Event.target Read only

Tham chiếu đến đối tượng mà sự kiện ban đầu được gửi tới.

Event.timeStamp Read only

Thời điểm sự kiện được tạo (tính bằng mili giây). Theo đặc tả, giá trị này là thời gian tính từ epoch, nhưng trên thực tế mỗi trình duyệt định nghĩa khác nhau. Ngoài ra, công việc đang được tiến hành để đổi giá trị này thành một DOMHighResTimeStamp.

Event.type Read only

Tên xác định loại sự kiện.

Thuộc tính kế thừa và không chuẩn

Event.cancelBubble Deprecated

Một bí danh lịch sử cho Event.stopPropagation(), vốn nên được dùng thay thế. Việc đặt giá trị của nó thành true trước khi trả về từ một trình xử lý sự kiện sẽ ngăn sự kiện lan truyền.

Event.explicitOriginalTarget Non-standard Read only

Đích gốc tường minh của sự kiện.

Event.originalTarget Non-standard Read only

Đích gốc của sự kiện, trước mọi lần retargeting.

Event.returnValue Deprecated

Một thuộc tính lịch sử vẫn được hỗ trợ để đảm bảo các trang hiện có tiếp tục hoạt động. Hãy dùng Event.preventDefault()Event.defaultPrevented thay thế.

Event.scoped Read only Deprecated

Một giá trị boolean cho biết sự kiện đã cho có lan truyền qua shadow root vào DOM tiêu chuẩn hay không. Hãy dùng composed thay thế.

Phương thức thể hiện

Event.composedPath()

Trả về đường đi của sự kiện (một mảng các đối tượng mà trên đó các bộ lắng nghe sẽ được gọi). Điều này không bao gồm các nút trong shadow tree nếu shadow root được tạo với chế độ ShadowRoot.modeclosed.

Event.preventDefault()

Hủy sự kiện (nếu nó có thể bị hủy).

Event.stopImmediatePropagation()

Đối với sự kiện cụ thể này, ngăn mọi bộ lắng nghe khác được gọi. Điều này bao gồm cả các bộ lắng nghe gắn vào cùng một phần tử và những bộ lắng nghe gắn vào các phần tử sẽ được duyệt sau đó (chẳng hạn trong pha capture).

Event.stopPropagation()

Dừng sự lan truyền của sự kiện đi xa hơn trong DOM.

Phương thức không dùng nữa

Event.initEvent() Deprecated

Khởi tạo giá trị của một Event đã được tạo. Nếu sự kiện đã được gửi rồi, phương thức này không làm gì cả. Hãy dùng hàm khởi tạo (Event()) thay thế.

Thông số kỹ thuật

Specification
DOM
# interface-event

Tương thích trình duyệt

Xem thêm