Sự kiện onclick JavaScript thực thi một chức năng khi người dùng nhấp vào một nút hoặc một phần tử web khác. Phương pháp này được sử dụng cả nội tuyến trong tài liệu HTML và tài liệu JavaScript.
Khi bạn viết mã bằng JavaScript, bạn thường muốn chạy mã khi người dùng tương tác với trang web. Ví dụ:bạn có thể muốn điều gì đó xảy ra khi người dùng nhấn vào một nút. Nhưng làm cách nào để bạn triển khai chức năng này trong JavaScript?
Đó là nơi mà sự kiện “onclick ()” có thể hữu ích. Sự kiện onclick là một trong những loại sự kiện được sử dụng phổ biến nhất. onclick cho phép bạn chạy mã khi người dùng nhấp vào nút hoặc một phần tử khác trên trang web của bạn.
Trong hướng dẫn ngắn này, chúng ta sẽ phân tích cách hoạt động của chức năng onclick. Chúng tôi sẽ thảo luận về cách bạn có thể sử dụng onclick trong mã của mình để tạo tính tương tác cho trang web.
Trình làm mới sự kiện
Onclick là một loại sự kiện JavaScript. Sự kiện là các hành động diễn ra trong trình duyệt mà người dùng hoặc chính trình duyệt có thể bắt đầu. Người dùng nhấp vào nút, gửi biểu mẫu hoặc nhấn phím trên bàn phím của họ là tất cả các ví dụ về các sự kiện đang hoạt động. Trong hướng dẫn này, chúng tôi sẽ tập trung vào hướng dẫn đầu tiên:người dùng nhấp vào một phần tử.
Bằng cách sử dụng các sự kiện, các nhà phát triển có thể làm cho một trang web trở nên tương tác. Bạn có thể hiển thị biểu mẫu khi người dùng nhấp vào nút hoặc hiển thị thông báo cho người dùng khi họ gửi biểu mẫu.
Có hai thành phần chính đối với sự kiện:trình xử lý sự kiện và trình xử lý sự kiện.
Khi bạn nhấp vào một nút, nhấn một phím hoặc di chuột qua một phần tử, một sự kiện sẽ được chạy. Trình xử lý sự kiện là mã chạy khi sự kiện của bạn bắt đầu. Ví dụ:khi bạn nhấp vào một nút, trình xử lý sự kiện sẽ chạy.
81% người tham gia cho biết họ cảm thấy tự tin hơn về triển vọng công việc công nghệ của mình sau khi tham gia một cuộc thi đào tạo. Kết hợp với bootcamp ngay hôm nay.
Sinh viên tốt nghiệp bootcamp trung bình dành ít hơn sáu tháng để chuyển đổi nghề nghiệp, từ khi bắt đầu bootcamp đến khi tìm được công việc đầu tiên của họ.
Trình nghe sự kiện là một phần của một phần tử — giống như một nút — “lắng nghe” và đợi cho đến khi bạn tương tác với nó. Sau đó, trình nghe thực thi trình xử lý sự kiện.
JavaScript onclick
Sự kiện onclick JavaScript thực thi một chức năng khi bạn nhấp vào một nút hoặc một phần tử web khác. Ví dụ:một sự kiện onclick có thể kích hoạt một hộp thoại xuất hiện khi bạn bấm đồng hồ trên một nút.
Đây là cú pháp cho phương thức onclick trong HTML:
<button onclick="codetorun">Click me</button>
Khi nút HTML này được nhấp, hàm JavaScript “codetorun” sẽ thực thi. Chúng ta có thể sử dụng onclick với các phần tử khác, như một div. onclick không dành riêng cho các nút.
Bạn cũng có thể sử dụng onclick trong JavaScript thuần túy. Dưới đây là một ví dụ về phương pháp JavaScript onclick:
var item = document.getElementById("button");
item.onclick = function() {
codetoexecute...
} Chúng tôi sử dụng phương thức getElementById của JavaScript để truy xuất một phần tử từ trang web của chúng tôi. Khi chúng tôi nhấp vào phần tử có "nút" ID, chức năng onclick của chúng tôi sẽ thực thi.
Nút onclick Ví dụ về JavaScript
Giả sử bạn muốn thay đổi một số văn bản trên trang web sau khi bạn nhấp vào phần tử p hoặc một đoạn văn. Chúng tôi có thể sử dụng thuộc tính onclick để triển khai tính năng này trên trang web. Hãy bắt đầu với một trang HTML với một nút và một số văn bản. Chúng tôi cũng sẽ tạo một tệp JavaScript chứa mã sự kiện của chúng tôi.
index.html <!DOCTYPE html> <html> <head> <title>onclick example</title> </head> <!-- Main body of code --> <body> <button>Click here.</button> <p>This text will change when you click the button.</p> </body> <!-- Reference our JavaScript event code --> <script src=”js/onclick.js”></script> </html>
Đây là một ví dụ về một trang web cơ bản, nhưng nó chưa có tính tương tác. Khi trang web này chạy, chúng tôi sẽ thấy một nút và một số văn bản, nhưng sẽ không có gì xảy ra khi chúng tôi nhấp vào nút của mình. Đó là bởi vì chúng tôi chưa triển khai chức năng tập lệnh onclick.
Bây giờ trang web của chúng tôi đã sẵn sàng, chúng tôi có thể bắt đầu tạo sự kiện onclick của mình. Trước tiên, chúng tôi cần thêm trình xử lý sự kiện onclick () vào nút của chúng tôi. Sự kiện này sẽ lắng nghe khi người dùng nhấp vào nút.
index.html ... <body> <button onclick=”changeParagraph()”>Click here.</button> <p>This text will change when you click the button.</p> </body> …
Hãy tạo tệp “onclick.js” của chúng tôi, tệp này sẽ giữ mã cho sự kiện changeParagraph () của chúng tôi. Sự kiện này sẽ thay đổi văn bản của đoạn văn của chúng ta (phần tử “p”) bằng một thứ khác.
onclick.js
const changeParagraph = () => {
const paragraph = document.querySelector(“p”);
paragraph.textContent = “This text has changed because you clicked the button.”
}
Chúng tôi đã xác định một hàm JavaScript được gọi là changeParagraph. Chúng tôi sử dụng phương pháp JavaScript querySelector để chọn một đoạn trên trang của chúng tôi. Khi chúng tôi tải trang lần đầu tiên, chúng tôi sẽ thấy nút và dòng chữ có nội dung “Văn bản này sẽ thay đổi khi bạn nhấp vào nút”.
Sau khi chúng tôi nhấp vào nút, trang web của chúng tôi sẽ thay đổi và hiển thị văn bản mới của chúng tôi:
Tóm tắt
Nhìn chung, onclick () là một loại sự kiện JavaScript cho phép bạn chạy mã nhất định khi một phần tử trên trang web được nhấp vào.
Đó là nó! Bằng cách sử dụng đoạn mã trên, chúng ta đã tạo thành công một trang web sẽ chạy mã khi chúng ta nhấn một nút. Mặc dù mã của chúng tôi ở trên chỉ thay đổi văn bản, nhưng bạn có thể làm cho nó phức tạp hoặc đơn giản như bạn muốn.
Nếu bạn muốn người dùng được cảnh báo khi họ nhấp vào nút, bạn có thể sử dụng hàm alert () trong JavaScript. Nếu bạn muốn thêm câu lệnh “if” vào mã của mình, bạn cũng có thể làm điều đó.
Để có thêm tài nguyên học JavaScript, hãy xem hướng dẫn Cách học JavaScript của chúng tôi.