JavaScript-イベント
イベントとは何ですか？
JavaScriptとHTMLの相互作用は、ユーザーまたはブラウザーがページを操作するときに発生するイベントを通じて処理されます。
ページが読み込まれると、イベントと呼ばれます。ユーザーがボタンをクリックすると、そのクリックもイベントになります。その他の例としては、任意のキーを押す、ウィンドウを閉じる、ウィンドウのサイズを変更するなどのイベントがあります。
開発者はこれらのイベントを使用してJavaScriptでコード化された応答を実行できます。これにより、ボタンでウィンドウを閉じたり、メッセージをユーザーに表示したり、データを検証したり、その他の考えられるあらゆる種類の応答を実行したりできます。
イベントはドキュメントオブジェクトモデル（DOM）レベル3の一部であり、すべてのHTML要素にはJavaScriptコードをトリガーできる一連のイベントが含まれています。
HTMLイベントリファレンスをよりよく理解するために、この小さなチュートリアルを実行してください。ここでは、イベントとJavaScriptの関係を理解するためのいくつかの例を示します-
onclickイベントタイプ
これは、ユーザーがマウスの左ボタンをクリックしたときに発生する最も頻繁に使用されるイベントタイプです。このイベントタイプに対して、検証、警告などを行うことができます。
例
次の例を試してください。
<html>
<head>
<script type = "text/javascript">
<!--
function sayHello() {
alert("Hello World")
}
//-->
</script>
</head>
<body>
<p>Click the following button and see result</p>
<form>
<input type = "button" onclick = "sayHello()" value = "Say Hello" />
</form>
</body>
</html>出力
onsubmitイベントタイプ
onsubmitフォームを送信しようとしたときに発生するイベントです。このイベントタイプに対してフォーム検証を行うことができます。
例
次の例は、onsubmitの使用方法を示しています。ここでは、validate()フォームデータをWebサーバーに送信する前に機能します。場合validate() 関数はtrueを返します。フォームは送信されます。それ以外の場合、データは送信されません。
次の例を試してください。
<html>
<head>
<script type = "text/javascript">
<!--
function validation() {
all validation goes here
.........
return either true or false
}
//-->
</script>
</head>
<body>
<form method = "POST" action = "t.cgi" onsubmit = "return validate()">
.......
<input type = "submit" value = "Submit" />
</form>
</body>
</html>onmouseoverとonmouseout
これらの2つのイベントタイプは、画像やテキストを使用して優れた効果を作成するのに役立ちます。ザ・onmouseover マウスを任意の要素の上に置くと、イベントがトリガーされます。 onmouseoutその要素からマウスを移動するとトリガーされます。次の例を試してください。
<html>
<head>
<script type = "text/javascript">
<!--
function over() {
document.write ("Mouse Over");
}
function out() {
document.write ("Mouse Out");
}
//-->
</script>
</head>
<body>
<p>Bring your mouse inside the division to see the result:</p>
<div onmouseover = "over()" onmouseout = "out()">
<h2> This is inside the division </h2>
</div>
</body>
</html>出力
HTML5標準イベント
参考までに、標準のHTML5イベントをここに示します。ここで、scriptは、そのイベントに対して実行されるJavascript関数を示します。
| 属性 | 値 | 説明 |
|---|---|---|
| オフライン | 脚本 | ドキュメントがオフラインになるとトリガーされます |
| オナボート | 脚本 | アボートイベントのトリガー |
| onafterprint | 脚本 | ドキュメントが印刷された後にトリガーされます |
| onbeforeonload | 脚本 | ドキュメントが読み込まれる前にトリガーします |
| onbeforeprint | 脚本 | ドキュメントが印刷される前にトリガーします |
| onblur | 脚本 | ウィンドウがフォーカスを失ったときにトリガーされます |
| oncanplay | 脚本 | メディアが再生を開始できるときにトリガーしますが、バッファリングのために停止する必要がある場合があります |
| oncanplaythrough | 脚本 | バッファリングのために停止することなく、メディアを最後まで再生できる場合にトリガーします |
| onchange | 脚本 | 要素が変更されたときにトリガーされます |
| onclick | 脚本 | マウスクリックでトリガー |
| oncontextmenu | 脚本 | コンテキストメニューがトリガーされるとトリガーされます |
| ondblclick | 脚本 | マウスのダブルクリックでトリガー |
| オンドラッグ | 脚本 | 要素がドラッグされるとトリガーされます |
| ondragend | 脚本 | ドラッグ操作の終了時にトリガーします |
| ondragenter | 脚本 | 要素が有効なドロップターゲットにドラッグされたときにトリガーされます |
| ondragleave | 脚本 | 要素が有効なドロップターゲット上にドラッグされているときにトリガーされます |
| オンドラッグオーバー | 脚本 | ドラッグ操作の開始時にトリガーされます |
| ondragstart | 脚本 | ドラッグ操作の開始時にトリガーされます |
| オンドロップ | 脚本 | ドラッグされた要素がドロップされているときにトリガーされます |
| ondurationchange | 脚本 | メディアの長さが変更されたときにトリガーされます |
| 空にされた | 脚本 | メディアリソース要素が突然空になったときにトリガーされます。 |
| onended | 脚本 | メディアが終わりに達したときにトリガーします |
| onerror | 脚本 | エラーが発生するとトリガーされます |
| onfocus | 脚本 | ウィンドウがフォーカスを取得するとトリガーされます |
| onformchange | 脚本 | フォームが変更されたときにトリガーされます |
| onforminput | 脚本 | フォームがユーザー入力を取得するとトリガーされます |
| onhaschange | 脚本 | ドキュメントが変更されたときにトリガーされます |
| oninput | 脚本 | 要素がユーザー入力を取得するとトリガーされます |
| oninvalid | 脚本 | 要素が無効な場合にトリガーします |
| オンキーダウン | 脚本 | キーが押されたときにトリガーされます |
| onkeypress | 脚本 | キーを押して放すとトリガーされます |
| onkeyup | 脚本 | キーが離されるとトリガーされます |
| オンロード | 脚本 | ドキュメントが読み込まれるとトリガーされます |
| onloadeddata | 脚本 | メディアデータがロードされるとトリガーされます |
| onloadedmetadata | 脚本 | メディア要素の期間およびその他のメディアデータが読み込まれるとトリガーされます |
| onloadstart | 脚本 | ブラウザがメディアデータの読み込みを開始するとトリガーされます |
| onmessage | 脚本 | メッセージがトリガーされるとトリガーされます |
| onmousedown | 脚本 | マウスボタンが押されたときにトリガーされます |
| onmousemove | 脚本 | マウスポインタが移動するとトリガーされます |
| onmouseout | 脚本 | マウスポインタが要素の外に移動するとトリガーされます |
| onmouseover | 脚本 | マウスポインタが要素上を移動するとトリガーされます |
| onmouseup | 脚本 | マウスボタンを離すとトリガーされます |
| オンマウスホイール | 脚本 | マウスホイールが回転しているときにトリガーされます |
| オンラインオフライン | 脚本 | ドキュメントがオフラインになるとトリガーされます |
| オノイン | 脚本 | ドキュメントがオンラインになるとトリガーされます |
| オンライン | 脚本 | ドキュメントがオンラインになるとトリガーされます |
| onpagehide | 脚本 | ウィンドウが非表示になるとトリガーされます |
| onpageshow | 脚本 | ウィンドウが表示されるとトリガーされます |
| 一時停止 | 脚本 | メディアデータが一時停止されたときにトリガーされます |
| オンプレイ | 脚本 | メディアデータの再生が開始されるタイミングをトリガーします |
| onplaying | 脚本 | メディアデータの再生が開始されるとトリガーされます |
| onpopstate | 脚本 | ウィンドウの履歴が変更されたときにトリガーされます |
| onprogress | 脚本 | ブラウザがメディアデータをフェッチしているときにトリガーされます |
| onratechange | 脚本 | メディアデータの再生速度が変更されたときにトリガーされます |
| onreadystatechange | 脚本 | 準備完了状態が変化するとトリガーされます |
| オンレド | 脚本 | ドキュメントがやり直しを実行するとトリガーされます |
| onresize | 脚本 | ウィンドウのサイズが変更されるとトリガーされます |
| onscroll | 脚本 | 要素のスクロールバーがスクロールされているときにトリガーされます |
| オンシーク | 脚本 | メディア要素のシーク属性が真でなくなり、シークが終了したときにトリガーされます |
| オンシーク | 脚本 | メディア要素のシーク属性がtrueであり、シークが開始されたときにトリガーされます |
| onselect | 脚本 | 要素が選択されるとトリガーされます |
| オンストール | 脚本 | メディアデータのフェッチでエラーが発生したときにトリガーされます |
| onstorage | 脚本 | ドキュメントが読み込まれるとトリガーされます |
| onsubmit | 脚本 | フォームが送信されるとトリガーされます |
| onsuspend | 脚本 | ブラウザがメディアデータをフェッチしているが、メディアファイル全体がフェッチされる前に停止した場合にトリガーされます |
| ontimeupdate | 脚本 | メディアが再生位置を変更するとトリガーされます |
| オナンド | 脚本 | ドキュメントが元に戻すを実行するとトリガーされます |
| onunload | 脚本 | ユーザーがドキュメントを離れるとトリガーされます |
| onvolumechange | 脚本 | メディアが音量を変更したとき、および音量が「ミュート」に設定されているときにもトリガーされます |
| 待っています | 脚本 | メディアの再生が停止したときにトリガーされますが、再開されると予想されます |