Các onclick sự kiện trong JavaScript cho phép bạn với tư cách là một lập trình viên thực thi một chức năng khi một phần tử được nhấp vào.
Nút Onclick Ví dụ
<button onclick="myFunction()">Click me</button>
<script>
function myFunction() {
alert('Button was clicked!');
}
</script>Trong ví dụ đơn giản ở trên, khi người dùng nhấp vào nút, họ sẽ thấy một cảnh báo trong trình duyệt của họ hiển thị Button was clicked!.
Tự động thêm onclick
Các onclick sự kiện cũng có thể được lập trình thêm vào bất kỳ phần tử nào bằng mã sau trong ví dụ sau:
<p id="foo">click on this element.</p>
<script>
var p = document.getElementById("foo"); // Find the paragraph element in the page
p.onclick = showAlert; // Add onclick function to element
function showAlert(event) {
alert("onclick Event triggered!");
}
</script>Ghi chú
Điều quan trọng cần lưu ý là sử dụng onclick, chúng ta chỉ có thể thêm một chức năng nghe. Nếu bạn muốn thêm nhiều hơn nữa, chỉ cần sử dụng addEventListener(), đây là cách ưa thích để thêm trình xử lý sự kiện.
Trong ví dụ trên, khi người dùng nhấp vào paragraph phần tử trong htmlhọ sẽ thấy một cảnh báo hiển thị onclick Event triggered.
Ngăn chặn hành động mặc định
Tuy nhiên nếu chúng ta đính kèm onclick đến các liên kết (HTML’s a thẻ), chúng tôi có thể muốn ngăn hành động mặc định xảy ra:
<a href="https://guide.freecodecamp.org" onclick="myAlert()">Guides</a>
<script>
function myAlert(event) {
event.preventDefault();
alert("Link was clicked but page was not open");
}
</script>Trong ví dụ trên, chúng tôi đã ngăn hành vi mặc định của a phần tử (mở liên kết) bằng cách sử dụng event.preventDefault() bên trong của chúng tôi onclick chức năng gọi lại.
MDN
Các nguồn lực khác
Tệp đính kèm xử lý sự kiện jQuery .on()
