Để load một hàm khi load một website, bạn có thể sử dụng một trong hai cách.
Cách 1: Sử dụng hàm window.onload()
Hàm window.onload() sẽ được gọi khi trang web đã được tải hoàn toàn. Bạn có thể sử dụng hàm này để load hàm của bạn bằng cách gọi hàm đó bên trong hàm window.onload().
<!DOCTYPE html>
<html lang="en">
<head>
<title>Load hàm khi load trang web</title>
</head>
<body>
<script>
function myFunction() {
console.log('Hàm myFunction đã được load!');
}
window.onload = function() {
myFunction();
};
</script>
</body>
</html>Kết quả:
Hàm myFunction đã được load!Giải thích:
Trong ví dụ này, chúng ta tạo một hàm myFunction() đơn giản in ra thông báo “Hàm myFunction đã được load!”. Sau đó, chúng ta sử dụng hàm window.onload() để gọi hàm
Cách 2: Sử dụng hàm document.addEventListener()
Hàm document.addEventListener() cho phép bạn lắng nghe các sự kiện trên một đối tượng. Trong trường hợp này, bạn có thể lắng nghe sự kiện DOMContentLoaded để load hàm của bạn.
Ví dụ 2: Sử dụng hàm document.addEventListener()
<!DOCTYPE html>
<html lang="en">
<head>
<title>Load hàm khi load trang web</title>
</head>
<body>
<script>
function myFunction() {
console.log('Hàm myFunction đã được load!');
}
document.addEventListener('DOMContentLoaded', function() {
myFunction();
});
</script>
</body>
</html>Kết quả:
Hàm myFunction đã được load!Giải thích:
Trong ví dụ này, chúng ta sử dụng hàm document.addEventListener() để lắng nghe sự kiện DOMContentLoaded. Sự kiện này sẽ được gọi khi DOM của trang web đã được tải hoàn toàn. Khi sự kiện này được gọi, chúng ta sẽ gọi hàm myFunction().
Lựa chọn nào tốt hơn?
Cách 1 đơn giản hơn và dễ sử dụng hơn. Tuy nhiên, cách 2 linh hoạt hơn và cho phép bạn lắng nghe các sự kiện khác nhau.
Ví dụ 3: Load hàm khi một phần tử HTML cụ thể được tải
<!DOCTYPE html>
<html lang="en">
<head>
<title>Load hàm khi load trang web</title>
</head>
<body>
<script>
function myFunction() {
console.log('Hàm myFunction đã được load!');
}
const myElement = document.querySelector('#my-element');
myElement.addEventListener('load', function() {
myFunction();
});
</script>
<div id="my-element">
Đây là phần tử HTML cần load hàm myFunction()
</div>
</body>
</html>Kết quả:
Hàm myFunction đã được load!Giải thích:
Trong ví dụ này, chúng ta tạo một phần tử HTML có id là my-element. Sau đó, chúng ta sử dụng hàm document.querySelector() để lấy phần tử này. Cuối cùng, chúng ta sử dụng hàm addEventListener() để lắng nghe sự kiện load trên phần tử này. Khi sự kiện này được gọi, chúng ta sẽ gọi hàm myFunction().
Ràng buộc chỉ load một hàm ở một thẻ cụ thể.
Để ràng buộc chỉ load một hàm ở một thẻ cụ thể ở một file HTML cụ thể, bạn có thể sử dụng thẻ script với thuộc tính src. Thuộc tính này chỉ định URL của file JavaScript mà bạn muốn load.
Ví dụ:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Ràng buộc hàm load ở một thẻ cụ thể</title>
</head>
<body>
<script src="my-function.js"></script>
<div id="my-element">
Đây là phần tử HTML cần load hàm myFunction()
</div>
</body>
</html>Trong ví dụ này, chúng ta tạo một file JavaScript có tên my-function.js chứa hàm myFunction(). Sau đó, chúng ta sử dụng thẻ script với thuộc tính src để load file my-function.js.
Để ràng buộc hàm myFunction() chỉ load ở thẻ my-element, bạn có thể sử dụng hàm addEventListener() để lắng nghe sự kiện load trên thẻ này.
Ví dụ:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Load hàm khi load trang web</title>
</head>
<body>
<script src="my-function.js"></script>
<div id="my-element">
Đây là phần tử HTML cần load hàm myFunction()
</div>
<script>
const myElement = document.querySelector('#my-element');
myElement.addEventListener('load', function() {
myFunction();
});
</script>
</body>
</html>my-function.js
function myFunction() {
console.log('Hàm myFunction đã được load!');
}
document.addEventListener('DOMContentLoaded', function() {
myFunction();
});Trong ví dụ này, chúng ta sử dụng hàm document.querySelector() để lấy phần tử my-element. Sau đó, chúng ta sử dụng hàm addEventListener() để lắng nghe sự kiện load trên phần tử này. Khi sự kiện này được gọi, chúng ta sẽ gọi hàm myFunction().
Kết quả:
Hàm myFunction đã được load!Như vậy, hàm myFunction() chỉ được load khi thẻ my-element được tải hoàn toàn.
Bạn cũng có thể sử dụng hàm querySelectorAll() để lấy danh sách các phần tử HTML có id cụ thể. Sau đó, bạn có thể sử dụng vòng lặp for để duyệt qua danh sách này và gọi hàm addEventListener() cho từng phần tử.
Ví dụ:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Load hàm dựa vào id của thẻ</title>
</head>
<body>
<script src="my-function.js"></script>
<div id="my-element-1">
Đây là phần tử HTML cần load hàm myFunction()
</div>
<div id="my-element-2">
Đây là phần tử HTML cần load hàm myFunction()
</div>
<script>
function myFunction() {
console.log('Hàm myFunction đã được load!');
}
const myElements = document.querySelectorAll('#my-element');
for (const myElement of myElements) {
myElement.addEventListener('load', function() {
myFunction();
});
}
</script>
</body>
</html>Trong ví dụ này, chúng ta sử dụng hàm querySelectorAll() để lấy danh sách các phần tử có id là my-element. Sau đó, chúng ta sử dụng vòng lặp for để duyệt qua danh sách này và gọi hàm addEventListener() cho từng phần tử. Khi sự kiện load được gọi cho từng phần tử, chúng ta sẽ gọi hàm myFunction().
