UI Events

Giao diện

CompositionEvent

Được truyền vào các trình xử lý cho các sự kiện composition. Các sự kiện composition cho phép người dùng nhập các ký tự có thể không có sẵn trên bàn phím vật lý.

FocusEvent

Được truyền vào các trình xử lý cho các sự kiện focus, liên quan đến các phần tử nhận hoặc mất focus.

InputEvent

Được truyền vào các trình xử lý cho các sự kiện input, liên quan đến người dùng nhập vào đầu vào nào đó; ví dụ, sử dụng phần tử <input>.

KeyboardEvent

Được truyền vào các trình xử lý cho các sự kiện keyup/keydown của bàn phím.

MouseEvent

Được truyền vào các trình xử lý sự kiện cho các sự kiện chuột, bao gồm di chuyển chuột, di chuyển qua và ra ngoài, và nhấn hoặc thả nút chuột. Lưu ý rằng các sự kiện auxclick, click và dblclick được truyền đối tượng PointerEvent.

MouseScrollEvent Deprecated

Đã lỗi thời, giao diện phi tiêu chuẩn chỉ có trong Firefox cho các sự kiện cuộn. Hãy sử dụng WheelEvent thay thế.

MutationEvent Deprecated

Được truyền vào các trình xử lý sự kiện mutation, được thiết kế để cho phép thông báo về các thay đổi trong DOM. Hiện đã lỗi thời: hãy sử dụng MutationObserver thay thế.

UIEvent

Cơ sở mà các sự kiện UI khác kế thừa, và cũng là giao diện sự kiện được truyền vào một số sự kiện như load và unload.

WheelEvent

Được truyền vào trình xử lý cho sự kiện wheel, kích hoạt khi người dùng xoay bánh xe chuột hoặc thành phần giao diện người dùng tương tự như touchpad.

Sự kiện

abort

Kích hoạt khi tải tài nguyên bị hủy bỏ (ví dụ, vì người dùng đã hủy).

auxclick

Kích hoạt khi người dùng nhấp nút con trỏ không phải nút chính.

beforeinput

Kích hoạt ngay trước khi DOM sắp được cập nhật với một số đầu vào người dùng.

blur

Kích hoạt khi một phần tử mất focus.

click

Kích hoạt khi người dùng nhấp nút con trỏ chính.

compositionend

Kích hoạt khi hệ thống soạn thảo văn bản (như bộ xử lý chuyển giọng nói thành văn bản) đã kết thúc phiên làm việc; ví dụ, vì người dùng đã đóng nó.

compositionstart

Kích hoạt khi người dùng đã bắt đầu phiên làm việc mới với hệ thống soạn thảo văn bản.

compositionupdate

Kích hoạt khi hệ thống soạn thảo văn bản cập nhật văn bản của nó với ký tự mới, được phản ánh trong cập nhật thuộc tính data của CompositionEvent.

contextmenu

Kích hoạt ngay trước khi menu ngữ cảnh được gọi.

dblclick

Kích hoạt khi người dùng nhấp đôi nút con trỏ chính.

error

Kích hoạt khi tài nguyên tải thất bại hoặc không thể được xử lý (ví dụ, nếu ảnh không hợp lệ hoặc script có lỗi).

focus

Kích hoạt khi một phần tử nhận focus.

focusin

Kích hoạt khi một phần tử sắp nhận focus.

focusout

Kích hoạt khi một phần tử sắp mất focus.

input

Kích hoạt ngay sau khi DOM đã được cập nhật với một số đầu vào người dùng (ví dụ, một số văn bản đầu vào).

keydown

Kích hoạt khi người dùng đã nhấn một phím.

keypress Deprecated

Kích hoạt khi người dùng đã nhấn một phím, chỉ nếu phím tạo ra giá trị ký tự. Hãy sử dụng keydown thay thế.

keyup

Kích hoạt khi người dùng đã thả một phím.

load

Kích hoạt khi toàn bộ trang đã tải, bao gồm tất cả các tài nguyên phụ thuộc như stylesheet và ảnh.

mousedown

Kích hoạt khi người dùng nhấn nút trên chuột hoặc thiết bị trỏ khác, trong khi con trỏ đang trên phần tử.

mouseenter

Kích hoạt khi chuột hoặc thiết bị trỏ khác được di chuyển vào bên trong ranh giới của phần tử hoặc một trong các phần tử con của nó.

mouseleave

Kích hoạt khi chuột hoặc thiết bị trỏ khác được di chuyển ra ngoài ranh giới của phần tử và tất cả các phần tử con của nó.

mousemove

Kích hoạt khi chuột hoặc thiết bị trỏ khác được di chuyển trong khi đang trên phần tử.

mouseout

Kích hoạt khi chuột hoặc thiết bị trỏ khác được di chuyển ra ngoài ranh giới của phần tử.

mouseover

Kích hoạt khi chuột hoặc thiết bị trỏ khác được di chuyển qua một phần tử.

mouseup

Kích hoạt khi người dùng thả nút trên chuột hoặc thiết bị trỏ khác, trong khi con trỏ đang trên phần tử.

unload

Kích hoạt khi tài liệu hoặc tài nguyên con đang được gỡ tải.

wheel

Kích hoạt khi người dùng xoay bánh xe chuột hoặc thành phần giao diện người dùng tương tự như touchpad.

Ví dụ

Sự kiện chuột

Ví dụ này ghi lại các sự kiện chuột cùng với tọa độ X và Y tại điểm sự kiện được tạo ra. Hãy thử di chuyển chuột vào hình vuông vàng và đỏ, và nhấp hoặc nhấp đôi.

HTML

<div id="outer">
  <div id="inner"></div>
</div>

<div id="log">
  <pre id="contents"></pre>
  <button id="clear">Clear log</button>
</div>

CSS

body {
  display: flex;
  gap: 1rem;
}

#outer {
  height: 200px;
  width: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: yellow;
}

#inner {
  height: 100px;
  width: 100px;
  background-color: red;
}

#contents {
  height: 150px;
  width: 250px;
  border: 1px solid black;
  padding: 0.5rem;
  overflow: scroll;
}

JavaScript

const outer = document.querySelector("#outer");
const inner = document.querySelector("#inner");
const contents = document.querySelector("#contents");
const clear = document.querySelector("#clear");
let lines = 0;

outer.addEventListener("click", (event) => {
  log(event);
});

outer.addEventListener("dblclick", (event) => {
  log(event);
});

outer.addEventListener("mouseover", (event) => {
  log(event);
});

outer.addEventListener("mouseout", (event) => {
  log(event);
});

outer.addEventListener("mouseenter", (event) => {
  log(event);
});

outer.addEventListener("mouseleave", (event) => {
  log(event);
});

function log(event) {
  const prefix = `${String(lines++).padStart(3, "0")}: `;
  const line = `${event.type}(${event.clientX}, ${event.clientY})`;
  contents.textContent = `${contents.textContent}${prefix}${line}\n`;
  contents.scrollTop = contents.scrollHeight;
}

clear.addEventListener("click", () => {
  contents.textContent = "";
  lines = 0;
});

Kết quả

Sự kiện bàn phím và đầu vào

Ví dụ này ghi lại các sự kiện keydown, beforeinput và input. Hãy thử nhập vào vùng văn bản. Lưu ý rằng các phím như Shift tạo ra sự kiện keydown nhưng không phải sự kiện input.

HTML

<textarea id="story" rows="5" cols="33"></textarea>

<div id="log">
  <pre id="contents"></pre>
  <button id="clear">Clear log</button>
</div>

CSS

body {
  display: flex;
  gap: 1rem;
}

#story {
  padding: 0.5rem;
}

#contents {
  height: 150px;
  width: 250px;
  border: 1px solid black;
  padding: 0.5rem;
  overflow: scroll;
}

JavaScript

const story = document.querySelector("#story");
const contents = document.querySelector("#contents");
const clear = document.querySelector("#clear");
let lines = 0;

story.addEventListener("keydown", (event) => {
  log(`${event.type}(${event.key})`);
});

story.addEventListener("beforeinput", (event) => {
  log(`${event.type}(${event.data})`);
});

story.addEventListener("input", (event) => {
  log(`${event.type}(${event.data})`);
});

function log(line) {
  const prefix = `${String(lines++).padStart(3, "0")}: `;
  contents.textContent = `${contents.textContent}${prefix}${line}\n`;
  contents.scrollTop = contents.scrollHeight;
}

clear.addEventListener("click", () => {
  contents.textContent = "";
  lines = 0;
});

Kết quả

Thông số kỹ thuật

Xem thêm

• Pointer Events API
• Touch Events