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 Show
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 nói raThay phiên nhau nói chuyện với đối tác của bạn thông qua mã được tìm thấy ở đây. Thực hành sử dụng từ vựng kỹ thuật. Không sao để lộn xộn. Điều này cần thực hành. Nếu bạn cần trợ giúp, hãy xem bên dưới Cần trợ giúp nói chuyện thông qua mã?
Khám pháMở một trang web mà bạn thường truy cập. Có thể đó là một trang truyền thông xã hội, có thể đó là trang web của ngân hàng của bạn, có thể đó là một trang tin tức. Dành vài phút và liệt kê tất cả những người nghe sự kiện mà bạn nghĩ có thể có trên trang đó. Họ làm gì? Thay đổi kiểu khi nhấp vào nútGiố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 Thử thách theo cặpBây giờ chúng tôi đang ghép một vài mảnh lại với nhau, vì vậy điều này có vẻ khó khăn hơn một chút. Sẽ hữu ích nếu bạn viết mã giả hoặc viết các ghi chú mà con người có thể đọc được để cung cấp cho bạn lộ trình cho mã mà bạn sẽ viết sau này. Bạn sẽ xây dựng từ Codepen này để tạo một Trong quyển vở của bạn
Bây giờ, hãy triển khai ý tưởng của bạn bằng mã Thêm thời gian? Nếu bạn có thêm thời gian, hãy suy nghĩ và viết mã giả những gì bạn cần làm để xây dựng trái tim CodePen đầy đủ
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ùngChúng ta có thể sử dụng thuộc tính Khám pháThực hiện theo các bước bên dưới để khám phá cách thức hoạt động của
Khi được gọi, thuộc tính Một trong những quan niệm sai lầm/sai lầm hàng đầu mà chúng tôi thấy học sinh mắc phải khi ở Mod 1 là cố gắng nắm bắt giá trị của đầu vào trong khi đầu vào trống. Nếu bạn muốn lấy đầu vào của người dùng, chúng ta phải lấy giá trị bên trong một trình xử lý sự kiện nào đó - trên một sự kiện xảy ra sau khi người dùng nhập vào trường đầu vào 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ọ Giới thiệuSự 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à
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à
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ệnCác sự kiện được tạo bằng cách gọi hàm tạo Đoạn mã trên tạo một sự kiện Cách xử lý sự kiệnTrong 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 Trong đoạn mã trên, chúng tôi đã gọi phương thức 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 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
Phương thức 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ư Đ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
Và điều này in 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
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 - 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 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ụpBong 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 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 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ử 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 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 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 Dừng tuyên truyềnBong 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 Phương thức 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 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ử 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 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 Sự kết luậnTrong 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ác loại sự kiện JavaScript . Sự kiện giao diện người dùng. Những điều này xảy ra do bất kỳ tương tác nào với cửa sổ trình duyệt chứ không phải trang HTML. . Tập trung và làm mờ các sự kiện. . sự kiện chuột. . sự kiện bàn phím. . Sự kiện biểu mẫu. . Sự kiện đột biến và người quan sát. . sự kiện HTML5. . sự kiện CSS Có bao nhiêu loại sự kiện trong JavaScript?Danh sách còn dài hơn nhiều. Sự kiện HTML DOM tham khảo W3Schools JavaScript.
. Sự kiện HTML phổ biến Các sự kiện trong JavaScript và các loại của nó là gì?Tương tác của JavaScript với HTML được xử lý thông qua các sự kiện xảy ra khi người dùng hoặc trình duyệt thao tác trên trang. Khi trang tải, nó được gọi là một sự kiện. Khi người dùng nhấp vào một nút, lần nhấp đó cũng là một sự kiện. Các ví dụ khác bao gồm các sự kiện như nhấn phím bất kỳ, đóng cửa sổ, thay đổi kích thước cửa sổ, v.v.
Onclick hay addEventListener cái nào tốt hơn?Cả hai đều có thể được sử dụng để xử lý các sự kiện. Tuy nhiên, addEventListener nên là lựa chọn ưu tiên vì nó có thể làm mọi thứ onclick làm và hơn thế nữa. Không sử dụng onclick nội tuyến làm thuộc tính HTML vì điều này trộn lẫn javascript và HTML, đây là một cách làm không tốt. |