Trình xử lý sự kiện so với trình xử lý sự kiện javascript
Cho đến nay, chúng tôi đã làm việc với các thuộc tính xử lý sự kiện để xử lý các sự kiện trong mã của chúng tôi. Các thuộc tính này đại diện cho các sự kiện cho đối tượng mà nó thuộc về (một phần tử HTML, đối tượng 6 hoặc 0). Một sự kiện chỉ là một tín hiệu cho thấy điều gì đó đã xảy ra trong trình duyệt. Để sử dụng một thuộc tính xử lý sự kiện, chúng ta đặt giá trị của nó cho một hàm và mỗi khi sự kiện tương ứng xảy ra, hàm đó sẽ được gọi và tất cả mã bên trong hàm sẽ chạy. Bằng cách này, chúng tôi sử dụng các thuộc tính của trình xử lý sự kiện để viết mã phản ứng với các sự kiện xảy ra trong trang web của chúng tôi Show
Trong bài học này, chúng ta sẽ học một phương pháp xử lý sự kiện mới. chúng tôi sẽ tạo trình xử lý sự kiện trong mã của mình để lắng nghe và phản ứng với các sự kiện xảy ra trong trang web của chúng tôi. Quá trình này được gọi là lắng nghe sự kiện và nó thực hiện mọi thứ mà các thuộc tính trình xử lý sự kiện của chúng ta thực hiện, nhưng nó có một lợi thế khiến việc lắng nghe sự kiện trở thành phương pháp xử lý sự kiện ưa thích Lưu ý rằng xử lý sự kiện thực sự là một thuật ngữ chung mô tả các quy trình và công cụ mà nhà phát triển sử dụng để viết mã đáp ứng các sự kiện. Trong phát triển web, xử lý sự kiện bao gồm các thuộc tính của trình xử lý sự kiện, khái niệm lắng nghe sự kiện với trình xử lý sự kiện và hình thức xử lý sự kiện đã lỗi thời với các thuộc tính trình xử lý sự kiện HTML Hãy đi sâu vào khái niệm mới về lắng nghe sự kiện Vậy làm cách nào để tạo một trình lắng nghe sự kiện? . Hãy xem một ví dụ sử dụng dự án Mad Libs. Trước đây chúng tôi đã sử dụng thuộc tính trình xử lý sự kiện 1 để phản ứng với sự kiện gửi trên biểu mẫu của chúng tôi. Đây là đoạn mã chúng tôi sẽ làm việc với
Xin lưu ý rằng chúng tôi đã bỏ sót một số mã, mã lấy giá trị đầu vào của biểu mẫu và đặt giá trị cho câu chuyện Mad Libs của chúng tôi. Bất cứ khi nào chúng tôi bỏ mã, chúng tôi sẽ sử dụng dấu chấm lửng 2 ở vị trí của nó. Chúng tôi chỉ muốn tập trung vào thuộc tính trình xử lý sự kiện cho sự kiện gửi biểu mẫu và tìm hiểu cách sử dụng trình xử lý sự kiện thay thế. Kiểm tra mã được cập nhật của chúng tôi bên dưới — thay đổi lớn nhất khi sử dụng trình xử lý sự kiện là sử dụng phương thức tích hợp sẵn thay vì thuộc tính
Hãy chia nhỏ mã mới này
Chúng tôi sử dụng cùng một phương thức 3 cho bất kỳ trình lắng nghe sự kiện nào mà chúng tôi muốn thiết lập. Thay đổi sự kiện mà chúng tôi đang nhắm mục tiêu là vấn đề thay đổi đối số đầu tiên mà chúng tôi chuyển vào phương thức 26. Hãy xem một ví dụ khác. Lần này, chúng tôi sẽ cập nhật thuộc tính trình xử lý sự kiện 27 của mình để sử dụng trình xử lý sự kiện thay thế 2Giống như trong ví dụ ban đầu của chúng tôi, chúng tôi đã gọi phương thức 3 của mình trên đối tượng 0, chuyển vào chuỗi 30 làm đối số đầu tiên để nhắm mục tiêu sự kiện tải và một biểu thức hàm ẩn danh làm đối số thứ hai làm trình xử lý sự kiện. Cuối cùng, chúng tôi đã đảm bảo đóng lệnh gọi phương thức 3 của mình sau khi kết thúc biểu thức hàm đóng bằng chuỗi dấu ngoặc đóng, dấu ngoặc đơn và dấu chấm phẩy 8Vì chúng tôi đã thực hành tốt với các thuộc tính trình xử lý sự kiện, biểu thức hàm và sử dụng các phương thức đối tượng, nên việc chuyển sang sử dụng trình xử lý sự kiện sẽ giúp chúng tôi thoải mái hơn. Mọi thứ chúng tôi đã học về nhắm mục tiêu các đối tượng cụ thể (như 0, 6 hoặc đối tượng phần tử HTML) để đính kèm trình xử lý sự kiện vẫn không thay đổi với trình xử lý sự kiện. Điều tương tự cũng xảy ra với các loại sự kiện mà chúng ta có thể nhắm mục tiêuNgoài ra, tất cả các thuộc tính "một sự kiện" có thể được dịch dễ dàng sang cú pháp mà chúng tôi sử dụng để nhắm mục tiêu các sự kiện với trình xử lý sự kiện. chỉ cần xóa "bật" khỏi thuộc tính sự kiện và biến nó thành một chuỗi. Hãy xem thêm một số ví dụ
Bây giờ chúng ta hãy chuyển sang những lợi thế của việc sử dụng trình lắng nghe sự kiện. Sau đó, chúng tôi sẽ xem xét thêm thông tin về chức năng gọi lại Lợi ích của việc sử dụng Trình lắng nghe sự kiệnSự khác biệt chính giữa thuộc tính trình xử lý sự kiện và trình xử lý sự kiện là có thể thêm (hoặc xóa) nhiều trình xử lý sự kiện khi chúng ta học trong một bài học khác bằng cách sử dụng trình xử lý sự kiện. Điều này có nghĩa là đối với một sự kiện trên cùng một đối tượng (thường là một phần tử HTML), chúng ta có thể đăng ký nhiều trình xử lý sự kiện Hãy xem một ví dụ. Trong ví dụ này, chúng tôi sẽ mở rộng trang web Mad Libs của mình bằng cách thêm chức năng mới vào trang web. Giả sử chúng tôi không chỉ muốn trình xử lý sự kiện gửi của mình nhận các giá trị biểu mẫu cho câu chuyện Mad Libs mà còn hiển thị một nút mới đặt lại biểu mẫu và kích hoạt cảnh báo bằng quảng cáo (yuck. ). Bây giờ chúng tôi có 3 phản ứng khác nhau đối với sự kiện gửi mà chúng tôi cần xử lý trong mã của mình. Hãy xem cách chúng tôi sẽ làm điều này với người nghe sự kiện Trước tiên, chúng ta cần thêm một nút mới vào HTML của mình. Chúng tôi sẽ thêm nó ngay bên dưới thẻ đóng 3Chúng tôi cũng đã bao gồm thẻ 21 trước nút mới để tạo ngắt dòngLưu ý rằng thuộc tính 22 trên nút được đặt thành 23. Giá trị thuộc tính này làm cho nút không có hành vi mặc định và không làm gì khi được nhấn. Chúng tôi có thể nhắm mục tiêu một sự kiện nhấp chuột trên một nút bằng 24, nhưng không phải là một sự kiện gửi biểu mẫu, vì vậy chúng tôi không thể sử dụng 24 trong một thành phần nút trong biểu mẫu HTMLĐiều này trái ngược với cài đặt 26 trên phần tử nút, có nghĩa là được sử dụng trong phần tử biểu mẫu và phản hồi cụ thể đối với sự kiện gửi và có hành vi làm mới trang mặc địnhTiếp theo, hãy xem JS. Hãy chú ý đến các nhận xét được thêm vào đoạn mã bên dưới để mô tả mã mới được thêm vào 2Như chúng ta có thể thấy trong đoạn mã, chúng ta đã thêm 3 trình xử lý sự kiện riêng biệt vào sự kiện gửi biểu mẫu. Lý do tại sao việc sử dụng thuộc tính trình xử lý sự kiện 1 sẽ không thành công trong trường hợp này là do thuộc tính chỉ có thể được đặt thành một giá trị và bất cứ khi nào chúng tôi đặt lại giá trị, nó sẽ ghi đè lên giá trị trước đóVì vậy, nếu chúng tôi đã cập nhật cùng mã ở trên để sử dụng thuộc tính trình xử lý sự kiện, thì chỉ thuộc tính trình xử lý sự kiện 1 cuối cùng mới được đăng ký. Hãy xem nó trông như thế nào. Hãy chú ý đến các nhận xét khi bạn đọc đoạn mã sau 3Trong đoạn mã trên, chúng ta có thể theo dõi rằng hai trình xử lý sự kiện 1 đầu tiên (để lấy giá trị biểu mẫu/đặt giá trị câu chuyện và hiển thị nút đặt lại) đều đã bị ghi đè bởi trình xử lý sự kiện 1 cuối cùng. Bây giờ khi chúng tôi gửi biểu mẫu, trang web của chúng tôi sẽ hiển thị quảng cáo, nhưng nó sẽ không hiển thị câu chuyện hoặc nút đặt lạiBạn có thể đang nghĩ, vậy thì sao. Chúng ta không thể kết hợp từng phản ứng đối với việc gửi biểu mẫu vào một chức năng xử lý sự kiện sao? 6Có, chúng tôi có thể làm điều này và chúng tôi có thể sử dụng chú thích mã để gắn nhãn các phản ứng khác nhau mà chúng tôi đang thực hiện đối với việc gửi biểu mẫu Chúng ta cũng có thể làm điều này bằng cách sử dụng phương thức 3, giống như đoạn mã sau minh họa. Lưu ý rằng dấu chấm lửng 2 đại diện cho mã không thay đổi được bỏ qua trong ví dụ 9Nếu chúng ta có thể làm điều này, nó đặt ra câu hỏi. tại sao chúng ta KHÔNG làm điều này? Khi chúng ta nói về tổ chức mã và lựa chọn giữa việc đưa mã vào một chức năng hoặc vào nhiều chức năng (hoặc trình xử lý sự kiện), chúng ta nên tự hỏi mình, "điều gì sẽ làm cho mã của tôi dễ đọc và dễ hiểu hơn?". Sẽ có một số khác biệt khi chúng ta trả lời câu hỏi này, nhưng một hướng dẫn tốt cho việc tổ chức mã là tách mã theo chức năng của nó trong ứng dụng của chúng ta Với chức năng mở rộng của trang web Mad Libs, chúng tôi hiện có 3 phản ứng đối với việc gửi biểu mẫu. nhận và đặt giá trị câu chuyện Mad Lib, hiển thị quảng cáo và hiển thị nút đặt lại. Theo như tổ chức mã của chúng tôi, chúng tôi có hai tùy chọn chính
Vậy đâu là sự lựa chọn chính xác? . Đó là sự thật Tuy nhiên, nếu sự kiện gửi của chúng ta kích hoạt 5 hoặc 10 phản ứng khác nhau, thì mã của chúng ta sẽ dễ hiểu hơn nếu chúng ta tách các phản ứng của mình thành nhiều trình xử lý sự kiện thay vì sử dụng một trình xử lý sự kiện rất lớn. Đây là một ví dụ về việc sử dụng nhiều trình xử lý sự kiện để cải thiện tổ chức mã và mức độ dễ đọc của nó Hoặc, điều gì sẽ xảy ra nếu chúng tôi muốn quảng cáo chỉ hiển thị một lần và không phải mỗi khi biểu mẫu được gửi - tốt, chúng tôi cần tách quảng cáo thành trình xử lý sự kiện của riêng mình mà chúng tôi có thể hủy sau khi chạy một lần. Nếu ban đầu chúng tôi đã chọn tách từng phản ứng thành trình xử lý sự kiện riêng, thì chúng tôi có thể dễ dàng cập nhật mã của mình để đáp ứng yêu cầu mới (chỉ hiển thị quảng cáo một lần). Đây là một ví dụ về việc sử dụng nhiều trình xử lý sự kiện để cải thiện mức độ mã của chúng tôi mở rộng khi yêu cầu thay đổi Bởi vì việc sử dụng trình xử lý sự kiện với phương pháp 3 cho phép chúng tôi đính kèm nhiều trình xử lý vào cùng một sự kiện, chúng được coi là lựa chọn tốt nhất cho các ứng dụng mở rộng quy mô (lớn hơn và thay đổi yêu cầu); . Vì vậy, về sau, bạn nên chọn sử dụng trình xử lý sự kiện thay vì các thuộc tính của trình xử lý sự kiệnBạn cũng nên tạm dừng định kỳ để tự hỏi mình "điều gì sẽ làm cho mã của tôi dễ đọc và dễ hiểu hơn?". Chúng tôi mới bắt đầu tìm hiểu về những cách mới để tổ chức mã của mình, vì vậy nếu bạn chưa cảm thấy thoải mái với quy trình ra quyết định này, điều đó hoàn toàn bình thường và được mong đợi. Ý tưởng là bắt đầu suy ngẫm về những câu hỏi này, nhưng không quá bận tâm đến việc tìm kiếm cách tổ chức mã hiệu quả nhất hoặc "hoàn hảo" nhất. Cần phải thực hành cũng như thực sự xây dựng các ứng dụng lớn hơn và phức tạp hơn để có được tổ chức mã tốt Ngoài ra, hãy lưu ý rằng mặc dù luôn có nhiều giải pháp khi nói đến tổ chức mã (và các lợi ích cũng như nhược điểm cần xem xét cho từng giải pháp), nhưng vẫn có những phương án dự phòng hữu ích để luôn kết hợp vào mã của bạn
Thông tin thêm về chức năng gọi lạiGọi lại hoặc chức năng gọi lại là một khái niệm trong lập trình máy tính mà nhiều ngôn ngữ thực hiện. Hàm gọi lại (hoặc chỉ "gọi lại") là bất kỳ hàm nào được truyền cho một hàm hoặc phương thức khác dưới dạng đối số. Tuy nhiên, chức năng gọi lại này không được gọi ngay lập tức. Hàm/phương thức nhận hàm gọi lại làm đối số sẽ gọi ("gọi lại") hàm sau đó Chúng ta có thể thấy quá trình này đang hoạt động trong phương thức 3. Hãy xem lại phương pháp này. 3 có hai tham số bắt buộc. Trong mã giả, điều này trông giống như 3
Mặc dù chúng ta đang chuyển một hàm gọi lại làm đối số thứ hai của phương thức 3, nhưng hàm này chỉ được gọi khi sự kiện tương ứng xảy ra. Không phải ngay lập tức, nhưng sau đó. Sự khác biệt về thời gian này rất quan trọng và là lý do chính khiến các cuộc gọi lại tồn tại, đó là để xử lý mã JavaScript không đồng bộ. Bây giờ chúng ta sẽ không đi sâu vào vấn đề đó, nhưng chúng ta sẽ xem xét lại tính không đồng bộ và gọi lại sau trong chương trình, vì vậy sẽ có nhiều cơ hội hơn để làm quen với khái niệm nàyNgoài ra, hãy lưu ý rằng việc phân loại hàm là "gọi lại" không liên quan đến loại hàm (khai báo, biểu thức hoặc cách khác — cách chúng ta xác định hàm). Thay vào đó, nó liên quan đến ứng dụng của một chức năng — nơi chúng tôi đang sử dụng nó trong mã của mình. Bất kỳ hàm nào được sử dụng làm đối số cho hàm khác sẽ tự động trở thành hàm gọi lại Bạn sẽ khó có thể tạo một hàm tùy chỉnh trong chương trình lấy một hàm làm đối số. Sẽ không có nhiều trường hợp sử dụng cho điều đó. Tuy nhiên, bạn sẽ làm việc với một số phương thức và hàm dựng sẵn (của JavaScript hoặc API Web) yêu cầu hàm cho đối số (gọi lại) Nếu điều này nghe có vẻ phức tạp và khó hiểu, thì điều đó hoàn toàn có thể xảy ra — đặc biệt nếu bạn là người mới viết mã. Có rất nhiều điều phức tạp đang diễn ra dưới mui xe. Học lái xe là một chuyện — và không quá khó. Nhưng học cách chế tạo và bảo dưỡng ô tô còn nhiều việc hơn thế. Chúng tôi sẽ thường xuyên xem lại thuật ngữ JavaScript và hoạt động bên trong của cả JS và trình duyệt web của chúng tôi, vì vậy sẽ có nhiều cơ hội hơn để xem xét và thực hành Tóm tắt và Mã hoàn chỉnh cho Dự án Mad LibsTrong bài học này chúng ta đã học về lắng nghe sự kiện. Một số chủ đề chính chúng tôi đề cập là
Để xem mã đã hoàn thành cho dự án Mad Libs của chúng tôi, hãy truy cập trang cheat. Mã này bao gồm chức năng mới của nút đặt lại và quảng cáo cũng như trình xử lý sự kiện riêng biệt cho từng phản ứng đối với sự kiện gửi biểu mẫu Trình xử lý sự kiện trong JavaScript là gì?Trình xử lý sự kiện là mã JavaScript gọi một đoạn mã cụ thể khi một hành động cụ thể xảy ra trên phần tử HTML . Trình xử lý sự kiện có thể gọi mã JavaScript trực tiếp hoặc một hàm.
Trình xử lý sự kiện khác với sự kiện như thế nào?Trong lập trình, trình xử lý sự kiện là một quy trình gọi lại hoạt động không đồng bộ sau khi một sự kiện diễn ra . Nó ra lệnh cho hành động theo sau sự kiện. Lập trình viên viết mã cho hành động này diễn ra. Một sự kiện là một hành động diễn ra khi người dùng tương tác với một chương trình.
addEventListener có phải là trình xử lý sự kiện không?Ví dụ. Phương thức addEventListener() gắn một trình xử lý sự kiện vào phần tử đã chỉ định . Phương thức addEventListener() gắn một trình xử lý sự kiện vào một phần tử mà không ghi đè lên các trình xử lý sự kiện hiện có. Bạn có thể thêm nhiều trình xử lý sự kiện vào một phần tử.
Lợi thế của việc triển khai trình xử lý sự kiện so với trình xử lý sự kiện là gì?Lợi ích của việc sử dụng trình lắng nghe sự kiện là chúng ta có thể tạo nhiều trình xử lý cho cùng một sự kiện trên cùng một mục tiêu (phần tử HTML, cửa sổ, . |