Làm cách nào để kiểm tra sự kiện nào được kích hoạt trong JavaScript?

Hiểu cách tương tác của ngôn ngữ và trình duyệt là rất quan trọng nếu bạn muốn tận dụng tối đa JavaScript và tránh cho mình một loạt vấn đề đau đầu trong tương lai. Chúng tôi sẽ đề cập đến tất cả thông tin cơ bản về sự kiện trình duyệt và hướng bạn đến các tài nguyên khác để bạn có thể tìm hiểu sâu hơn

JavaScript so với. Trình duyệt

JavaScript là một ngôn ngữ lập trình nhỏ gọn đơn luồng. Điều đó có nghĩa là tất cả các hành động xảy ra trong cùng một quy trình. Trong các hệ điều hành và một số ngôn ngữ lập trình khác, bạn có thể làm nhiều việc cùng một lúc, nhưng JavaScript chỉ có thể làm một việc tại một thời điểm

Do đó, mã JavaScript có thể được mô tả là chặn. Chỉ có một điều có thể xảy ra và điều tiếp theo JavaScript muốn làm không thể bắt đầu cho đến khi điều đầu tiên kết thúc

JavaScript trên các trang web của chúng tôi chạy trong công cụ JavaScript của trình duyệt và sẽ thực hiện những việc như luồng số học và logic (khối if, vòng lặp for, vòng lặp while) và có một số loại dữ liệu tích hợp sẵn như chuỗi, số, đối tượng và mảng

Mặt khác, bạn có API trình duyệt. API trình duyệt là một tập hợp các khả năng mở rộng và ngày càng tăng mà trình duyệt tích hợp sẵn. Vài ví dụ

• DOM - Mô hình đối tượng tài liệu và tất cả các phương thức đi cùng với nó để cho phép thao tác với HTML
• CSSOM - Mô hình đối tượng CSS cho phép thao tác CSS
• Người quan sát (như người quan sát giao lộ và người quan sát thay đổi kích thước)
• Tìm nạp - một giao diện để tìm nạp tài nguyên
• Lịch sử - cho phép điều hướng và thao tác nội dung lịch sử của trình duyệt

Tất cả các API này là một phần của trình duyệt

Vòng lặp sự kiện

Vòng lặp sự kiện là cách JavaScript và trình duyệt tương tác

Vòng lặp sự kiện JavaScript

Ngăn xếp cuộc gọi JavaScript

Hãy nhớ rằng JavaScript đang chặn và đơn luồng. Ngăn xếp cuộc gọi là cách tổ chức các chức năng và tác vụ thứ hai không thể bắt đầu cho đến khi tác vụ đầu tiên kết thúc. Thứ tự này vẫn đúng…trừ khi tác vụ đầu tiên gọi một chức năng khác

Nếu một chức năng được gọi trong khi thực hiện một tác vụ, nó sẽ được đặt trên cùng của ngăn xếp cuộc gọi. Nếu chúng ta gọi một chức năng khác trong chức năng đó, nó cũng sẽ được đặt trên đầu ngăn xếp. Vì là ngăn xếp nên chúng tôi chỉ có thể kéo từ trên cùng của ngăn xếp, vì vậy chúng tôi không thể kéo mọi thứ từ dưới cùng của ngăn xếp để thực thi cho đến khi những phần trên cùng đó được giải quyết. Cách giải quyết các nhiệm vụ này là một cách tiếp cận được gọi là nhập trước xuất trước hoặc LIFO

Khi chúng tôi mô tả mã là "chặn", đây là nguồn gốc của vấn đề đó. Các chức năng đang chạy trong ngăn xếp cuộc gọi ngăn các tác vụ khác được hoàn thành

Hàng đợi gọi lại

Để tránh chặn các chức năng khác, JavaScript có thể giảm tải công việc cho API Web. Nếu bạn muốn thực hiện cuộc gọi AJAX hoặc đặt thời gian chờ, bạn có thể gửi thông tin đó tới API Web để thực hiện tất cả công việc đó. Khi API đã hoàn thành công việc của nó, nếu nó có chức năng gọi lại để chạy, nó sẽ đi vào Hàng đợi gọi lại. Khi JavaScript đã chạy mọi thứ trong ngăn xếp cuộc gọi của nó, nó sẽ lấy tác vụ tiếp theo từ hàng đợi gọi lại, chạy cho đến khi hoàn thành, sau đó lấy tác vụ tiếp theo trong hàng đợi

Nếu bạn muốn tìm hiểu sâu hơn về vấn đề này, bạn có thể xem video này về Vòng lặp sự kiện. Nó giới thiệu một trang web có tên là Loupe, một vòng lặp sự kiện mô phỏng trong trình duyệt

Vòng lặp sự kiện dẫn chúng ta đến một cách khác để giảm tải JavaScript hoạt động với API trình duyệt. sự kiện

sự kiện trình duyệt

Xin nhắc lại, Giao diện sự kiện là một API Web. Sự kiện là một thứ của trình duyệt, không phải là một thứ javascript. Trình duyệt có các sự kiện và khởi động chúng và JavaScript được cung cấp khả năng phản hồi các sự kiện đó. Các sự kiện cho phép trình duyệt khởi động các phản hồi có lập trình đối với các tương tác, thay đổi và các sự kiện quan trọng khác

Sự kiện có thể được kích hoạt bởi tương tác của người dùng, hành vi của trình duyệt và mã của bạn. Các sự kiện tương tác của người dùng được kích hoạt bởi những thứ như nhấp chuột, các nút được nhấn trên bàn phím và các yếu tố tăng hoặc giảm tiêu điểm. Các sự kiện hành vi của trình duyệt xảy ra đối với những thứ như tải và dỡ tài nguyên cũng như thay đổi hướng thiết bị. Cuối cùng, bạn có thể khởi tạo các sự kiện một cách giả tạo từ mã của mình bằng lệnh. phương thức công vănEvent()

.

Xử lý sự kiện trong JavaScript

Vì vậy, các sự kiện xảy ra ở phía trình duyệt. JavaScript đến từ đâu?

Để phản ứng với các sự kiện, bạn sẽ sử dụng EventTarget. addEventListener(kiểu sự kiện, gọi lại)

Phần lớn EventTarget là bất kỳ phần tử nào trên trang của bạn. Lớp rộng hơn thế, nhưng với mục đích của chúng tôi, điều này là đủ. Chúng ta có thể nói "chọn nút của tôi" hoặc "chọn đoạn văn của tôi" và thêm trình xử lý sự kiện vào đó

Dòng mã ngắn đó đang nói. "Này trình duyệt, khi 'EventTarget' có sự kiện 'eventtype', bạn có thể chạy chức năng 'gọi lại' không?"

Hãy xem điều gì sẽ xảy ra khi ai đó truy cập trang của bạn

• Máy chủ/Cache cung cấp dữ liệu thô. tệp html
• Trình duyệt phân tích cú pháp HTML đó thành DOM
  • Đây là nơi JS nội tuyến chạy
• Trình duyệt thực hiện tìm nạp trước
• Trình duyệt thực hiện các thao tác bố cục/vẽ
• Trình duyệt tìm nạp các tài nguyên còn lại
  • Đây là nơi JS bên ngoài chạy. Nếu bạn đã đặt mã của mình vào một tệp bên ngoài, đây là lúc mã JavaScript của bạn được tải và chạy
• Chạy js gọi addEventListener. Giả sử bạn muốn phản ứng với một nút bấm
• Trình duyệt lưu chức năng gọi lại
  • Một lượng thời gian không xác định trôi qua. Ngay bây giờ, mọi thứ đang nằm trong API Web
• Sự kiện cụ thể xảy ra trên mục tiêu đã chỉ định (nhấp vào nút)
• Trình duyệt bỏ chức năng gọi lại vào hàng đợi gọi lại

Nếu có nhiều sự kiện thì sao?

Khi một cú nhấp chuột xảy ra trên một phần tử, bạn có các sự kiện function myCallback(event) {   console.log(event); } button.addEventListener(‘click’, myCallback);2, function myCallback(event) {   console.log(event); } button.addEventListener(‘click’, myCallback);3 và function myCallback(event) {   console.log(event); } button.addEventListener(‘click’, myCallback);4 diễn ra liên tiếp nhanh chóng, tất cả đều trên cùng một thứ. Làm thế nào để chúng ta biết mọi thứ xảy ra theo đúng thứ tự?

Trình duyệt kích hoạt các sự kiện theo mô hình có thể dự đoán xảy ra trong tối đa ba giai đoạn. giai đoạn chụp, tại mục tiêu và giai đoạn bong bóng. Hãy nghĩ về các giai đoạn sự kiện giống như một quả bóng nảy. Quả bóng rơi xuống, tiếp xúc với mặt đất và sau đó bật lại

Trước khi đi vào chi tiết hơn, sẽ giúp phân biệt cách các kiểu người khác nhau cảm nhận một trang web so với cách trình duyệt cảm nhận trang web đó. Nhà thiết kế có thể thấy các thành phần được ghép nối trong bố cục. Các nhà chiến lược nội dung có thể thấy các tiêu đề, bài báo và chú thích cuối trang. Các nhà phát triển có thể thấy các tập hợp phần tử lồng nhau có chứa văn bản và mã trừu tượng đằng sau chúng

Trình duyệt không quan tâm đến bất kỳ điều gì trong số đó. Nó không quan tâm đến nội dung hay cách trình bày. Nó chỉ quan tâm đến DOM. Trình duyệt lưu trữ kiến ​​thức của nó về các thành phần của trang giống như biểu đồ luồng trong cấu trúc cây, liên kết từng nút trong cây với mọi nút khác. Các sự kiện luôn bắt đầu ở trên cùng của cây và đi xuống mục tiêu sự kiện sâu nhất

Sự kiện sẽ đi qua cây cho đến khi nó đến phần tử neo, mục tiêu của nó

Hãy tưởng tượng một sự kiện nhấp chuột vào phần tử thẻ neo ở gần cuối sơ đồ. Sự kiện bắt đầu từ đầu và đào sâu hơn

Sự kiện đã đạt được mục tiêu

Khi đã đạt đến phần tử sâu nhất có thể, sự kiện sẽ kích hoạt từ phần tử "mục tiêu". Trong trường hợp này, "mục tiêu" có nghĩa là những gì trình duyệt hướng tới, không nhất thiết là người dùng/nhà phát triển. Nếu người dùng đang nhắm đến một thứ và bỏ lỡ, thì mục tiêu là bất cứ thứ gì họ thực sự nhấp vào

Sau khi bắn trúng mục tiêu, một số sự kiện sẽ sao lưu cây DOM

Đối với một số sự kiện, bạn có giai đoạn sủi bọt. Nó truy ngược lại đường dẫn của nó thông qua DOM về phía gốc. Không phải tất cả các sự kiện bong bóng. Không có cách nào hữu ích mà chúng tôi đã tìm thấy để ghi nhớ sự kiện nào bong bóng và sự kiện nào không. Bạn sẽ cần kiểm tra tài liệu MDN

Điều quan trọng cần lưu ý là sự kiện tự "di chuyển" thay vì có một loạt sự kiện. Thay vì có một loạt sự kiện kích hoạt, một sự kiện trên mỗi nút DOM khi trình duyệt hoạt động hướng tới mục tiêu, trình duyệt có một sự kiện duy nhất được "nhắm mục tiêu lại" liên tiếp trên mỗi nút DOM. Do đó, điều quan trọng là phải phản ứng nhanh trong bất kỳ trình xử lý sự kiện nào nếu bạn cần thay đổi hoặc dừng sự kiện trước khi trình duyệt nhắm mục tiêu lại sự kiện đến nút DOM tiếp theo

Tại sao tất cả những điều này quan trọng?

Khi bạn thêm một trình lắng nghe sự kiện, bạn có thể cho trình duyệt biết giai đoạn nào sẽ gọi chức năng gọi lại của bạn trên. Bên trong chức năng gọi lại của bạn, bạn có thể thay đổi cách trình duyệt xử lý sự kiện bằng cách

• Ngăn chặn hành vi mặc định
• Ngăn chặn sự kiện tiếp tục con đường của nó dọc theo DOM
• Ngăn sự kiện gọi bất kỳ cuộc gọi lại bổ sung nào trên mục tiêu hiện tại, nếu bạn có mọi thứ theo đúng thứ tự

Thêm người nghe sự kiện

Hãy xem xét một số mã. Nếu chúng tôi muốn có một trình lắng nghe sự kiện, trước tiên chúng tôi cần tham chiếu đến phần tử là mục tiêu sự kiện của chúng tôi. Trong trường hợp này, nó sẽ là nút đầu tiên trên trang

const button = document.querySelector(‘button’);

Chúng tôi có ba cách để đặt gọi lại cho một sự kiện nhấp chuột. Cách đầu tiên có một hàm được đặt tên được khai báo ở nơi khác

function myCallback(event) {   console.log(event); } button.addEventListener(‘click’, myCallback);

Cách thứ hai chuyển một hàm ẩn danh theo cú pháp cũ hơn

button.addEventListener(‘click’, function(evt) { console.log(evt) });

Cách cuối cùng là với chức năng mũi tên

button.addEventListener(‘click’, (e) => { console.log(e) });

Mặc dù tất cả các ví dụ này đều làm cùng một việc, nhưng chúng sẽ được coi là ba trình xử lý sự kiện khác nhau. Nếu chúng tôi chạy mã này, việc nhấp vào nút sẽ dẫn đến 3 câu lệnh nhật ký bảng điều khiển giống hệt nhau

Hành vi mặc định cho các sự kiện

• Người nghe sự kiện sẽ luôn kích hoạt giai đoạn mục tiêu
• Người nghe sự kiện sẽ kích hoạt giai đoạn bong bóng theo mặc định đối với các sự kiện bong bóng. Sự kiện sẽ đi xuống DOM cho đến khi nó chạm vào mục tiêu, nhưng ngay cả những người nghe trên cha mẹ của mục tiêu sẽ không kích hoạt cho đến giai đoạn bong bóng khi sự kiện quay trở lại đường dẫn của nó
• Nhiều trình lắng nghe sự kiện trên cùng một mục tiêu sẽ được kích hoạt theo thứ tự chúng được đính kèm

Sửa đổi hành vi mặc định

Người nghe sự kiện có thể được thiết lập để chạy khi chụp. Khi sự kiện vượt qua một phần tử, nó sẽ kích hoạt chức năng gọi lại trước khi sự kiện đến đích

.addEventListener(‘click’, callback, true); .addEventListener(‘click’, callback, {useCapture: true});

Người nghe sự kiện cũng có thể được đặt để tự xóa sau khi kích hoạt

________số 8_______

Đáp ứng các sự kiện

Tất cả các sự kiện đều có các thuộc tính/phương thức này

Event = {   bubbles: boolean,   cancelable: boolean,   currentTarget: EventTarget,   preventDefault: function,   stopPropagation: function,   stopImmediatePropagation: function   target: EventTarget,   type: string, }

Thuộc tính function myCallback(event) {   console.log(event); } button.addEventListener(‘click’, myCallback);5 trỏ đến mục tiêu sự kiện hiện tại khi sự kiện di chuyển qua DOM và sẽ thay đổi đối với sự kiện khi nó được nhắm mục tiêu lại. Thuộc tính mục tiêu là mục tiêu dự định của sự kiện. function myCallback(event) {   console.log(event); } button.addEventListener(‘click’, myCallback);6 sẽ là tên của sự kiện, chẳng hạn như "mousedown" hoặc "click. "

Một số sự kiện thường kích hoạt một hành động trình duyệt mặc định có thể ngăn chặn hành động đó bằng cách gọi phương thức preventDefault(). Ví dụ: nếu bạn có một liên kết với trình xử lý sự kiện nhấp chuột, bạn có thể ngăn trình duyệt điều hướng khỏi trang hiện tại. Mặc dù đây không phải là một ý tưởng tuyệt vời cho mục đích tiếp cận, nhưng đây là một sự cố đủ phổ biến để làm ví dụ

function myCallback(event) {   event.preventDefault(); }

Các sự kiện có thể kích hoạt các cuộc gọi lại bổ sung trên các phần tử xa hơn dọc theo đường dẫn có thể bị tạm dừng bằng phương thức stopPropogation(). Gọi nó sẽ ngăn sự kiện tiếp tục được nhắm mục tiêu lại. Ngừng lan truyền là một công cụ có giá trị để quản lý các sự kiện có thể xung đột hoặc chồng chéo. Ví dụ: trình xử lý sự kiện nhấp chuột trên phần tử gốc và nút bên trong và bạn muốn nghe một nhóm nhấp chuột chứ không phải một nhóm nhấp chuột khác

function myCallback(event) {   event.stopPropagation(); }

Với stopImmediatePropagation(), bạn cũng có thể dừng bất kỳ cuộc gọi lại bổ sung nào trên phần tử hiện tại có thể xuất hiện sau cuộc gọi lại hiện tại. Việc gọi phương thức này không phổ biến và cần xem xét cẩn thận thứ tự mà người nghe được thêm vào

function myCallback(event) {   event.stopImmediatePropagation(); }

Một số loại sự kiện có các thuộc tính liên quan bổ sung. Nhấp vào các sự kiện lấy tọa độ và các phím bổ trợ. Sự kiện bàn phím nhận mã khóa. Sự kiện tiêu điểm lấy phần tử mà tiêu điểm đã di chuyển từ/đến

Xóa người nghe sự kiện

Bạn có thể xóa trình lắng nghe sự kiện nếu bạn chỉ muốn nghe trong một khoảng thời gian giới hạn hoặc một số lần nhất định. Bí quyết là có một tham chiếu đến cùng một chức năng trong các phương thức thêm và xóa. Bạn phải có chức năng gọi lại được đặt tên nếu bạn muốn làm điều này. Các hàm ẩn danh sẽ không hoạt động, ngay cả khi chúng khớp với từng ký tự

Đoạn mã sau hoạt động

function myCallback(event) {   console.log(event); } button.addEventListener(‘click’, myCallback);0

Những ví dụ này không hoạt động

function myCallback(event) {   console.log(event); } button.addEventListener(‘click’, myCallback);1

Khám phá và gỡ lỗi trình lắng nghe sự kiện

Tất cả các trình duyệt chính đều có cách để khám phá trình xử lý sự kiện trong devtools. Vì API Web phụ thuộc vào cách triển khai của trình duyệt nên nó có thể khác nhau đối với mỗi trình duyệt. Hình ảnh sau đây trông giống như trong Chrome

Chrome tổ chức theo loại sự kiện. Chúng ta có thể thấy rằng có hai trình nghe nhấp chuột và một trình nghe phím tắt hiện đang hiển thị

Với Safari, bạn cần xem thêm phần Node

Firefox đặt một huy hiệu sự kiện nhỏ trong trình kiểm tra, huy hiệu này sẽ hiển thị cho bạn tất cả các trình xử lý sự kiện trên một nút đó

Phần kết luận

Phản ứng với các sự kiện của trình duyệt trong JavaScript là một trong những cách cơ bản để bắt đầu xây dựng các trang web tương tác nhiều hơn và các ứng dụng web phong phú. Bài viết này là phần mở đầu về các nguyên tắc cơ bản sẽ giúp bạn bớt đau đầu trong quá trình thực hiện. Dưới đây là một số tài nguyên bổ sung

Làm cách nào để tìm sự kiện nào được kích hoạt trong JavaScript?

Các sự kiện được kích hoạt JavaScript như thế nào?

Sự kiện nào được kích hoạt khi người dùng rời khỏi bất kỳ đối tượng nào?

Sự kiện nào được kích hoạt khi người dùng nhấp vào một thành phần trong trang web?