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 脚本 メディアが音量を変更したとき、および音量が「ミュート」に設定されているときにもトリガーされます
待っています 脚本 メディアの再生が停止したときにトリガーされますが、再開する予定です