ES6-イベント

JavaScriptは、ページに双方向性を追加することを目的としています。JavaScriptは、イベントを使用するメカニズムを使用してこれを行います。Events はドキュメントオブジェクトモデル（DOM）レベル3の一部であり、すべてのHTML要素にはJavaScriptコードをトリガーできる一連のイベントが含まれています。

イベントは、ソフトウェアによって認識されるアクションまたは発生です。これは、ユーザーまたはシステムによってトリガーできます。イベントの一般的な例には、ユーザーがボタンをクリックする、Webページをロードする、ハイパーリンクをクリックするなどがあります。以下は、一般的なHTMLイベントの一部です。

イベントハンドラー

イベントが発生すると、アプリケーションは一連の関連タスクを実行します。この目的を達成するコードのブロックは、eventhandler。すべてのHTML要素には、一連のイベントが関連付けられています。イベントハンドラーを使用して、JavaScriptでイベントを処理する方法を定義できます。

onclickイベントタイプ

これは、ユーザーがマウスの左ボタンをクリックしたときに発生する最も頻繁に使用されるイベントタイプです。このイベントタイプに対して検証、警告などを行うことができます。

例

<html> 
   <head> 
      <script type = "text/javascript">  
         function sayHello() {  
            document.write ("Hello World")  
         }   
      </script> 
   </head> 
   
   <body> 
      <p> Click the following button and see result</p> 
      <input type = "button" onclick = "sayHello()" value = "Say Hello" /> 
   </body> 
</html>

上記のコードが正常に実行されると、次の出力が表示されます。

onsubmitEventタイプ

onsubmitフォームを送信しようとしたときに発生するイベントです。このイベントタイプに対してフォーム検証を行うことができます。

次の例は、使用方法を示しています onsubmit。ここでは、フォームデータをWebサーバーに送信する前に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>

上記のコードが正常に実行されると、次の出力が表示されます。

HTML5標準イベント

参考までに、標準のHTML5イベントを次の表に示します。スクリプトは、そのイベントに対して実行されるJavaScript関数を示します。

属性	値	説明
オフライン	脚本	ドキュメントがオフラインになるとトリガーされます
onabort	脚本	アボートイベントのトリガー
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	脚本	メディアが音量を変更したとき、および音量が「ミュート」に設定されているときにもトリガーされます
待っています	脚本	メディアの再生が停止したときにトリガーされますが、再開する予定です