Hướng dẫn này sẽ xác định quy trình về cách đặt onClick bằng JavaScript.
Cách đặt onClick bằng JavaScript
để thiết lập trong một cái nhấp chuột với JavaScript, có hai phương pháp khác nhau, đó là:
- Phương pháp đầu tiên là gán một giá trị cho phần tử HTML trong một cái nhấp chuột thuộc tính sử dụng JavaScript.
- Phương pháp thứ hai là thêm rõ ràng một trình lắng nghe sự kiện vào sự kiện HTML để kiểm tra “ nhấp chuột ' Sự kiện.
Ví dụ 1: Gán một Giá trị cho Thuộc tính onclick của Phần tử HTML bằng JavaScript
Trong tệp HTML, tạo tiêu đề và nút “ Nhấp vào đây ” với id “ js ” sẽ kích hoạt chức năng JavaScript khi nhấp vào nó.
< h2 > Bộ thuộc tính onClick với JavaScript h2 >
< id nút = 'js' > Nhấp vào đây cái nút >
Trong bước tiếp theo, nút đã tạo sẽ được truy cập và một “ trong một cái nhấp chuột ” thuộc tính sẽ được gắn vào nó. Khi nhấp vào nút, chức năng được chỉ định sẽ được thực thi và “ style.backgroundColor ” sẽ thay đổi màu nút như sau:
tài liệu. getElementById ( 'js' ) . trong một cái nhấp chuột = chức năng jsFunc ( ) {
tài liệu. getElementById ( 'js' ) . Phong cách . màu nền = 'Màu đỏ tía' ;
}
Đầu ra tương ứng sẽ là:
Ví dụ 2: Thêm rõ ràng Trình xử lý sự kiện trên Sự kiện HTML
Tạo một nút “ Bấm vào đây! ” và gán một id “ Sự kiện ” vào nó sẽ kích hoạt phương thức addEventListener() trên 'nhấp chuột' Sự kiện:
< id nút = 'Sự kiện' > Bấm vào đây ! mạnh > cái nút mạnh >>
Tìm nạp nút bằng cách sử dụng nó Tôi và sau đó đính kèm một “ addEventListener() ” phương pháp bằng cách chuyển một “ nhấp chuột ” sự kiện và chức năng “ sự kiệnFunc ” nơi màu nền của nút sẽ được thay đổi:
tài liệu. getElementById ( 'Sự kiện' ) . addEventListener ( 'nhấp chuột' , eventFunc ) ;chức năng sự kiệnFunc ( ) {
tài liệu. getElementById ( 'Sự kiện' ) . Phong cách . màu nền = 'Màu xanh lá' ;
}
đầu ra
Ví dụ 3: Sử dụng tất cả các phương thức onClick cùng một lúc
Trong ví dụ này, hoạt động của tất cả các phương thức sẽ được hiển thị cùng một lúc. Đầu tiên là cách mặc định để thêm thuộc tính onclick vào trong chính thẻ HTML. Sau đó, hai phương pháp đặt thuộc tính onclick với sự trợ giúp của JavaScript cũng đã được trình bày.
Trong ví dụ sau, hãy tạo ba nút và xem chức năng của thuộc tính onclick.
- Nút đầu tiên “ Nhấp chuột ” sẽ gọi “ htmlFunc() ” trên sự kiện nhấp chuột.
- Nút “ Nhấp vào đây ” sẽ được truy cập với id được gán “ js ” rồi gán giá trị cho thuộc tính onclick của nút bằng JavaScript.
- Nút “ Bấm vào đây! ” sẽ được truy cập bằng cách sử dụng id “ Sự kiện ” và sau đó đính kèm một “ addEventListener() ” phương pháp với nó:
< id nút = 'js' > Nhấp vào đây cái nút >< anh >< anh >
< id nút = 'Sự kiện' > Bấm vào đây ! cái nút >
Chức năng dưới đây sẽ kích hoạt “ trong một cái nhấp chuột ” sự kiện của nút “ Nhấp chuột ”:
chức năng htmlFunc ( ) {báo động ( 'Nút được nhấp bởi sự kiện HTML onClick' ) ;
}
Khi nhấp vào nút “ Nhấp vào đây ”, chức năng sau đây sẽ kích hoạt tại vị trí hiển thị thông báo cảnh báo.
tài liệu. getElementById ( 'js' ) . trong một cái nhấp chuột = chức năng jsFunc ( ) {báo động ( 'Nút được nhấp bởi hàm JavaScript onClick' ) ;
}
Chức năng đã cho sẽ kích hoạt nút “ Bấm vào đây! ”:
tài liệu. getElementById ( 'Sự kiện' ) . addEventListener ( 'nhấp chuột' , eventFunc ) ;chức năng sự kiệnFunc ( ) {
báo động ( 'Nút được nhấp bởi JavaScript onClick với Phương thức EventListener' ) ;
}
Đầu ra sẽ hiển thị các thông báo cảnh báo trên mỗi lần nhấp vào nút:
Sự kết luận
Để đặt onclick bằng JavaScript, có hai cách tiếp cận khác nhau, cách thứ nhất là gán giá trị cho thuộc tính onclick của phần tử HTML bằng cách sử dụng JavaScript và cách tiếp cận thứ hai là thêm rõ ràng một trình xử lý sự kiện vào sự kiện HTML để kiểm tra “ nhấp chuột ' Sự kiện. Hướng dẫn này đã xác định các phương pháp để đặt onClick bằng JavaScript cùng với các ví dụ.