HomeLập trìnhJavaScriptGiải thích sự...

Giải thích sự kiện JavaScript Onclick


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.

Đọc thêm  Toán tử `in` trong JavaScript được giải thích bằng các ví dụ

MDN

Các nguồn lực khác

Tệp đính kèm xử lý sự kiện jQuery .on()



Zik.vn – Biên dịch & Biên soạn Lại

spot_img

Create a website from scratch

Just drag and drop elements in a page to get started with Newspaper Theme.

Buy Now ⟶

Bài viết liên quang

DMCA.com Protection Status