Bài viết này trình bày ngắn gọn Phương thức “click()” của Phần tử DOM là gì và cách sử dụng nó trong HTML?
Phần tử DOM Phương thức “click()” trong HTML là gì?
Khi phương thức click() được gọi trên một phần tử HTML, nó mô phỏng một người dùng nhấp vào phần tử đó bằng chuột, từ đó kích hoạt mọi trình xử lý sự kiện được đính kèm. Điều này cho phép các nhà phát triển thực hiện một số hành động tương tác như mở liên kết, gửi biểu mẫu hoặc chuyển đổi chế độ hiển thị của các phần tử mà không cần nhấp chuột vật lý. Điều này giúp tạo ra các trang web tương tác và đáp ứng.
Làm cách nào để sử dụng Phương thức “click ()” của Phần tử DOM trong HTML?
Để sử dụng phương thức click(), trước tiên người dùng cần lấy tham chiếu đến phần tử HTML để mô phỏng thao tác nhấp chuột. Điều này có thể được thực hiện bằng cách sử dụng bất kỳ phương pháp truyền tải hoặc truy vấn DOM tiêu chuẩn nào, chẳng hạn như “ getElementById ”, “ getElementsByClassName ”, “ bộ chọn truy vấn ', hoặc ' truy vấnSelectorAll ”.
Chúng ta hãy xem qua một ví dụ để giải thích rõ hơn về phương thức “click()”.
Ví dụ: Các phần tử hộp kiểm HTML và nút radio
Một ví dụ được xem xét trong đó “ nhấp chuột() ” được sử dụng với hộp kiểm HTML và các phần tử nút radio. Thực hiện theo mã dưới đây:
< hình thức >
< đầu vào
kiểu = 'hộp kiểm'
nhận dạng = 'hộp kiểm1'
onmouseover = 'cho Hộp kiểm ()'
>
Cung cấp bởi Linuxhint
< đầu vào
kiểu = 'Đài'
nhận dạng = 'radioButton'
onmouseover = 'forRadio ()'
>
Cung cấp bởi Linuxhint
< / hình thức >
Trong đoạn mã trên:
- Đầu tiên, một hộp kiểm được tạo trên trang web bằng cách sử dụng thẻ với loại được đặt thành “ hộp kiểm ”.
- Sau đó, người nghe sự kiện “ onmouseover ” được gắn vào hộp kiểm và gọi “ forCheckbox() ' chức năng.
- Theo cách tương tự, “ Đài ” nút được tạo bằng cách sử dụng nút “ <đầu vào> ” và trình xử lý sự kiện được đính kèm với nó. Nhưng lần này, “ forRadio() ” chức năng đang được gọi.
Sau khi tạo phần tử HTML trên trang web, bây giờ là lúc thêm phần “ nhấp chuột() ' phương pháp:
< kịch bản >
hàm forCheckbox ( ) {
tài liệu.getElementById ( 'hộp kiểm1' ) .nhấp chuột ( ) ;
}
chức năng choRadio ( ) {
tài liệu.getElementById ( 'radioButton' ) .nhấp chuột ( ) ;
}
< / kịch bản >
Trong đoạn mã trên:
- Đầu tiên, hãy xác định hai hàm JavaScript, “ forCheckbox() ' Và ' forRadio() ”.
- Các chức năng này sử dụng “ tài liệu.getElementById() ” để lấy tham chiếu đến các phần tử HTML trên trang có id cụ thể là “hộp kiểm1” và “radioButton”.
- Để mô phỏng thao tác nhấp vào phần tử HTML, phương thức click() được sử dụng. Chức năng này chuyển đổi trạng thái bật hoặc tắt khi nó được gọi.
Sau khi thực hiện các đoạn mã trên, đầu ra xuất hiện như thế này:
Ảnh gif ở trên minh họa rằng trạng thái của hộp kiểm và nút radio đang thay đổi bằng cách sử dụng phương thức “click ()”.
Phần kết luận
Phương thức click() đặc biệt hữu ích để xử lý các tương tác của người dùng với một trang web thông qua JavaScript.
Thay vì dựa vào người dùng để nhấp vào phần tử một cách vật lý, hãy sử dụng phương thức click() để mô phỏng sự kiện nhấp chuột theo chương trình. Nó rất hữu ích để tạo các thiết kế tương tác và thân thiện với người dùng. Bài viết này đã thể hiện thành công ý nghĩa của phương thức “click()” của phần tử DOM trong HTML.