まず最初によく使われるイベントを以下にまとめます。
| イベント名 | 意味 |
|---|---|
| onload | 読み込みが終わったとき |
| onresize | ウィンドウの幅が変わったとき |
| onclick | マウスでクリックしたとき |
| ondblclick | マウスでダブルクリックしたとき |
| onmouseover | マウスカーソルがのったとき |
| onmouseout | マウスカーソルが外れたとき |
| onmousedown | マウスボタンを押したとき |
| onmouseup | マウスボタンを離したとき |
| onkeydown | キーボードのキーを押したとき |
| onkeyup | キーボードのキーを離したとき |
| onfocus | フォーカスが当たったとき |
| onblur | フォーカスが外れたとき |
| onchange | フォームの値が変わったとき |
| onsubmit | フォームを送信したとき |
例-1
「ボタンを押したときにアラートを出す」というイベントの場合
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>
</head>
<body>
<button id='btn'>ボタン</button>
<script type="text/javascript">
window.onload = function() {
//ボタン要素を取得
var btn = document.getElementById('btn');
// btnにクリックイベントを設定
btn.onclick = function() {
//クリックしたらアラートを出す
alert('clicked');
};
};
</script>
</html>
要素のプロパティによるイベント設定の欠点
欠点、、、それは１つのイベントで２つの処理を行えない事です。
以下を見てください。
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>
</head>
<body>
<div id='box'>This is box</div>
<button id='btn'>box</button>
<script type="text/javascript">
window.onload = function() {
//要素を取得
var btn = document.getElementById('btn');
var box = document.getElementById('box');
// 背景色を赤くするイベント
btn.onclick = function() {
box.style.backgroundColor = 'red';
};
// クリックしたらアラートを出す
btn.onclick = function() {
alert('clicked');
};
};
</script>
</html>
↑この様に１つ目のイベント「背景色の変更」は上書きされて無効になる。
そこで次の様な書き方で対処します。↓
addEventListenerによるイベントの設定
addEventListenerという関数を使うと、１つのイベントで２つの処理を同時に行える様になります。
書き方は以下の様になります↓
対象の要素.addEventListener(何か起きたら, 何かする, false);
最後にfalseを必ず入れなければなりません。(理由は残念ながら僕も分かりませんがfalseを入れて初めて完結します)
例は以下の通り↓
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>
</head>
<body>
<div id='box'>This is box</div>
<button id='btn'>box</button>
<script type="text/javascript">
window.onload = function() {
//要素を取得
var btn = document.getElementById('btn');
var box = document.getElementById('box');
// 背景色を赤くするイベント
btn.addEventListener('click', function() {
box.style.backgroundColor = 'red';
}, false);
// アラートを出すイベント
btn.addEventListener('click', function() {
alert('clicked');
}, false);
};
</script>
</html>
↑の様に「ボタンクリック」という１つのイベントで２つの処理が同時に行えた。
addEventListenerの弱点
IE7やIE6などに対応していないことです。
この様に、onclickのようなオブジェクトのプロパティにイベントを設定する方法と、addEventListenerを使った方法は一長一短です。
対策としては後ほど出てくる、jQueryを使えば、これらの良いところを合わせたイベントの処理が出来るようになります。
window.onload
これまでDOMの構文で文頭に必ず書いていたwindow.onloadについての解説をします。
なぜwindow.onloadを書くか？
①下の様な順番で書くと↓
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>
</head>
<body>
<script type="text/javascript">
// idがboxの要素を取得
var box = document.getElementById('box');
// 要素が取得出来てるかをチェック
console.log(box); //=> null
</script>
<!--後でにbox要素を書く -->
<div id="box">This is box</div>
</html>
コンソールログを見ると「null」と要素が取得出来てない事が分かる。(This is boxの表示はdivタグで括って出てる単なるテキストとして出ているだけ)
②それでは先にdivタグを入れてその後に要素取得なら？
↓の様にコンソールに<div id="box">This is box</div>とin=boxの要素が取得できてる事が分かる。
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>
</head>
<body>
<!--先にbox要素を書く -->
<div id="box">This is box</div>
<script type="text/javascript">
// idがboxの要素を取得
var box = document.getElementById('box');
// 要素が取得出来てるかをチェック
console.log(box); //=> <div id="box">
</script>
</html>
③window.onload ------ 「HTMLの読み込みが終わったら」を利用する。
window.onload使う事によって「HTMLの読み込みが終わったとき」に処理を実行できる様になります。
改めて、使用した場合のコードを書くと以下の様になります。↓
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>
</head>
<body>
<div id="box">This is box</div>
<script type="text/javascript">
window.onload = function() {
// idがboxの要素を取得
var box = document.getElementById('box');
// 要素が取得出来てるかをチェック
console.log(box); // <div id="box">This is box</div>
}
</script>
</html>
↓同様にコンソールに<div id="box">This is box</div>と表示されてるのが分かる。
- window.onloadイベントの弱点
それは画像等の外部ファイルのダウンロードもすべて終了しないとイベントの処理が実行されない事です。
そこでこれから書くような方法があります。
DOMContentLoaded --- 「HTMLを取得・操作可能な準備ができたら」というイベント
DOMContentLoaded イベントは、画像などのダウンロードは待たず、HTMLをJavaScriptから取得・操作可能な準備ができた時点で実行されるので、window.onloadより早く処理出来ます。
書き方としては、DOMContentLoaded イベントは、要素のプロパティにイベントを設定する方法では設定できないので、
addEventListenerを最初に入れる必要があります。
具体的には以下の様な書き方になります。↓
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>
</head>
<body>
<div id="box">This is box</div>
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function() {
// idがboxの要素を取得
var box = document.getElementById('box');
// 要素が取得出来てるかをチェック
console.log(box); // <div id="box">This is box</div>
}, false);
</script>
</html>
