HomeLập trìnhJavaScriptSự kiện JavaScript...

Sự kiện JavaScript DOM: Onclick và Onload


Trong những ngày đầu của Internet, các trang web thực sự tĩnh – chỉ có văn bản và hình ảnh. Chắc chắn, đôi khi hình ảnh đó là một gif hoạt hình, nhưng nó vẫn chỉ là một hình ảnh.

Với sự ra đời của JavaScript, ngày càng có thể tạo các trang tương tác phản hồi các hành động như nhấp vào nút hoặc có hoạt ảnh cuộn.

Có một số sự kiện DOM (Mô hình đối tượng tài liệu) mà bạn có thể nghe trong JavaScript, nhưng onclickonload là một trong những phổ biến nhất.

Sự kiện onclick

Các onclick sự kiện trong JavaScript cho phép bạn thực thi một chức năng khi một phần tử được nhấp vào.

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!.

Thêm onclick năng động

Ví dụ trên hoạt động, nhưng thường được coi là thông lệ xấu. Thay vào đó, tốt hơn là tách nội dung của trang (HTML) khỏi logic (JS).

Để làm được điều này, các onclick sự kiện 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>
  const 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, chỉ cần sử dụng addEventListener()đây là cách ưa thích để thêm sự kiện.

Đọc thêm  Ví dụ về JavaScript toString – Cách chuyển đổi một số thành một chuỗi trong JS và hơn thế nữa

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 id="bar" href="https://guide.freecodecamp.org">Guides</a>

<script>
  const link = document.getElementById("bar"); //  Find the link element
  link.onclick = myAlert; // Add onclick function to element

  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.

Tải sự kiện

Các onload sự kiện được sử dụng để thực thi chức năng JavaScript ngay sau khi trang được tải.

Ví dụ:

const body = document.body;
body.onload = myFunction;

function myFunction() {
  alert('Page finished loading');
}

Mà có thể được rút ngắn thành:

document.body.onload = function() {
  alert('Page finished loading');
}

Trong ví dụ trên, ngay sau khi trang web được tải, myFunction chức năng sẽ được gọi, hiển thị Page finished loading cảnh báo cho người dùng.

Các onload sự kiện thường được gắn liền với <body> thành phần. Sau đó, một khi <body> của trang đã tải, bao gồm tất cả hình ảnh, tệp CSS và JS, tập lệnh của bạn sẽ chạy.

Thêm thông tin:

Đây chỉ là hai trong số nhiều sự kiện DOM mà bạn có thể thao tác bằng JavaScript, nhưng lại nằm trong số những sự kiện được sử dụng phổ biến nhất.

Đọc thêm  10 tính năng JavaScript mới trong ES2020 mà bạn nên biết

Nhưng đôi khi bạn hoàn toàn không cần lắng nghe các sự kiện DOM và muốn sử dụng một sự kiện dựa trên thời gian như đếm ngược. Để có hướng dẫn nhanh về các sự kiện thời gian, hãy xem bài viết này.



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