Javascript-events
JavaScript-イベント
イベントとは?
JavaScriptのHTMLとの相互作用は、ユーザーまたはブラウザーがページを操作するときに発生するイベントを通じて処理されます。
ページが読み込まれると、イベントと呼ばれます。 ユーザーがボタンをクリックすると、そのクリックもイベントになります。 他の例には、キーを押す、ウィンドウを閉じる、ウィンドウのサイズを変更するなどのイベントが含まれます。
開発者はこれらのイベントを使用して、JavaScriptでコード化された応答を実行できます。これにより、ボタンがウィンドウを閉じ、メッセージがユーザーに表示され、データが検証されます。
イベントはドキュメントオブジェクトモデル(DOM)レベル3の一部であり、すべてのHTML要素にはJavaScriptコードをトリガーできるイベントのセットが含まれています。
link:/html/html_events_ref [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()*関数を呼び出しています。 * 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>
出力
HTML 5標準イベント
参考のために、標準のHTML 5イベントをここにリストします。 ここで、スクリプトは、そのイベントに対して実行されるJavascript関数を示しています。
Attribute | Value | Description |
---|---|---|
Offline | script | Triggers when the document goes offline |
Onabort | script | Triggers on an abort event |
onafterprint | script | Triggers after the document is printed |
onbeforeonload | script | Triggers before the document loads |
onbeforeprint | script | Triggers before the document is printed |
onblur | script | Triggers when the window loses focus |
oncanplay | script | Triggers when media can start play, but might has to stop for buffering |
oncanplaythrough | script | Triggers when media can be played to the end, without stopping for buffering |
onchange | script | Triggers when an element changes |
onclick | script | Triggers on a mouse click |
oncontextmenu | script | Triggers when a context menu is triggered |
ondblclick | script | Triggers on a mouse double-click |
ondrag | script | Triggers when an element is dragged |
ondragend | script | Triggers at the end of a drag operation |
ondragenter | script | Triggers when an element has been dragged to a valid drop target |
ondragleave | script | Triggers when an element is being dragged over a valid drop target |
ondragover | script | Triggers at the start of a drag operation |
ondragstart | script | Triggers at the start of a drag operation |
ondrop | script | Triggers when dragged element is being dropped |
ondurationchange | script | Triggers when the length of the media is changed |
onemptied | script | Triggers when a media resource element suddenly becomes empty. |
onended | script | Triggers when media has reach the end |
onerror | script | Triggers when an error occur |
onfocus | script | Triggers when the window gets focus |
onformchange | script | Triggers when a form changes |
onforminput | script | Triggers when a form gets user input |
onhaschange | script | Triggers when the document has change |
oninput | script | Triggers when an element gets user input |
oninvalid | script | Triggers when an element is invalid |
onkeydown | script | Triggers when a key is pressed |
onkeypress | script | Triggers when a key is pressed and released |
onkeyup | script | Triggers when a key is released |
onload | script | Triggers when the document loads |
onloadeddata | script | Triggers when media data is loaded |
onloadedmetadata | script | Triggers when the duration and other media data of a media element is loaded |
onloadstart | script | Triggers when the browser starts to load the media data |
onmessage | script | Triggers when the message is triggered |
onmousedown | script | Triggers when a mouse button is pressed |
onmousemove | script | Triggers when the mouse pointer moves |
onmouseout | script | Triggers when the mouse pointer moves out of an element |
onmouseover | script | Triggers when the mouse pointer moves over an element |
onmouseup | script | Triggers when a mouse button is released |
onmousewheel | script | Triggers when the mouse wheel is being rotated |
onoffline | script | Triggers when the document goes offline |
onoine | script | Triggers when the document comes online |
ononline | script | Triggers when the document comes online |
onpagehide | script | Triggers when the window is hidden |
onpageshow | script | Triggers when the window becomes visible |
onpause | script | Triggers when media data is paused |
onplay | script | Triggers when media data is going to start playing |
onplaying | script | Triggers when media data has start playing |
onpopstate | script | Triggers when the window’s history changes |
onprogress | script | Triggers when the browser is fetching the media data |
onratechange | script | Triggers when the media data’s playing rate has changed |
onreadystatechange | script | Triggers when the ready-state changes |
onredo | script | Triggers when the document performs a redo |
onresize | script | Triggers when the window is resized |
onscroll | script | Triggers when an element’s scrollbar is being scrolled |
onseeked | script | Triggers when a media element’s seeking attribute is no longer true, and the seeking has ended |
onseeking | script | Triggers when a media element’s seeking attribute is true, and the seeking has begun |
onselect | script | Triggers when an element is selected |
onstalled | script | Triggers when there is an error in fetching media data |
onstorage | script | Triggers when a document loads |
onsubmit | script | Triggers when a form is submitted |
onsuspend | script | Triggers when the browser has been fetching media data, but stopped before the entire media file was fetched |
ontimeupdate | script | Triggers when media changes its playing position |
onundo | script | Triggers when a document performs an undo |
onunload | script | Triggers when the user leaves the document |
onvolumechange | script | Triggers when media changes the volume, also when volume is set to "mute" |
onwaiting | script | Triggers when media has stopped playing, but is expected to resume |