Các loại trình xử lý sự kiện JavaScript

Thay đổi nội dung trên trang bằng JavaScript là điều tuyệt vời, nhưng bạn cũng có thể viết nó vào phần đánh dấu để bắt đầu. Sức mạnh thực sự của JavaScript phát huy tác dụng khi chúng ta viết mã đáp ứng với đầu vào của người dùng

Sức mạnh này xuất hiện khi chúng tôi bắt đầu lắng nghe các sự kiện của người dùng. Đây là mấu chốt của kỹ thuật front-end. Chúng tôi trình bày giao diện người dùng và sau đó khi người dùng tương tác với giao diện người dùng, chúng tôi sẽ thay đổi và cập nhật những gì họ nhìn thấy

Hãy xem lại codepen từ Khởi động và thêm Trình xử lý sự kiện

Thay đổi kiểu khi nhấp vào nút

Giống như chúng tôi đã đề cập trước đó, việc người dùng nhận được phản hồi hữu ích từ một ứng dụng sau khi họ thực hiện một số hành động là điều khá phổ biến.

Lấy ví dụ biểu tượng “trái tim” trên CodePen. CodePen có 4 cấp độ “yêu” - 0, 1, 2 và 3. Mỗi lần nhấp vào một trái tim, người dùng sẽ tăng lượt yêu thích của họ lên một. [Cho đến khi nhấp chuột khi nó có màu đỏ và ở mức 3 - tại thời điểm đó, nó trở về 0]. Mặc dù “sự cân bằng tình yêu” hơi khó hiểu nhưng đây vẫn là một ví dụ tuyệt vời về sự thay đổi phong cách dựa trên tương tác của người dùng

Ghi chú. Chúng ta sẽ thực hành nhiều hơn với khái niệm sau trong Phần 2 của Giới thiệu về DOM

Bây giờ, hãy tập hợp với một nhóm khác và thảo luận về cách tiếp cận của bạn. Đây không phải là lúc để chia sẻ “giải pháp” hay “câu trả lời”, mà thay vào đó là để nói về cách bạn đã giải quyết vấn đề. Bạn đã mã giả?

Nhận đầu vào của người dùng

Chúng ta có thể sử dụng thuộc tính .value có sẵn trên phần tử DOM Event Listener0 để lấy giá trị mà người dùng đã nhập vào đó

Khi được gọi, thuộc tính .value trên phần tử đầu vào sẽ trả về giá trị hiện tại

Dưới đây là ví dụ về một ứng dụng nhỏ nhận đầu vào của người dùng, sau đó thay đổi màu của hộp dựa trên đầu vào đó

Đâ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à

• .change-text2
• .change-text3
• .change-text4
• .change-text5
• .change-text6
• .change-text7
• .change-text8
• .change-text9
• addEventListener[]0
• addEventListener[]1
• .change-text30
• .change-text31
• .change-text32

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 .change-text33 như bên dưới

Đoạn mã trên tạo một sự kiện .change-text34 và trả về một đối tượng sự kiện — với .change-text35. Nhưng đối tượng sự kiện .change-text34 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 .change-text34 ở trên, chúng tôi sẽ sử dụng phương pháp .change-text38 như bên dưới

Trong đoạn mã trên, chúng tôi đã gọi phương thức .change-text38 trên .change-text40. .change-text40 ở đâ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 .change-text34 trên .change-text40

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 .change-text44 như bên dưới

.change-text45

Phương thức .change-text44 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, .change-text44 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ư .change-text40 như 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 thức .change-text49 để lấy tham chiếu đến .change-text40 — phần tử DOM có .change-text51. Và chúng tôi đã lưu trữ tham chiếu này trên biến .change-text52 đượ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

.change-text53

Và điều này in .change-text54 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

.change-text55

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 - .change-text56 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 .change-text57 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 thức .change-text58 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 .change-text59 là .change-text60

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 .change-text61 và họ ghi lại các 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ử .change-text62 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 .change-text3 của sự kiện được phát ra là .change-text60

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 .change-text65

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 .change-text3 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 .change-text38 thành .change-text60

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 addEventListener[]1 trên đối tượng sự kiện. Vì vậy, bằng cách gọi phương thức addEventListener[]1 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 addEventListener[]1 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 .change-text72

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 addEventListener[]1 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 .change-text74

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ử .change-text75 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 .change-text76 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 xử lý sự kiện vào từng 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, do đó, bất kỳ sự kiện nào đượ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 .change-text76 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ả

8 loại sự kiện JavaScript là gì?

Có bao nhiêu loại sự kiện trong JavaScript?

Các sự kiện trong JavaScript và các loại của nó là gì?

Onclick hay addEventListener cái nào tốt hơn?