Câu hỏi phỏng vấn JavaScript: Chi tiết các sự kiện – Chickgolden


Ảnh của Aranxa Esteve trên Unsplash

Để có được việc làm với tư cách là nhà tăng trưởng front-end, tất cả chúng ta cần phải hoàn thành xong cuộc phỏng vấn viết mã .
Trong bài viết này, tất cả chúng ta sẽ xem xét những câu hỏi về việc giải quyết và xử lý những sự kiện trong JavaScript giao diện người dùng .

Trình xử lý sự kiện được sử dụng như thế nào trong JavaScript?

Sự kiện là những hành vi xuất phát từ những hoạt động giải trí vui chơi của người dùng như nhấp vào link hoặc nhập văn bản. Cần có một trình xử lý sự kiện để chạy mã khi một sự kiện được kích hoạt trong một thành phần .

Bộ xử lý sự kiện được đặt như một thuộc tính bổ sung của một đối tượng. Ví dụ: nếu chúng ta muốn xử lý một sự kiện của một nút, thì chúng ta có thể viết:

Bạn đang đọc : Câu hỏi phỏng vấn JavaScript : Chi tiết những sự kiện

const button = document.getElementById('button');
button.onclick = (event) => {
  //...
}

Các eventtham số là một đối tượng mà có mẩu thông tin khác nhau về sự kiện này.

Chúng ta cũng có thể sử dụng lệnh addEventListenergọi để làm điều tương tự:

const button = document.getElementById('button');
button.addEventListener('click', (event) => {
  //...
})

Sự khác biệt giữa ‘ event.preventDefault()'và’ là event.stopPropagation()'gì?

event.preventDefault() được sử dụng để dừng hành vi mặc định của bất kỳ phần tử nào đã kích hoạt sự kiện xảy ra.

Nếu nó được sử dụng với một formphần tử, thì chúng tôi ngăn nó gửi.

Nếu nó được sử dụng với một aphần tử, thì preventDefault()nó sẽ ngăn nó điều hướng.

event.stopProgation() được sử dụng đặc biệt để ngăn sự lan truyền của một sự kiện và ngăn sự kiện xảy ra trong giai đoạn sôi sục và bắt giữ.

Làm sao chúng ta biết nếu ‘được event.preventDefault()'sử dụng trong một phần tử?

Chúng ta có thể kiểm tra thuộc event.defaultPreventedtính trong đối tượng sự kiện. Nếu nó là true, sau đó event.preventDefault()đã được gọi.

‘Event.target’ là gì?

event.target là phần tử mà sự kiện đã xảy ra hoặc phần tử nơi sự kiện được kích hoạt.

Ví dụ : giả sử tổng thể tất cả chúng ta có HTML sau :


const button = document.getElementById('button');
button.onclick = (event) => {
  console.log(event.target.id);
}

Điều này cho thấy đó event.targetlà yếu tố mà sự kiện đã được kích hoạt.

Nếu toàn bộ tất cả chúng ta thêm một trình xử lý và giải quyết và xử lý sự kiện cho div, như sau :

const button = document.getElementById('button');
const div = document.getElementById('div');
button.onclick = (event) => {
  console.log(event.target.id);
}
div.onclick = (event) => {
  console.log(event.target.id);
}

‘Event.currentTarget’ là gì?

event.currentTarget là phần tử đã đính kèm trình xử lý sự kiện một cách rõ ràng.

Ví dụ : giả sử tất cả chúng ta có HTML sau :


const button = document.getElementById('button');
const div = document.getElementById('div');
button.onclick = (event) => {
  console.log(`button.onclick ${event.currentTarget.id}`);
}
div.onclick = (event) => {
  console.log(`div.onclick ${event.currentTarget.id}`);
}

Do đó, chúng tôi thấy event.currentTargetlà phần tử chúng tôi đã gắn vào trình xử lý sự kiện.

Ảnh của Xin chào Tôi là Nik 🇬 🇧 trên Unsplash

Ủy quyền sự kiện là gì?

Ủy quyền sự kiện là nơi chúng tôi thêm trình nghe sự kiện vào thành phần mẹ thay vì thêm chúng vào những thành phần con .
Người nghe sẽ kích hoạt bất kể thành phần nào được kích hoạt trên thành phần con vì những sự kiện Open từ thành phần đã kích hoạt sự kiện .
Nó hữu dụng vì tất cả chúng ta chỉ có một trình giải quyết và xử lý duy nhất được gắn vào thành phần mẹ .
Cũng không cần phải hủy link trình giải quyết và xử lý khỏi thành phần bị xóa và link nó với những thành phần mới .
Ví dụ : nếu tất cả chúng ta có HTML sau …


const div = document.getElementById('div');
div.onclick = (event) => {
  if (event.target.matches("button#button-a")) {
    alert('Button A clicked');
  } else if (event.target.matches("button#button-b")) {
    alert('Button B clicked');
  }
}

Sau đó, trong hàm xử lý sự kiện, chúng tôi kiểm tra event.targetđiều đã gọi sự kiện nhấp chuột bằng cách sử dụng matchesphương thức.

Nếu nút có ID button-ađược nhấp vào, thì chúng tôi sẽ hiển thị hộp cảnh báo với Button A clicked.

Và nếu nút có ID button-bđược nhấp vào thì chúng tôi sẽ hiển thị một hộp cảnh báo với Button B clicked.

Như toàn bộ tất cả chúng ta thấy, toàn bộ tất cả chúng ta chỉ có một trình xử lý sự kiện, nhưng tổng thể tất cả chúng ta trọn vẹn hoàn toàn có thể xử lý và giải quyết và xử lý những sự kiện nhấp chuột của tổng thể và toàn diện những nút bên trong .

Sự khác biệt giữa LoadSự kiện Tài liệu và DOMContentLoadedSự kiện Tài liệu là gì?

Sự DOMContentLoadedkiện được kích hoạt khi tài liệu HTML ban đầu đã được tải hoàn toàn và được phân tích cú pháp mà không cần đợi các biểu định kiểu, hình ảnh và khung phụ tải xong.

Sự loadkiện chỉ được kích hoạt sau khi DOM và tất cả các tài nguyên và nội dung phụ thuộc đã được tải.

Vòng lặp sự kiện là gì?

Vòng lặp sự kiện là một vòng lặp đơn luồng theo dõi ngăn xếp cuộc gọi và kiểm tra xem có bất kể mã nào để chạy trong hàng đợi tác vụ hay không .
Nếu ngăn xếp cuộc gọi trống và có những hàm gọi lại trong hàng đợi tác vụ, thì chúng sẽ được xếp lại từ hàng đợi tác vụ và chạy bằng cách đẩy chúng vào ngăn xếp cuộc gọi .

Phần kết luận

Trong JavaScript, chúng tôi giải quyết và xử lý những sự kiện bằng cách gắn những trình giải quyết và xử lý sự kiện vào một thành phần .

Chúng tôi cũng hoàn toàn có thể sử dụng chuyển nhượng ủy quyền sự kiện để tránh gắn trình nghe sự kiện vào từng thành phần. Nó cũng có ích cho việc giải quyết và xử lý những sự kiện thành phần động vì chúng tôi không phải đính kèm và xóa trình xử lý sự kiện khỏi chúng với ủy quyền sự kiện .
Trong JavaScript, vòng lặp sự kiện là một vòng lặp đơn luồng theo dõi ngăn xếp cuộc gọi và chạy những gì ở đó. Nếu không có gì trong ngăn xếp cuộc gọi, thì bất kể thứ gì trong hàng đợi tác vụ sẽ được định giá lại và chạy bằng cách đẩy nó vào ngăn xếp cuộc gọi .

Source: https://datxuyenviet.vn
Category: Blog

Đánh giá post
0/5 (0 Reviews)

Related Posts

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *