Load
DOMContentLoaded
HTMLドキュメントの解析が完了したとき。
画像などのリソースの読み込みを待つ必要がある場合はloadを使用します。
document.addEventListener('DOMContentLoaded', function(e) {
console.log('DOMの操作ができます')
})
load
すべてのリソースが読まれたとき。windowだけでなく、画像などのリソースの読み込み確認にも使えます。
window.addEventListener('load', function(e) {
console.log('リソースの読み込みが終わりました')
})
その他のイベント
ページの読み込みや遷移に関するイベントは、使用頻度が少ないものではbeforeunloadやpagehideなどが他にありますが、ブラウザによって挙動が違ったり動かなかったりするので、使用する際には注意が必要です。
View
scroll
スクロールされたとき。
ページのスクロールだけでなく、要素の中でスクロールする場合でも使えます。
このイベントは頻度が高いので、適度に間引いて処理をしたほうが優しいです。
window.addEventListener('scroll', function(e) {
console.log(window.pageYOffset)
})
resize
リサイズされたとき。
こちらもスクロールと同様に適度に間引いて処理をしたほうが優しいです。
window.addEventListener('resize', function(e) {
console.log(window.innerWidth, window.innerHeight)
})
Event
すべての基になるイベントのインターフェースです。
共通で使うプロパティが定義されています。
/*=== よく使うプロパティ ===*/
// イベントの名前
console.log(e.type)
// イベントが発生した要素への参照
console.log(e.target)
// イベントが登録されている要素への参照
console.log(e.currentTarget )
/*=== よく使うメソッド ===*/
// ブラウザによる規定のアクションをキャンセルする
e.preventDefault()
// イベントの伝播を止める
e.stopPropagation()