[JS初心者]#1 イベント編 JavaScriptを学ぶ
イベントドリブン
イベントに対応して処理が実行される形態のことをイベントドリブンという。
イベントについて
◯◯が押された、◯◯の内容が変更されたなど、ブラウザ上で起こる動作のこと。
イベントハンドラについて
イベントに対して実行される処理のこと。
<input type="button" id="button1" value="ボタン1">
<script type="text/javascript">
window.onload = function() {
var button1 = document.getElementById('button1');
button1.onclick = function() { // これがイベントハンドラ
alert('Clicked');
}
};
</script>
イベントハンドラは1つのイベントに複数定義することはできない。
<input type="button" id="button1" value="ボタン1">
<script type="text/javascript">
window.onload = function() {
var button1 = document.getElementById('button1');
button1.onclick = function() {
alert('Clicked1');
}
button1.onclick = function() {
alert('Clicked2');
}
};
</script>
この実行例だとonclickイベントは上書きされて、alertではClicked2が表示されてしまう。。
これではイベントに複数の定義を設定できない。
イベントリスナについて
イベントリスナはイベントハンドラと同様にイベントに対して実行される処理のこと。
大事なのは、イベントハンドラとは違い、複数の定義をイベントに設定することができる。
<input type="button" id="button1" value="ボタン1" />
<script type="text/javascript">
window.onload = function() {
var button1 = document.getElementById('button1');
var func1 = function() {
alert('Clicked1');
}
var func2 = function() {
alert('Clicked2');
};
button1.addEventListener('click', func1, false);
button1.addEventListener('click', func2, false);
};
</script>
こうすることで、button1に複数の定義を設定することができ、Clicked1とClicked2の両方がでてくるようになる。
イベント
イベントで扱われるオブジェクト一覧
- ウィンドウオブジェクト
- フォームイベント
- キーボードイベント
- マウスイベント
- タッチイベント
ウィンドウイベント
ブラウザについてのイベントのことで、例えばページの遷移やブラウザのボタンを押したときに呼ばれるイベントのことです。
| イベント名 | 意味 |
|---|---|
| onafterprint | 印刷直後 |
| onbeforeprint | 印刷直前 |
| onbeforeunload | Webページ遷移直前 |
| onblur | フォーカスが外れた |
| onerror | JavaScriptエラーが発生 |
| onfocus | フォーカスされた |
| onhashchange | URLのハッシュが変更 |
| onload | Webページの読み込み完了（キャッシュは対象外） |
| onmessage | メッセージを受信 |
| onoffline | ネットワーク環境がオンラインからオフラインに変更 |
| ononline | ネットワーク環境がオフラインからオンラインに変更 |
| onpagehide | 他のページへの遷移などで元のページが隠された |
| onpageshow | Webページ読み込み完了（キャッシュも対象） |
| onpopstate | 戻る・進むボタンでURL履歴から履歴が取り出された |
| onredo | やり直すボタンが押された |
| onresize | ウィンドウのサイズが変更された |
| onstorage | ローカルストレージもしくはセッションストレージが変更された |
| onundo | やり直すボタンが押された |
| onunload | 他のページに移動した |
フォームイベント
ブラウザ上にあるフォームの状態が変化したときに発生するイベントのことです。
| イベント名 | 意味 |
|---|---|
| onblur | フォーカスが外れた |
| onchange | 変更された |
| onfocus | フォーカスされた |
| onformchange | フォームの値が変更された |
| onforminput | フォームの値が入力された |
| oninput | テキスト要素に入力された |
| oninvalid | 要素の無効な値が入力された |
| onselect | 要素が選択された |
| onsubmit | 送信ボタンが押された |
キーボードイベント
キーボードの状態が変化した場合に発生するイベントのことです。
| イベント名 | 意味 |
|---|---|
| onkeydown | キーが押された |
| onkeypress | キーが押されて離された |
| onkeyup | キーが離された |
マウスイベント
マウスの状態が変化した場合に発生するイベントのことです。
| イベント名 | 意味 |
|---|---|
| onclick | ボタンがクリックされた |
| oncontextmenu | マウスの右ボタンが押された |
| ondblclick | ボタンがダブルクリックされた |
| ondrag | ドラッグされた |
| ondragend | ドラッグが終わった |
| ondragenter | ドロップ目標にドラッグされた |
| ondragleave | ドロップ目標からドラッグが外れた |
| ondragover | ドロップ目標上にドラッグされている |
| ondragstart | ドラッグ開始された |
| ondrop | ドロップ目標にドラッグがドロップされた |
| onmousedown | ボタンが押された |
| onmousemove | マウスポインタが移動された |
| onmouseout | マウスポインタが要素から外れた |
| onmouseover | マウスポインタが要素上に入った |
| onmouseup | ボタンを話した |
| onmousewheel | マウスホイールを回転させた |
| onscroll | スクロールバーを操作した |
タッチイベント
タッチパネルの状態が変化した場合に発生するイベントのことです。
| イベント名 | 意味 |
|---|---|
| touchstart | 指が置かれた |
| touchmove | 指がドラッグされた |
| touchend | 指が話された |
イベントリスナ
要素に対してイベントをリスナを設定できるようになる。
要素に定義されているメソッド一覧が下記になります。
| イベント名 | 意味 |
|---|---|
| addEventListener() | イベントリスナを登録 |
| removeEventListener() | イベントリスナの削除 |
| dispatchEvent() | 任意にイベントを発行 |
※ IE対応をするためには下記を参照
// イベントリスナの登録
// IE8以下の場合
要素.attachEvent(イベント名, イベントリスナ)
// IE9以上、IE以外
要素.addEventListener(イベント名, イベントリスナ, イベントの伝達の方向)
// イベントリスナの削除
// IE8以下の場合
要素.detachEvent(イベント名, イベントリスナ)
// IE9以上、IE以外
要素.removeEventListener(イベント名, イベントリスナ, イベントの伝達の方向)
- イベントの伝達の方向とはなにか？
例えば、下記のような要素があれば、
<div id='div1'>
click1
<div id='div2-1'>
click2-1
</div>
<div id='div2-2'>
click2-2
</div>
</div>
イベントリスナをidそれぞれに設定した場合、click1をクリックすると、イベントはclick1だけした発生しないが、click2-1をクリックすると、click1とclick2-1の両方のイベントが発生することになる。
このことを、イベントバブリングと言います。
▼ まとまっていてわかりやすいです。
JavaScriptのイベントバブリングという仕様について本気出して考えてみた!!｜By U Zensen.