2024.07.19
ChatGPTにクラス名を付けてもらってみた
- コーディング
WEB制作のあれこれがわかる！
WEB制作のあれこれがわかる！
今回はJavaScriptのonloadイベントについて解説します！
JavaScript初心者がよくつまづいてしまうエラーについても解説するので、JavaScriptを学び始めた方は必見です！
目次
onloadイベントはJavaScriptに用意されているイベント処理の一つです。
イベント処理は「クリックしたら〜」とか「スクロールしたら〜」とはさまざまなものがありますが、onloadイベントは「HTMLや画像などのページに表示するリソースを読み込んでから〜」というイベント処理になります。
HTMLや画像をJavaScriptで操作する場合、先に操作するHTML要素や画像が読み込まれている必要があるので、非常によく使用するイベントになります。
こちらについては、後ほどサンプルコードを用いて詳しく解説します！
onloadイベントの書き方は以下の通り。
window.onload = function() {
console.log("ページ読み込み完了")
}{〜}内にHTMLや画像が読み込まれてたら実行したい処理を書きます。
JavaScriptを書いていると、「記述は間違っていないはずなのに、なぜか動かない…」なんてことがよくあります。
例えば、以下のコードではエラーが出てしまいます。
<script>
let button = document.getElementById('xxx');
button.addEventListener('click', function(){
console.log('Hello');
});
</script>
<input type="button" value="button" id="xxx">コンソールに以下のようなエラーが…
s
HTMLは上から順に読み込まれていきます。
スクリプトは「xxxというidがついた要素」を探そうとしますが、その時はまだ下の対象要素が読み込まれていないため、見つからずにエラーが出てしまいます。
もうおわかりかと思いますが、下のようにこのスクリプトをonloadイベントの中に入れてしまえば解決します！
onloadイベントを使用した場合
<script>
window.onload = function () {
let button = document.getElementById('xxx');
button.addEventListener('click', function () {
console.log('Hello');
});
}
</script>
<input type="button" value="button" id="xxx">対象要素が下に書かれていたとしても、HTMLが読み込まれてからスクリプトを実行するのでちゃんと対象要素を見つけて問題なくスクリプトが動作します。
ちなみに、単純に対象要素よりもスクリプトが下にあればonloadイベントを使用しなくても大丈夫です。(上で説明した通り、HTMLは上から順に読み込まれていくため)
下にスクリプトを持ってきた場合
<input type="button" value="button" id="xxx">
<script>
window.onload = function () {
let button = document.getElementById('xxx');
button.addEventListener('click', function () {
console.log('Hello');
});
}
</script>このような決まりがあることから、JavaScriptのコードは</body>の直前に書くことがいいとされています。
<head>~</head>内に書く場合は、onloadイベントを使用する必要があります。
説明したとおり、onloadイベントはHTMLを含め外部ファイル(画像やcssなど)すべてのリソースが読み込まれてから実行するという処理になります。
そのため順番としては最後となり、ちょっと遅すぎるなんて時もあります。
そんな時は、DOMContentLoadedイベントを使用しましょう。
document.addEventListener('DOMContentLoaded', function() {
console.log("HTML読み込み完了")
});DOMContentLoadedイベントは、HTMLが読み込まれたら実行するイベントで、画像などの外部ファイルを読み込む前に実行されます。
画像などを扱うスクリプトでなければ、こちらを使用してもOKです。
以上、JavaScriptの代表的なイベント処理の一つ、「onloadイベント」について解説しました！
HTMLや画像が先に読み込まれていなくてエラーが起きてしまうのは、JavaScript初学者の方に特に多いつまづきポイントなので、必ず押さえておきましょう！
実際にloadイベントを使用している記事はこちら
株式会社スピカデザイン
渋谷のWEB制作会社「スピカデザイン」の現役コーダー達が、WEB制作のヒントになるような情報をお届けします。
© 2020 spiqa design
https://spiqa.design/