Làm cách nào để có được tất cả các trình xử lý sự kiện JavaScript?

Đây là bài #67 của sê-ri, chuyên khám phá JavaScript và các thành phần xây dựng của nó. Trong quá trình xác định và mô tả các yếu tố cốt lõi, chúng tôi cũng chia sẻ một số quy tắc chung mà chúng tôi sử dụng khi xây dựng SessionStack, một ứng dụng JavaScript cần mạnh mẽ và có hiệu suất cao để giúp các công ty tối ưu hóa trải nghiệm kỹ thuật số của người dùng của họ

Sự kiện là các tín hiệu hoặc hành động được kích hoạt hoặc phát ra bởi các hệ thống mà chúng tôi tương tác theo chương trình. Và những tín hiệu này được chọn và xử lý bởi trình xử lý sự kiện - các phần mã lắng nghe và phản hồi các sự kiện

Các sự kiện được phát ra để thông báo cho các chương trình của chúng tôi về những thay đổi có thể ảnh hưởng đến việc thực thi. Và những thay đổi này có thể là do tương tác của người dùng như di chuyển chuột, nhấp vào nút, v.v.

Trong JavaScript, một sự kiện phát ra được đại diện bởi một đối tượng sự kiện chứa các phương thức và thuộc tính hoặc thông tin về sự kiện. Và đối tượng sự kiện này được truyền dưới dạng đối số cho bất kỳ người nghe sự kiện nào đang nghe sự kiện

Một số thuộc tính và phương thức của đối tượng sự kiện là

• isTrusted
• bubbles
• cancelBubble
• currentTarget
• defaultPrevented
• srcElement
• target
• timeStamp
• ________số 8
• stopPropagation
• bubbles0
• bubbles1
• bubbles2

Có nhiều loại sự kiện khác nhau trong JavaScript và một sự kiện có thể bắt nguồn từ tương tác của người dùng hoặc theo chương trình từ mã của chúng tôi

Thuật ngữ giao diện sự kiện đề cập đến các sự kiện xảy ra trong DOM và các sự kiện này có tên kết thúc bằng Sự kiện. Ví dụ về những sự kiện này là

• Hoạt hìnhSự kiện
• đóng sự kiện
• Sự kiện tùy chỉnh
• Thiết BịChuyển ĐộngSự Kiện
• DeviceOrientationSự kiện
• kéo sự kiện
• Tiêu điểmSự kiện
• Biểu mẫuDữ liệuSự kiện
• Sự kiện đầu vào
• bàn phímsự kiện
• Tin nhắnSự kiện
• ChuộtSự kiện
• Tiến trìnhSự kiện
• gửi sự kiện
• TouchEvent

Trong JavaScript, các sự kiện DOM được tạo theo chương trình được gọi là các sự kiện tổng hợp

Và trong phần này, chúng ta sẽ tìm hiểu cách tạo và xử lý sự kiện theo lập trình

Cách tạo Sự kiện

Các sự kiện được tạo bằng cách gọi hàm tạo bubbles3 như bên dưới

Đoạn mã trên tạo một sự kiện bubbles4 và trả về một đối tượng sự kiện — với bubbles5. Nhưng đối tượng sự kiện bubbles4 này không tự làm bất cứ điều gì. Chúng ta cần thêm một số mã lắng nghe sự phát ra của sự kiện này và phản hồi nó

Cách xử lý sự kiện

Trong JavaScript, chúng tôi lắng nghe các sự kiện với Trình xử lý sự kiện hoặc Trình xử lý sự kiện

Vì vậy, để thêm một người nghe vào sự kiện bubbles4 ở trên, chúng tôi sẽ sử dụng phương pháp bubbles8 như bên dưới

Trong đoạn mã trên, chúng tôi đã gọi phương thức bubbles8 trên cancelBubble0. cancelBubble0 ở đây đề cập đến một đối tượng e. g Tài liệu hoặc đối tượng cửa sổ, cũng như bất kỳ phần tử cha hoặc phần tử con nào có thể nhận các sự kiện và có trình lắng nghe cho chúng

Chúng ta sẽ tìm hiểu thêm về điều này sau. Vì vậy, đoạn mã trên lắng nghe sự phát ra của một sự kiện bubbles4 trên cancelBubble0

Tuy nhiên, chúng tôi vẫn cần thông báo cho tất cả người nghe khi sự kiện này được kích hoạt. Và để làm điều này, chúng tôi sử dụng cancelBubble4 như bên dưới

cancelBubble5

Phương thức cancelBubble4 lấy đối tượng sự kiện làm đối số và gửi nó đi. Và một khi sự kiện này được phát ra, cancelBubble4 sẽ gọi đồng bộ tất cả các trình nghe liên quan, do đó kích hoạt phản hồi

Mã cuối cùng của chúng tôi sẽ trông như thế này

Để giải thích về điều này, chúng tôi sẽ sử dụng các phần tử thực như cancelBubble0 như được thấy bên dưới

Đoạn mã trên tương tự như ví dụ trước của chúng tôi. Nhưng ở đây, chúng tôi đã sử dụng phương pháp cancelBubble9 để lấy tham chiếu đến cancelBubble0 — phần tử DOM có currentTarget1. Và chúng tôi đã lưu trữ tham chiếu này trên biến currentTarget2 được sử dụng trong toàn bộ mã. Kết quả giống như ví dụ trước, với một bổ sung nhỏ được giới thiệu với dòng

currentTarget3

Và điều này in currentTarget4 trên trình duyệt sau khi sự kiện xảy ra. Bạn có thể thấy điều này trong hành động ở đây

Lưu ý rằng các thuật ngữ trình xử lý sự kiện và trình xử lý sự kiện được sử dụng một cách lỏng lẻo để chỉ cùng một thứ. Nhưng theo nghĩa chặt chẽ, người nghe sự kiện đề cập đến mã được sử dụng để thêm người nghe vào mục tiêu sự kiện

currentTarget5

Trong khi một trình xử lý sự kiện đề cập đến chức năng xử lý được gọi khi người nghe được thông báo về một sự kiện được phát ra. Sau đó, một số trình xử lý sự kiện có thể sử dụng cùng một trình xử lý như bên dưới

Trong đoạn mã trên, chúng tôi đã tạo một trình xử lý sự kiện - currentTarget6 và sử dụng nó trong tất cả các trình xử lý sự kiện. Ngoài ra, chúng tôi đã sử dụng hàm tạo currentTarget7 cho phép chúng tôi tạo các sự kiện với thông tin bổ sung. Và những mẩu thông tin bổ sung này được ghi vào bảng điều khiển

Bạn có thể thấy điều này trong hành động ở đây

Ngoài việc thêm trình xử lý sự kiện vào các mục tiêu sự kiện, chúng tôi cũng có thể xóa trình xử lý sự kiện theo chương trình bằng cách sử dụng phương pháp currentTarget8 như bên dưới

Cho đến nay, chúng ta đã học về cách thêm trình xử lý sự kiện vào một phần tử. Nhưng điều gì sẽ xảy ra nếu chúng ta muốn lắng nghe các sự kiện phát ra từ nhiều phần tử con? . Và trình xử lý sự kiện này sẽ lắng nghe và phân tích các sự kiện nổi bong bóng trên từng phần tử con

Ủy quyền sự kiện sử dụng bong bóng sự kiện, vì vậy trước khi tìm hiểu cách triển khai ủy quyền sự kiện, hãy cùng tìm hiểu về bong bóng sự kiện

Sự kiện sủi bọt và chụp

Bong bóng sự kiện, mục tiêu và nắm bắt là 3 giai đoạn của luồng sự kiện trong trình duyệt. Chúng mô tả cách trình duyệt xử lý các sự kiện được kích hoạt từ các phần tử lồng nhau

Trong giai đoạn bong bóng, một sự kiện được kích hoạt trên một phần tử con sẽ làm bong bóng cây DOM. Và sự kiện này có thể được nắm bắt và xử lý bởi bất kỳ người nghe sự kiện nào trên phần tử tổ tiên của nó - các phần tử bên ngoài

Một sự kiện chỉ bong bóng nếu thuộc tính boolean của currentTarget9 là defaultPrevented0

Trong giai đoạn bong bóng, trình duyệt bắt đầu tìm kiếm người nghe từ cha mẹ trực tiếp của phần tử con mà sự kiện được kích hoạt. Trình duyệt sau đó tiếp tục tìm kiếm trên cây DOM

Hãy xem xét mã dưới đây

Đoạn mã trên thể hiện sự kiện bong bóng. Và chúng tôi thấy rằng khi nhấp vào nút, sự kiện sẽ xuất hiện DOM. Do đó, các trình lắng nghe sự kiện của tất cả các phần tử tổ tiên của nó được thông báo về sự kiện defaultPrevented1 và họ ghi lại phản hồi của mình vào bảng điều khiển

Bạn có thể thấy điều này trong hành động ở đây

Giai đoạn bắt giữ là đảo ngược của giai đoạn bong bóng. Trong giai đoạn nắm bắt, trình duyệt bắt đầu tìm kiếm các trình lắng nghe từ phần tử tổ tiên ngoài cùng - phần tử defaultPrevented2 và tìm kiếm trên cây DOM cho đến khi nó đến được phần tử cha trực tiếp của phần tử con đã phát ra sự kiện

Cuối cùng, trong giai đoạn mục tiêu, trình duyệt sẽ kiểm tra xem mục tiêu sự kiện có trình xử lý sự kiện cho sự kiện đã kích hoạt hay không. Và sau đó, nó truyền sự kiện đến phần tử cha ngay lập tức và tiếp tục truyền nó lên cây DOM cho đến khi nó đến phần tử tổ tiên ngoài cùng của nó. Lưu ý rằng trình duyệt sẽ chỉ lan truyền một sự kiện lên cây DOM nếu thuộc tính bubbles của sự kiện được phát ra là defaultPrevented0

Chúng tôi có thể xác định giai đoạn nào của luồng sự kiện hiện đang được thực thi theo chương trình từ thuộc tính defaultPrevented5

Theo mặc định, các sự kiện JavaScript trải qua các giai đoạn chụp và nhắm mục tiêu. Nhưng một sự kiện chỉ bước vào giai đoạn sủi bọt nếu thuộc tính bubbles là đúng. Ngoài ra, theo mặc định, tất cả các trình lắng nghe sự kiện đều được đăng ký trong giai đoạn sủi bọt. Và nếu bạn muốn đăng ký một sự kiện cho giai đoạn chụp, bạn có thể đặt thuộc tính thứ ba tùy chọn của phương thức bubbles8 thành defaultPrevented0

Dừng tuyên truyền

Bong bóng sự kiện có thể không phải là hiệu ứng mong muốn trong một số trường hợp. Và trong những trường hợp như vậy, chúng ta có thể ngăn sự kiện lan truyền bằng cách gọi phương thức stopPropagation trên đối tượng sự kiện. Vì vậy, bằng cách gọi phương thức stopPropagation trong ví dụ trước của chúng ta, chúng ta có thể ngăn sự kiện hiện tại xuất hiện trên cây DOM. Để thực hiện việc này, hãy sửa đổi đoạn mã JavaScript trong ví dụ trên, như bên dưới

Phương thức stopPropagation không ngăn bất kỳ hành vi mặc định nào như tải lại biểu mẫu sau khi biểu mẫu được gửi và việc nhấp vào liên kết sẽ vẫn hoạt động. Nhưng để ngăn chặn các hành vi mặc định, phương pháp srcElement2

Ngoài ra, nếu nhiều người nghe sự kiện đang lắng nghe sự kiện đó, việc gọi phương thức stopPropagation sẽ không ngăn sự kiện lan truyền đến những người nghe đó. Nhưng để làm điều này, bạn có thể sử dụng phương pháp srcElement4

Bây giờ với sự hiểu biết của chúng tôi về bong bóng sự kiện, chúng tôi có thể tìm hiểu cách triển khai ủy quyền sự kiện

Như đã đề cập ở trên, ủy quyền sự kiện cho phép chúng tôi sử dụng bong bóng sự kiện một cách hữu ích. Để thấy điều này hoạt động, hãy xem xét một trang web có HTML sau

Trong đoạn mã trên, phần tử srcElement5 có năm phần tử con. Và mỗi phần tử con có một thuộc tính tên được thêm vào bằng cách sử dụng thuộc tính toàn cầu data-* HTML 5. Nhiệm vụ của chúng ta là ghi thuộc tính srcElement6 trên một phần tử con vào bảng điều khiển khi phần tử con đó được nhấp vào

Vì vậy, thay vì thêm một trình lắng nghe sự kiện vào mỗi phần tử con, chúng ta có thể tận dụng sự ủy quyền sự kiện và dựa vào sự kiện bong bóng để truyền sự kiện lên cây DOM. Và bằng cách này, chúng ta chỉ cần thêm một người nghe vào phần tử ngoài cùng trong cây DOM, như bên dưới

Trong đoạn mã trên, chúng tôi đã thêm trình xử lý sự kiện vào tài liệu, vì vậy mọi sự kiện được phát ra từ bất kỳ phần tử nào trong cây DOM sẽ được trình xử lý của chúng tôi nắm bắt và xử lý

Do đó, đoạn mã trên in thuộc tính srcElement6 của phần tử con được nhấp vào bảng điều khiển. Và bạn có thể thấy điều này trong hành động ở đây

Chúng ta có thể thấy từ việc triển khai ủy quyền sự kiện rằng ủy quyền sự kiện mang lại cho chúng ta một cách rõ ràng và hiệu quả để xử lý các sự kiện bắt nguồn từ các phần tử lồng nhau

Trong bài viết này, chúng ta đã tìm hiểu về các sự kiện trong JavaScript cũng như cách tạo và xử lý chúng

Chúng tôi cũng đã học về ủy quyền sự kiện — một mô hình cho phép chúng tôi sử dụng sự kiện bong bóng hoặc lan truyền sự kiện một cách hữu ích

Và trong trường hợp không cần lan truyền sự kiện, chúng tôi đã học cách ngăn sự kiện lan truyền

Ngày nay, các sự kiện JavaScript rất quan trọng đối với chúng tôi vì chúng đặt nền tảng cho các mẫu hữu ích như mẫu người quan sát và mẫu đăng ký xuất bản

SessionStack sử dụng pub/dịch vụ phụ để xử lý tất cả dữ liệu hành vi đã nhập từ trình duyệt trong thời gian thực. Khi dữ liệu đang được nhập vào, SessionStack cho phép bạn xem các phiên của người dùng dưới dạng video, cho phép bạn xem chính xác điều gì đã xảy ra trong hành trình của họ

Kết hợp thông tin trực quan này với tất cả dữ liệu kỹ thuật từ trình duyệt như lỗi, dấu vết ngăn xếp, sự cố mạng, dữ liệu gỡ lỗi, v.v. bạn có thể dễ dàng hiểu các khu vực có vấn đề trong sản phẩm của mình và giải quyết chúng một cách hiệu quả

Cách lấy danh sách người nghe sự kiện trong JavaScript?

Làm cách nào để lắng nghe các sự kiện trong JavaScript?

Làm cách nào để tìm các sự kiện được liên kết với một phần tử bằng JavaScript?

Trình xử lý sự kiện được lưu trữ JavaScript ở đâu?