ホームページ >ウェブフロントエンド >jsチュートリアル >UI イベント ユーザー インターフェイス イベント_JavaScript スキル
UI イベントはユーザーの動作に直接関係しません。UI イベントには次のものがあります。
DomActivate: このイベントは、ユーザーのマウス イベントやキーボード イベントなどのユーザーの動作によって要素がアクティブ化されるとトリガーされます。このイベントは DOM レベル 3 イベントでは廃止されました。FF2 と chrome ではサポートされているため、このイベントの使用は推奨されません。
Load: window オブジェクトの場合、ページがロードされた後にトリガーされます。frameset の場合、すべてのフレームがロードされた後にトリガーされます。img タグを参照する場合、画像の後にトリガーされます。ロードされているなど
Unload: window オブジェクトでは、ページがアンロードされた後にトリガーされます。frameset では、すべてのフレームがアンロードされた後にトリガーされます。img タグを参照する場合は、画像の後にトリガーされます。荷降ろしなどです。
abort: 要素が完全にロードされていないとき、ユーザーがダウンロード操作を停止する前にトリガーされます。
エラー: ウィンドウの JavaScript でエラーが発生したときにトリガーされ、img をロードできないかオブジェクト要素をロードできないときにトリガーされ、フレームセット内の 1 つ以上のフレームをロードできないときにトリガーされます。
選択: このイベントは、ユーザーがテキスト ボックスで 1 つ以上の文字を選択するとトリガーされます。
サイズ変更: ウィンドウまたはフレームのサイズが変更されるとトリガーされます。
スクロール: ユーザーがスクロール バーで要素をスクロールするとトリガーされます。
HTML イベントの大部分は、ウィンドウ オブジェクトまたはフォーム コントロールに関連しています。
ブラウザが DOM2 レベルのイベントで HTML イベントをサポートしているかどうかを判断するには、次のコードを使用できます。
var isSupport = document.implementation.hasFeature('HTMLEvents','2.0');
DOM2 レベルのイベントに実装されている場合は true を返します。それ以外の場合は true を返します。 false
var isSupported = document.implementation.hasFeature(“UIEvent”, “3.0”);
dom3 レベルにも同じことが当てはまります。
ロード イベント
ロード イベントは、JavaScript で最も一般的に使用されます。 window オブジェクトの場合、Web ページが完全に読み込まれると、load イベントがトリガーされます。要約すると、HTML には window 要素にアクセスする権限がないため、ウィンドウ上で発生するイベントには body 要素の属性を通じてアクセスできます。
img タグの場合、img タグの src 属性を指定すると、そのloadイベントもトリガーできます。
は次のとおりです。
EventUtil.addHandler(window, “load”, function(){ var image = new Image(); EventUtil.addHandler(image, “load”, function(event){ alert(“Image loaded!”); }); image.src = “smile.gif”; });
IE9 で実行する場合、スクリプト タグ要素など、標準以外の方法でロード イベントをサポートする要素もあります。 、FF、Opera、Chrome、Safari 3.0では、スクリプトが動的に追加され、読み込みが完了すると、スクリプトのloadイベントがトリガーされます。img要素とは異なり、src属性が割り当てられた後にjsファイルの読み込みが開始されます。この要素がドキュメントに追加されました。したがって、イベント ハンドラーの順序は src の割り当てとは関係ありません。
例は次のとおりです。
EventUtil.addHandler(window, “load”, function(){ var script = document.createElement(“script”); script.type = “text/javascript”; EventUtil.addHandler(script, “load”, function(event){ alert(“Loaded”); }); script.src = “example.js”; document.body.appendChild(script); });
IE と Opera は、リンク タグのロード イベントもサポートしています。
アンロード イベント
ロード イベントの逆は、ドキュメントが完全にアンロードされると、このイベントがトリガーされます。典型的な例としては、ブラウザがあるページから別のページに移動するときにこのイベントがトリガーされ、通常、このイベントはメモリを解放し、不必要なメモリ占有を回避するために使用されます。ロード イベントと同様に、アンロード イベントは 2 つの方法、つまり js を使用する方法と HTML 属性を使用する方法で作成できます。
アンロード イベント ハンドラーには特に注意してください。アンロード イベントが発生するため、すべてのオブジェクトが使用できるわけではなく、ページが読み込まれたときにも引き続き使用できるからです。 Dom ノードの位置を操作したり、外観を変更しようとするとエラーが発生します。
サイズ変更イベント
ブラウザウィンドウの長さと高さが変更されると、このイベントがトリガーされます。登録方法はウィンドウオブジェクト上で発生します。最初の 2 つのイベントの登録方法。
window オブジェクトで発生する他のイベントと同様、DOM ブラウザーでのこのイベントのターゲットはドキュメントを参照し、IE8 以前のバージョンのブラウザーでは使用可能な関連属性はありません。
IE safari chrome opera では、ピクセルの値が変更されている限り、サイズ変更イベントがトリガーされます。 FF では、このイベントはサイズ変更操作が停止したときにのみトリガーされます。また、ブラウザを最大化または最小化すると、このイベントがトリガーされます。
スクロール イベント
スクロール イベントはウィンドウ オブジェクトで発生しますが、ページ レベルの要素にも適用されます。混合モードでは、対応する変更は 6c04bd5ca3fcae76e30b72ad730ca86d 要素のscrollLeft属性とscrollTop属性に反映されます。標準モードでは、対応する変更は6a74014ee44f5deb5894267f99b68016要素に反映されます。 、例:
EventUtil.addHandler(window, “scroll”, function(event){ if (document.compatMode == “CSS1Compat”){//标准模式反映在html上。 alert(document.documentElement.scrollTop); } else { alert(document.body.scrollTop); } });
上記は UI イベント ユーザー インターフェイス イベント_javascript スキルの内容です。その他の関連コンテンツについては、PHP 中国語 Web サイト (www.php.cn) に注目してください。