Khi tôi đang viết một số JS cơ bản để thực hiện thao tác DOM và lắng nghe sự kiện, tôi đã gặp phải một lỗi khiến tôi bối rối. Tôi đã dành thời gian nghiền ngẫm Stack Overflow, tìm kiếm giải pháp vô ích. Để sao chép lỗi, tôi sẽ trình bày một phiên bản đơn giản hóa mã của mình
Để bắt đầu, tôi có một tệp HTML cơ bản với một div duy nhất trong phần thân
Trong tệp JavaScript, tôi đã thêm một số nút vào DOM và tạo một trình xử lý sự kiện trên một nút
Trong trình duyệt, trang của tôi xuất hiện như mong đợi. Có một hình ảnh, theo sau là một nút và một số văn bản bổ sung mà tôi đã thêm vào DOM
Khi chúng tôi nhấp vào nút 'Nhấp vào tôi', tiêu điểm sẽ bị mất khỏi hộp văn bản, điều đó có nghĩa là sự kiện thay đổi sẽ có hiệu lực. Ngoài ra, chúng ta có thể thấy rằng khi chúng ta cung cấp đầu vào, sự kiện thay đổi sẽ không hoạt động. Sau khi nhấp vào nút, văn bản được hiển thị trong nhãn
ví dụ 2
Sử dụng thuộc tính onChange
đầu ra
Trong đoạn mã trên, khi chúng tôi nhập một số văn bản vào hộp văn bản, tiêu điểm sự kiện onChange bị tắt nhưng ngay sau khi chúng tôi nhấp vào một nơi nào đó trên màn hình, thuộc tính onChange sẽ hoạt động
Sử dụng sự kiện thay đổi trên các nút hộp radio
Trong trường hợp các nút hộp radio, sự kiện thay đổi có vai trò sau khi chúng tôi chọn bất kỳ nút radio nào. Chúng ta sẽ thấy trong đoạn mã dưới đây
Đầu ra của ở trên được hiển thị dưới đây
Khi chúng tôi nhấp vào bất kỳ nút radio nào, thông báo đã chỉ định sẽ được hiển thị, điều đó có nghĩa là khi nhấp vào nút radio, tiêu điểm sẽ bị mất khỏi nút đó
Sử dụng sự kiện thay đổi trên phần tử được chọn
Trong trường hợp phần tử được chọn, sự kiện thay đổi hoạt động khi việc chọn một giá trị cụ thể hoàn tất. Dưới đây, chúng tôi đã thảo luận về một ví dụ mà qua đó chúng tôi có thể hiểu hoạt động của phần tử được chọn trên một giá trị
Ví dụ
đầu ra
Trong đầu ra ở trên, chúng ta có thể thấy rằng khi chúng ta chọn giá trị từ danh sách, tên sẽ được hiển thị bên cạnh nó. Đó là bởi vì khi chúng ta chọn một giá trị, tôi. e. , khi chọn xong thì sự kiện thay đổi phát huy tác dụng. Tuy nhiên, trong khi chúng tôi đang thực hiện lựa chọn, sự kiện thay đổi không hoạt động