#GlobalEventHandlers インターフェース

イベントのコールバック関数を指定する場合は、要素の addEventListener メソッドを使用することをお勧めします。

div.addEventListener('click', clickHandler, false);

また、イベントのコールバック関数を直接指定する方法もあります。

div.onclick = clickHandler;

このインターフェイスは、「GlobalEventHandlers」インターフェイスによって提供されます。利点は、より使いやすいことですが、欠点は、イベントごとに 1 つのコールバック関数しか指定できないことと、イベントがトリガーされるステージ (キャプチャ ステージまたはバブリング ステージ) を指定できないことです。

HTMLElement、Document、および Window はすべてこのインターフェイスを継承します。つまり、さまざまな HTML 要素、document オブジェクト、および window オブジェクトは、GlobalEventHandlers インターフェイスによって提供されるプロパティを使用できます。このインターフェイスによって提供される主なイベント属性を以下に示します。

GlobalEventHandlers.onabort

オブジェクトの abort イベント (読み込みの停止) が発生すると、onabort 属性で指定されたコールバック関数が呼び出されます。

現在、さまざまな要素の読み込み停止イベントをトリガーする方法に関する統一された規制はありません。したがって、実際には、この属性は通常、<img> 要素でのみ使用されます。

// HTMLコードは以下の通り
// <img src="example.jpg" id="img">
var img = document.getElementById('img');
img.onabort = 関数 () {
  console.log('イメージのロードが中止されました。');
}

GlobalEventHandlers.onerror

error イベントが発生すると、onerror 属性で指定されたコールバック関数が呼び出されます。

「エラー」イベントには 2 つのタイプがあります。

1 つは JavaScript ランタイム エラーで、これが window オブジェクトに渡され、window.onerror() が発生します。

window.onerror = 関数 (メッセージ、ソース、行番号、列番号、エラー) {
  // ...
}

window.onerror の処理関数は合計 5 つのパラメータを受け取ります。その意味は次のとおりです。

• メッセージ: エラーメッセージ文字列
• ソース: エラー報告スクリプトの URL
• lineno: エラーレポートの行番号。整数です。
• Colno: エラーレポートの列番号 (整数)
• エラー: エラーオブジェクト

もう 1 つはリソースの読み込みエラーです。たとえば、<img> や <script> によって読み込まれたリソースの読み込みエラーです。この時点で、Error オブジェクトが対応する要素に渡され、要素の onerror 属性が実行を開始します。

element.onerror = 関数 (イベント) {
  // ...
}

一般に、リソース読み込みエラーは「window.onerror」をトリガーしないことに注意してください。

GlobalEventHandlers.onload、GlobalEventHandlers.onloadstart

要素の読み込みが完了すると、load イベントがトリガーされ、onload() が実行されます。その典型的な使用シナリオは、「window」オブジェクトと「」要素です。 window オブジェクトの場合、ページのすべてのリソース (画像、スクリプト、スタイル シート、フォントなどのすべての外部リソースを含む) が読み込まれた場合にのみ、load イベントがトリガーされます。

<img> や <video> などの要素の場合、読み込み開始時に loadstart イベントもトリガーされ、onloadstart が実行されます。

GlobalEventHandlers.onfocus、GlobalEventHandlers.onblur

現在の要素がフォーカスを取得すると、element.onfocus がトリガーされ、現在の要素がフォーカスを失うと、element.onblur がトリガーされます。

element.onfocus = function () {
  console.log("onfocus イベントが検出されました!");
};
element.onblur = 関数 () {
  console.log("onblur イベントが検出されました!");
};

ユーザー入力を受け入れることができる要素ではない場合、onfocus をトリガーするには、要素に tabindex 属性が必要であることに注意してください。

GlobalEventHandlers.onscroll

ページまたは要素がスクロールされると、scroll イベントがトリガーされ、onscroll() が実行されます。

GlobalEventHandlers.oncontextmenu、GlobalEventHandlers.onshow

ユーザーがページ上でマウスの右ボタンを押すと、contextmenu イベントがトリガーされ、oncontextmenu() が実行されます。この属性が実行後に「false」を返す場合、それは右クリック メニューを無効にするのと同じです。 document.oncontextmenu は window.oncontextmenu と同じ効果があります。

document.oncontextmenu = function () {
  false を返します。
};

上記のコードでは、実行後に oncontextmenu 属性が false を返し、右クリック メニューは表示されません。

要素の右クリック メニューが表示されると、要素の onshow リスニング関数がトリガーされます。

その他のイベント属性

マウスイベントのプロパティ。

-onclick -ondblclick -onmousedown -onmouseenter -onmouseleave -onmousemove -onmouseout -onmouseover -onmouseup -車輪付き

キーボードイベントのプロパティ。

-onkeydown -onkeypress -onkeyup

フォーカスのイベントのプロパティ。

-onblur -オンフォーカス

フォームのイベントのプロパティ。

-入力時 -変更時 -送信時 -オンリセット -on無効 -onselect

イベントのプロパティをタッチします。

-ontouchキャンセル -ontouchend -ontouchmove -ontouchstart

ドラッグ イベント属性は 2 つのカテゴリに分類されます。1 つはドラッグされた要素に関連し、もう 1 つはドラッグされた要素を受け取るコンテナ要素に関連します。

ドラッグされた要素のイベント プロパティ。

• ondragstart: ドラッグ開始
• ondrag: ドラッグ中に数百ミリ秒ごとにトリガーされます -ondragend: ドラッグの終了

ドラッグされた要素を受け取るコンテナ要素のイベント プロパティ。

• ondragenter: ドラッグされた要素がコンテナ要素に入ります。
• ondragleave: ドラッグされた要素はコンテナ要素から離れます。
• ondragover: ドラッグされた要素はコンテナ要素の上にあり、数百ミリ秒ごとにトリガーされます。
• ondrop: マウスを放した後、ドラッグされた要素がコンテナ要素に配置されます。

<dialog> ダイアログ要素のイベント属性。

-キャンセル -onclose