イベント処理
イベントハンドラとは
- イベントハンドラとは、JavaScriptで記述された、マウスの動きといった動作・操作に対して特定の処理を与えるための命令のことである。
- リンクの上にマウスポインタが乗った、またはボタンがクリックされた、テキストボックスの内容が変更された、フォームの内容が送信されようとする、など、ユーザーが行う様々な操作に対して特定の処理を行わせる。
- イベントの発生源となるボタンやリンクは、オブジェクトと呼ばれる。
- イベントハンドラは、そのオブジェクトに対応するタグのイベント属性の値として記述される。(イベント属性とは、イベントの種類を表す属性のことである)。例えばクリックイベントの場合は、<INPUT TYPE="button">、<A>などの、タグのonClick属性の値としてイベントハンドラが記述される。
イベントハンドラとは (event handler): - IT用語辞典バイナリ
主なイベントハンドラ
イベント ハンドラ | 説明 |
---|---|
onBlur | ページやフォーム要素からフォーカスが外れた時に発生 |
onFocus | ページやフォーム要素にフォーカスが当たった時に発生 |
onChange | フォーム要素の選択、入力内容が変更された時に発生 |
onSelect | テキストが選択された時に発生 |
onSubmit | フォームを送信しようとした時に発生 |
onReset | フォームがリセットされた時に発生 |
onAbort | 画像の読み込みを中断した時に発生 |
onError | 画像の読み込み中にエラーが発生した時に発生 |
onLoad | ページや画像の読み込みが完了した時に発生 |
onUnload | ウィンドウを閉じた時、他のページに切り替えた時、ページをリロード(更新)した時に発生 |
onClick | 要素やリンクをクリックした時に発生 |
onDblClick | 要素をダブルクリックした時に発生 |
onKeyUp | 押していたキーをあげた時に発生 |
onKeyDown | キーを押した時に発生 |
onKeyPress | キーを押してる時に発生 |
onMouseOut | マウスが離れたした時に発生 |
onMouseOver | マウス乗った時に発生 |
onMouseUp | クリックしたマウスを上げた時に発生 |
onMouseDown | マウスでクリックした時に発生 |
onMouseMove | マウスを動かしている時に発生 |
イベントハンドラの記述方法
HTMLに記述する
<タグ イベントハンドラ = '実行する命令'>
<input type="button" value="start" onClick="startWatch()">
オブジェクトのプロパティとして設定する
オブジェクト名.イベントハンドラ=呼出す関数名;
document.form.btn.onClick = startWatch
イベンドハンドラの使用例
関数を記述する
<script> var count = 0; function clickCheck() { ++count; alert ('クリック回数:' + count); } </script>
フォームにイベントハンドラを記述する
<form> <p> <input type="button" value="クリック" onClick="clickCheck()"> </p> </form>
onLoad onclick
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTf-8"> <title>イベントハンドラのテスト</title> <script> function init() { alert('ドキュメントがロードされました'); } window.onload = init; function func1(str) { alert(str + 'がクリックされました'); } </script> </head> <body> <button onclick="func1('ボタン1')">ボタン1</button> </body> </html>
記述上の注意 大文字小文字について
- イベントハンドラは「script」内に記述する場合は、「イベント名はすべて小文字で記述する」
- タグ内で属性として記述する場合は大文字/小文字を区別しない(つまり、属性として「onClick」と記述する場合のみ、大文字が使用される)
- わかりやすさよりも、エラーのない記述のために「イベント名はすべて小文字で記述する」と決めておくと良い。
HTML5でカラムレイアウト
HTML5でレイアウトせよ
headerタグ、navタグは必ず用いよ。
html
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>カラムレイアウト</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div id="container"> <div class="content"> <header> <h1> <img src="img/title.gif" alt=""> </h1> <nav> <ul> <li> <a href="#"> <img src="img/ranking.gif" alt=""> </a> </li> <li> <a href="#"> <img src="img/story.gif" alt=""> </a> </li> <li> <a href="#"> <img src="img/access.gif" alt=""> </a> </li> <li> <a href="#"> <img src="img/news.gif" alt=""> </a> </li> </ul> </nav> </header> <ul> <li> <a href="#"> <img src="img/spring/dai-01.jpg" alt=""> </a> </li> </ul> <ul> <li> <a href="#"> <img src="img/spring/tate-01.jpg" alt=""> </a> </li> <li> <a href="#"> <img src="img/spring/01.jpg" alt=""> </a> </li> <li> <a href="#"> <img src="img/spring/02.jpg" alt=""> </a> </li> </ul> <ul> <li> <a href="#"> <img src="img/spring/yoko-01.jpg" alt=""> </a> </li> <li> <a href="#"> <img src="img/spring/03.jpg" alt=""> </a> </li> <li> <a href="#"> <img src="img/spring/04.jpg" alt=""> </a> </li> </ul> </div> <!--/.content--> <div class="content"> <ul> <li> <a href="#"> <img src="img/spring/yoko-02.jpg" alt=""> </a> </li> <li> <a href="#"> <img src="img/spring/05.jpg" alt=""> </a> </li> <li> <a href="#"> <img src="img/spring/06.jpg" alt=""> </a> </li> </ul> <ul> <li> <a href="#"> <img src="img/spring/dai-02.jpg" alt=""> </a> </li> </ul> <ul> <li> <a href="#"> <img src="img/spring/07.jpg" alt=""> </a> </li> <li class="right"> <a href="#"> <img src="img/spring/tate-02.jpg" alt=""> </a> </li> <li> <a href="#"> <img src="img/spring/08.jpg" alt=""> </a> </li> </ul> <ul> <li> <a href="#"> <img src="img/spring/dai-03.jpg" alt=""> </a> </li> </ul> <ul> <li> <a href="#"> <img src="img/spring/09.jpg" alt=""> </a> </li> <li> <a href="#"> <img src="img/spring/010.jpg" alt=""> </a> </li> <li> <a href="#"> <img src="img/spring/yoko-03.jpg" alt=""> </a> </li> </ul> </div> <!--/.content--> <div class="content"> <ul> <li> <a href="#"> <img src="img/spring/dai-04.jpg" alt=""> </a> </li> </ul> <ul> <li> <a href="#"> <img src="img/spring/011.jpg" alt=""> </a> </li> <li class="right"> <a href="#"> <img src="img/spring/tate-03.jpg" alt=""> </a> </li> <li> <a href="#"> <img src="img/spring/012.jpg" alt=""> </a> </li> </ul> <ul> <li> <a href="#"> <img src="img/spring/013.jpg" alt=""> </a> </li> <li> <a href="#"> <img src="img/spring/014.jpg" alt=""> </a> </li> <li> <a href="#"> <img src="img/spring/yoko-04.jpg" alt=""> </a> </li> </ul> <ul> <li> <a href="#"> <img src="img/spring/015.jpg" alt=""> </a> </li> <li> <a href="#"> <img src="img/spring/016.jpg" alt=""> </a> </li> <li> <a href="#"> <img src="img/spring/017.jpg" alt=""> </a> </li> <li> <a href="#"> <img src="img/spring/018.jpg" alt=""> </a> </li> </ul> <ul> <li> <a href="#"> <img src="img/spring/dai-05.jpg" alt=""> </a> </li> </ul> </div> <!--/.content--> </div> <!--/#container--> </body> </html>
css
@charset "UTF-8"; /* reset =========================*/ html, body, header, nav, h1, ul, li, img, a { margin: 0; padding: 0; line-height: 1.0; } ul { list-style: none } img { border: none; vertical-align: bottom; } /* layout =========================*/ body { background: #fff } #container { width: 960px; margin: 20px auto; overflow: hidden; } .content { float: left; width: 320px; } .content img { float: left; margin: 10px; } .content li.right { float: right }