イベントハンドラの登録と実行
ここからは実際にサンプルを書いて、動きを試してみます。
イベントハンドラについて、まずはイベントハンドラの登録をします。
登録方法はaddEventListener()のメソッドか、attacheEvent()のメソッドです。
後者は古いブラウザ(IE)でサポートされており、時期に使われることがなくなる為
原則的にaddEventListenerメソッドを使います。
イベントハンドラ登録の簡単な例を書いて試してみます。
具体的には以下のように書きます。
let element_test = document.getElementById('test1');
element_test.onclick = function() {
alert('on !');
}
DOM要素である「test1」を参照し、その参照結果を変数に代入したうえで、onclickイベントを登録しています。
HTML全体は以下のようになります。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>テストHTML</title>
</head>
<body>
<div id="test1">テスト</div>
<script type="text/javascript">
let element_test = document.getElementById('test1');
element_test.onclick = function() {
alert('on !');
}
</script>
</body>
</html>
アクセスして動きを確認してみると、画面上の「テスト」の文字列をクリックするとダイアログが表示されます。
このイベントハンドラの登録方法は、簡単な書き方ですが、実際に開発を進めるとイベント処理が複雑になってくるケースがあるので別な書き方でイベントハンドラを登録します。(後に投稿します)
イベントハンドラを直接HTML DOM要素内に記述する方法
イベントハンドラの登録方法は、上記サンプルの他、HTMLタグ内に記述する方法もあります。
以下のサンプルを試してみます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>テストHTML</title>
</head>
<body>
<div id="test1" onclick="alert('test1');">テスト1</div>
</body>
</html>
動作をみてみると、「テスト1」という文字をクリックするとtest1.htmlと同様に、onclickイベントが動いていることがわかります。
ブラウザ全体に対して作用するイベントハンドラ
これまでのサンプルでは、画面上のDOM要素に対してイベントハンドラを登録して動かしてみました。
DOM要素ではなく、画面(ブラウザ)全体に対して登録するイベントハンドラもあります。
具体的にはwindowに
onafterprint onbeforeprint onbeforeunload oncancel onhashchange onmessage onoffline ononline onpagehide onpageshow onpopstate onresize onshow onstorage
試しに「onresize」について、サンプルを書いて動かしてみます。
下記のサンプルHTMLを用意しました。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>テストHTML</title>
</head>
<body>
<div id="test1">テスト</div>
<script type="text/javascript">
// ウィンドウ取得
let window_test = window;
window_test.onresize = function() {
alert('onresize !');
}
</script>
</body>
</html>
実際にアクセスして、ブラウザのサイズを変更するとわかるのですが、
上記のサンプルでは、onresizeのイベントが発生する間隔が短く、ウィンドウサイズをいろいろと変更すると
何度もonresizeイベントが呼ばれていることがわかります(アラートのダイアログが何度も表示されます)。
最近の開発では、実際にはネイティブのjavascriptコードでイベントハンドラの登録や、制御を行うことは非常にすくなく、
外部javascirptライブラリやフレームワークの利用がメインなので、上記の書き方は参考程度にしておいたほうがよいかと思います。