JavaScriptイベントの種類_JavaScriptスキルのUIイベントを詳しく解説

「DOM レベル 3 イベント」では、いくつかの種類のイベントが規定されています

ユーザーがページ上の要素を操作するときに分割される UI イベント
フォーカス イベント、要素はフォーカスを取得または失います。
マウス イベント。マウスを使用してページ上で操作を実行します。
マウス ホイールまたは同様のデバイスを使用したスクロール ホイール イベント; ユーザーがドキュメントにテキストを入力するときのテキスト イベント
キーボード イベント。キーボードを使用してページ上で操作を実行します。
合成イベント、IME (インプットメソッドエディター) の文字入力時の分割; 変更イベント (突然変異)、基礎となる DOM 構造が変更されます。 要素名または属性名が変更されるときの名前変更イベント。このタイプのイベントは非推奨になりました。
以下では、UI イベントの内容に焦点を当てます

UI イベントとは、必ずしもユーザーの操作に関係しないイベントを指します。

DOMActivate，元素已经被用户操作（鼠标或键盘）激活。已经被废弃。
load，页面完全加载完后在window上触发，所有框架加载完毕后在框架集上触发，图像加载完毕在img元素上触发，当嵌入内容加载完毕在object元素上触发。
unload，页面完全卸载（window），所有框架都卸载后（框架集），嵌入内容卸载完毕后（object）。
abort，当用户停止下载过程，如果嵌入内容没有加载完，则在object元素上除法。
error，当js错误时（window），当无法加载图像时（img），当无法加载嵌入内容时（object），当一或多个框架无法加载（框架集）。
select，当用户选择文本框（texterea或input）中的一个或多个字符时触发。
resize：当窗口或框架的大小变化时（window或框架）
scroll：当用户滚动带滚动条的元素中的内容时（在该元素上触发）

ロードイベント

js で最もよく使用されるイベントの 1 つは、load です。ページが完全に読み込まれると (すべての画像、js ファイル、css ファイルなど)、ウィンドウ上のload イベントがトリガーされます。例:

一般に、HTML では window 要素にアクセスできないため、ウィンドウ上で発生するイベントは body 要素の対応する特性を通じて指定できます。これは、下位互換性を確保するための単なる一時しのぎの措置です。例:

window.onload = function () {
  console.log('loaded');
}

画像要素にも使用できます:

document.body.onload = function () {
  console.log('loaded');
}

別の例は、ウィンドウがロードされた後、img 要素が本体に追加され、画像の src とプロンプト メッセージが表示されます。

var img = document.getElementById("img");
img.onload = function () {
  console.log(event.target.src);
}

さらに、script 要素は非標準的な方法でロード イベントもサポートします。

window.onload = function () {
  var image = document.createElement("img");
  document.body.appendChild(image);
  image.src = "scr.png"
  image.onload = function () {
    console.log(event.target.src);
    console.log('img is loaded');
  };
}

一部のブラウザではリンク要素のロード イベントもサポートされており、開発者はスタイル シートがロードされているかどうかを判断できます。

アンロードイベント

このイベントは、ドキュメントが完全にアンロードされた後にトリガーされます。アンロード イベントは、ユーザーがあるページから別のページに切り替えるたびに発生します。

ページがロードされた後に存在するオブジェクトは、現時点では存在していない可能性があるため、onunload イベント ハンドラーでコードを記述するときは注意が必要です。

window.onunload = function () {
  alert("8888");
}

サイズ変更イベント

このイベントは、ブラウザ ウィンドウのサイズが新しい高さまたは幅に変更されるとトリガーされます。

一部のブラウザは、ウィンドウが 1 ピクセル変化するとこのイベントをトリガーし、ウィンドウが変化してもトリガーし続けるため、他のブラウザはユーザーがウィンドウのサイズ変更を停止した場合にのみトリガーします。したがって、ブラウザーの応答が遅くならないように、このイベントのハンドラーに大量の計算コードを追加することは避けてください。

window.onresize = function () {
  console.log(document.body.clientWidth);
}

スクロールイベント

このイベントはウィンドウ オブジェクトで発生しますが、実際にはページ上の応答要素の変更を表します。混合モードでは、非標準モードでは body 要素のscrollLeftとscrollTopを通じて変更が監視され、Safariを除くすべてのブラウザはHTML要素(documentElement)を通じてこの変更を反映します。

ブラウザは変更によって常にトリガーされるため、ブラウザの応答が遅くならないように、このイベントのハンドラーに大量の計算コードを追加しないようにする必要があります。

イベントを中止します

window.onscroll = function () {
  console.log(document.documentElement.scrollTop || document.body.scrollTop);
}

中止、エラー、選択、その他のイベントに関する今後の更新にご注意ください

エラーイベント

中止、エラー、選択、その他のイベントに関する今後の更新にご注意ください

イベントを選択

中止、エラー、選択、その他のイベントに関する今後の更新にご注意ください