JavaScriptで扱えるイベントとイベントハンドラーonload関連

記事内にPRが含まれる場合があります

2022年4月20日2024年9月22日

URLをコピーしました！

ページ読込時のonloadイベントハンドラー

onloadプロパティはそのページが読み込まれたとき（HTMLや画像のリソースの読み込み後）に発生するイベント。

HTMLのbodyタグやimgタグに、

<body onload="aiueo()">
<img src="hogehoge" onload="aiueo()">

としたりして指定できる。

順番的にはimgのonloadが先で、ページ全体の読み込みが終わった後にbodyのonloadが発生する様子。

functionでaiueo()関数を定義すれば、onloadしたイベント時にaiueoが起動するようになる。

function aiueo() {
	window.alert("ページが読み込まれました。");
}

しかしこのやり方だとjavascriptファイルを2つロードすると後にロードしたファイルしか起動しないことがわかったので。

JavaScriptではプロパティに関数を代入することでイベントハンドラを設定する方法がある。

window.onload = aiueo;

function aiueo() {
	window.alert("ページが読み込まれました。");
}

上記の様にwindowオブジェクトのonloadプロパティにaiueoという関数を代入して指定したり。

関数は以下のように無名関数を使って定義することもできる。

window.onload = function() {
	window.alert("ページが読み込まれました。");
}

ページ読込時のイベントDOMContentLoadedイベント

使い方は

<script>
document.addEventListener('DOMContentLoaded', xyzzz);

function xyzzz(){
    window.alert('HTML読み込み完了、画像やCSSはこの後ロードするよ');
}

</script>

document.addEventListenerメソッドを使ってイベントを登録する。

第1引数には必ず「DOMContentLoaded」を指定。第2引数に関数を指定。

ページ読込時のイベントloadをaddEventListnerで登録

以下のようなやり方もある。これならjavascriptファイルが2つあれば2つとも起動する。

window.addEventListener('load', function(){
	window.alert("ページが読み込まれました。");
});

javascriptのwindowとdocumentオブジェクトの違い

ここで疑問が出てきたので調べてみた。

Windowオブジェクトが最上位のグローバルなオブジェクト。
その下にDocumentオブジェクトがある。

WindowオブジェクトにはdocumentプロパティがありDocumentオブジェクトへの参照になっている。

ならwindow.documentが普段使ってるdocumentってことじゃないか。

window.document.getElementById()と書くところを省略できるようになっている。

console.log()も実はwindow.console.log()だけど省略できる。

DOMツリーとは

HTMLにあるすべてのタグをツリー構造のようにしたモデル。

HTMLのタグはオブジェクトなのでJavaScriptで触ることが出来る。これがdocumentなんだろうな。

buttonを押したときのイベントの起動と要素の取得方法

HTML側のボタンの記述

  <button id="btn">ABC</button>
  <p id="result"></p>

JavaScript側の記述

  window.onload = function() {
    document.getElementById("btn").onclick = aiueo;
  }

  function aiueo(e) {
    document.getElementById("result").textContent = e.target.textContent + "が押されました";
  }

onclickプロパティに関数を指定すると、id=”btn”で指定した要素（buttonオブジェクト）がクリックされたときにイベントが発生する。

e.targetにはbuttonへの参照が渡される。buttonのtextContentはABCと言う文字列なので、結果を表示するpタグには、「ABCが押されました」と表示される。

idだと1つのボタンに1IDしか設定できないのでclassで複数のボタンを指定できないか調べてみた

HTML側のボタンの記述

  <button class="btn">ABC</button><button class="btn">DEF</button><button class="btn">GHI</button>
  <p id="result"></p>

JavaScript側の記述

  window.onload = function() {
    var btns = document.getElementsByClassName("btn");
    for(i = 0; i < btns.length; i++) {
      btns[i].onclick = aiueo;
    }
  }

  function aiueo(e) {
    document.getElementById("result").textContent = e.target.textContent + "が押されました";
  }

これでいけた。

HTML側の3つのボタンにclass=”btn”と指定して、
getElementByIdの代わりにgetElementsByClassName(“btn”)とすることで、格オブジェクトへの参照が配列で帰ってくるので、それをvar btnsに入れて、forループで回して1つ1つのonclickプロパティにaiueo関数を入れている。

JavaScriptで取れる色々なイベント

こういうイベントがある。

.onclick
.onmousedown
.onmouseup
.onchange
.onfocus
.onmousemove

何のイベントが発生したかは、e.typeで取得できる。

focus
mouseup
change
click
mousedown

など。

イベントが発生したオブジェクトのタグ名は

e.target.tagName
か
e.srcElement.tagName

で取れる。（srcElementはIE向けの古い記述だけど他のブラウザでも採用しているらしい）

座標は

e.clientX、e.clientY　　・・・　ブラウザの描画領域の左上が(0,0)
e.screenX、Y　　　　　　　・・・　　デスクトップの左上が0,0
e.pageX、Y　　　　　　　・・・　　ページのの左上が0,0
e.offsetX、Y　　　　　　　・・・　自分の要素の左上が0,0

で取れる。

offsetXとoffsetYはFirefoxでは多分まだ実装されていない。（2022年）
だから自分で計算して正規化あげないといけない。

正規化するためのコードは以下のとおり。

document.body.onclick = function(e) {
e = e || window.event;

var target = e.target || e.srcElement,
rect = target.getBoundingClientRect(),
offsetX = e.clientX – rect.left,
offsetY = e.clientY – rect.top;

console.log([offsetX, offsetY]);
};