Javascript イベントのシミュレーション_JavaScript スキルに関する簡単な説明

これは、適切なイベントがバブルアップし、ブラウザーが割り当てられたイベント ハンドラーを実行することを意味します。この機能は、Web アプリケーションをテストするときに非常に役立ちます。DOM レベル 3 仕様では、特定のイベントをシミュレートするメソッドが提供されています。IE8 およびそれ以前のメソッドでは、IE ブラウザーはイベントをシミュレートする独自の方法を備えています。 a) Dom イベント シミュレーション
ドキュメントの createEvent() メソッドを通じて、いつでもイベント オブジェクトを作成できます。このメソッドは、DOM2 でイベントを作成する必要があるパラメーターを 1 つだけ受け取ります。 DOM レベル 3 イベントでは、すべての文字列が単数形になります。
UIEvents: 一般的な UI イベント、マウス イベント、およびキーボード イベントはすべて UI イベントから継承されます。 UIEvent は DOM レベル 3 で使用されます。
MouseEvents: ユニバーサル マウス イベント。MouseEvent は DOM レベル 3 で使用されます。
MutationEvents: ユニバーサル突然変異イベント。MutationEvent は DOM レベル 3 で使用されます。
HTMLEvents: ユニバーサル HTML イベント。DOM3 レベルでは同等のものはありません。
IE9 は DOM3 レベルのキーボード イベントをサポートする唯一のブラウザですが、他のブラウザもキーボード イベントをシミュレートするために利用できる他の方法を提供していることに注意してください。
イベント オブジェクトが作成されたら、イベントの関連情報を初期化する必要があります。イベント オブジェクトの作成後、イベントはdispatchEvent()を通じてイベントに適用されます。このイベントをサポートするために、特定の dom ノード上でメソッドを実行します。このdispatchEvent()イベントは、作成したイベントオブジェクトである1つのパラメータをサポートします。
b) マウス イベント シミュレーション
マウス イベント オブジェクト (マウス イベント オブジェクト) を作成し、それに関連する情報を付与することでマウス イベントをシミュレートできます。文字列を createEvent() メソッドに渡してマウス イベントを作成します。 " を使用してマウス イベント オブジェクトを作成し、返されたイベント オブジェクトを iniMouseEvent() メソッドで初期化します。iniMouseEvent() メソッドは 15 個のパラメータを受け取ります。パラメータは次のとおりです:
type string type: 対象となるイベントのタイプ'click' などのトリガー。
Bubbles ブール型: イベントをバブルするかどうかを示します。マウス イベント シミュレーションの場合、この値は true に設定する必要があります。
Cancelable bool 型: イベントをキャンセルできるかどうかを示します。マウス イベント シミュレーションの場合、この値は true に設定する必要があります。
ビューの抽象ビュー: イベントによって付与されるビュー。ほとんどの場合、この値は document.defaultView です。
詳細 int 型: 通常、初期化中にデフォルトで 0 に設定されます。
ScreenX int 型: イベントからの画面左側からの X 座標
screenY int 型: イベントからの画面上部からの y 座標
clientX int 型: からの X 座標イベントからの可視領域の左側
clientY int 型: 可視領域の上のイベント距離の y 座標
ctrlKey Boolean 型: Ctrl キーが押されているかどうかを表します。デフォルトは false です。
altKey ブール型: alt キーが押されたかどうかを表し、デフォルトは false です。
shiftKey ブール型: Shift キーが押されたかどうかを表し、デフォルトは false です。
MetaKey ブール型: メタ キーが押されたかどうかを表します。デフォルトは false です。
Button int 型: 押されたマウスボタンを表します。デフォルトは 0 です。
relationTarget (object): マウスオーバーとマウスアウトをシミュレートする場合にのみ使用されます。

initMouseEvent() のパラメーターは、イベント オブジェクトが渡されるときにブラウザーによってのみ使用されることに注意してください。パラメータとしてdispatch()メソッドの場合、ターゲット属性に値が自動的に割り当てられます。以下は例です。

コードをコピー コードは次のとおりです。

var btn = document.getElementById( "myBtn");
var イベント = document.createEvent("MouseEvents");
events.initMouseEvent("click", true, true, document.defaultView, 0, 0, 0, 0 , 0,false , false, false, false, 0, null);
btn.dispatchEvent(event);
DOM 実装ブラウザでは、dbclick を含む他のすべてのイベントも同じ方法で実装できます。
c) キーボード イベント シミュレーション
キーボード イベントが DOM2 レベル イベントの外に移動されたことは注目に値します。当初、DOM2 レベル イベントのドラフト バージョンでは、キーボード イベントがドラフトの一部として含まれていました。しかし、最終バージョンではそれらは移動され、FF はドラフト バージョンでキーボード イベントを実装しました。DOM3 レベルのイベントに実装されたキーボード イベントは、DOM2 レベルのイベントのドラフト バージョンのキーボード イベントとは依然として大きく異なることに注意してください。
dom3 レベルのイベントでキーボード イベント オブジェクトを作成するには、createEvent() メソッドを使用し、返されたイベント オブジェクトの KeyBoardEvent 文字列を初期化するために initKeyBoadEvent() メソッドを呼び出します。キーボード イベントは次のとおりです:
Type (文字列) - 「keydown」など、トリガーされるイベントのタイプ。
Bubbles (Boolean) - イベントをバブルするかどうかを表します。 (Boolean) — イベントをキャンセルできるかどうかを表します。
view (AbstractView) — 通常、値は次のとおりです: document.defaultView。
の位置 (整数) — 押されたキーの位置。0: デフォルトのキーボード、1 つの左位置、2 つの右位置、3 つの数値キーボード領域、4 つの仮想キーボード領域、または 5 つのゲーム コントローラー。 (文字列) — スペースで区切られた修飾子リスト
繰り返し (整数) — キーが連続して押された回数
DOM3 イベントでは、keypress イベントが無駄になることに注意してください。次の方法では、キーボード上のキーダウン イベントとキーアップ イベントのみをシミュレートできます。

コードをコピー コードは次のとおりです。 var textbox = document.getElementById("myTextbox "), イベント;

if (document.implementation.hasFeature("KeyboardEvents", "3.0")){

イベント = document.createEvent("KeyboardEvent");
event.initKeyboardEvent("keydown" , true, true, document.defaultView, "a",0, "Shift", 0);
}
textbox.dispatchEvent(event);
FF では、document.createEvent('KeyEvents') を使用してキーボード イベントを作成できます。このメソッドは 10 個のパラメーターを受け取ります。
type (string) — イベントのタイプ。
bubbles (ブール値) — イベントをバブルするかどうかを表します。
ビュー (AbstractView) —通常の値は次のとおりです: document.defaultView.
ctrlKey (ブール値) — Ctrl キーが押されたかどうかを表します。デフォルトは false です。
は false です。
は false です。
は false です。
は false です。 🎜> keyCode (整数) — キーが押されたか、キーが放されたときのキー コード。デフォルトは 0 です。
CharCode (整数) — 押されたキーの文字に対応する ASCII コード。キー押下イベントは 0 です。
D) 他のイベントをシミュレートする
ブラウザーで最も一般的にシミュレートされるイベントはマウス イベントとキーボード イベントですが、場合によってはミューテーション イベントや HTML イベントもシミュレートする必要があります。 createEvent('MutationEvents') を使用して、ミューテーション イベント オブジェクトを作成できます。 initMutationEvent() を使用して、このイベント オブジェクトを初期化できます。パラメーターには、type、bbles、cancelable、relationalNode、prevValue、
newValue、attrName、および attrChange が含まれます。はい 次のメソッドを使用して、ミューテーション イベントをシミュレートします:
varevent = document.createEvent('MutationEvents');
event.initMutationEvent("DOMNodeInserted", true, false, someNode, "","", "" ,0);
Target.dispatchEvent(event);
HTML イベントの場合は、コードを直接入力します。
varevent = document.createEvent("HTMLEvents");
event.initEvent("focus", true, false);
target.dispatchEvent(event);アプリケーションに制限がかかるため、ブラウザーではほとんど使用されません。
E) カスタマイズされた DOM イベント
DOM3 レベルのイベントでは、カスタム イベントと呼ばれるイベントの種類が定義されています。顧客イベントは、DOM によってネイティブにトリガーされるのではなく、直接提供されます。独自のイベントを作成できる開発者は、 createEvent('CustomEvent') を呼び出し、返されたイベント オブジェクトで initCustomEvent() メソッドを呼び出し、4 つのパラメーター ( type 、 bubbles 、 cancelable 、detail ) を渡すことで、独自の顧客イベントを作成できます。 ps: この部分についての私の理解は限られているので、ここではいくつかのアドバイスをするだけです。
F) IE でのイベント シミュレーション
IE8 およびそれ以前のバージョンの IE では、DOM がイベントをシミュレートする方法 (イベント オブジェクトの作成、イベント情報の初期化、イベントのトリガー) を模倣しています。もちろん、これらの手順を完了する IE のプロセスは異なります。
まず、DOM でイベント オブジェクトを作成する方法とは異なり、IE は document.createEventObject() メソッドを使用し、パラメーターを持ちません。次に、返されたイベント オブジェクトに値を割り当てる必要があります。現時点では、IE は初期化関数を提供していません。物理メソッドを使用して値を 1 つずつ割り当て、最後に 2 つのパラメーターを指定してターゲット要素の fireEvent() メソッドを呼び出すことしかできません。イベント ハンドラーと作成されたイベント オブジェクト。 fireEvent メソッドが呼び出されると、イベント オブジェクトの srcElement 属性と type 属性が自動的に割り当てられ、その他は手動で割り当てる必要があります。次の例を参照してください:

コードをコピー コードは次のとおりです:

var btn = document.getElementById ("myBtn");

var event = document.createEventObject();
event.screenY = 0; > event.ctrlKey = false;
event.button = 0; "onclick" ,event);


この例では、イベント オブジェクトを作成し、イベント オブジェクトにいくつかの情報を指定して初期化します。イベント オブジェクトの場合、これらの属性値は順序付けされていません。イベント ハンドラーに対応するハンドラー関数のみがそれらを使用するため、それほど重要ではありません。汎用イベント オブジェクトはあらゆる種類のイベントによってトリガーできるため、マウス イベント、キーボード イベント、またはその他のイベントのイベント オブジェクトを作成することに違いはありません。
Dom のキーボード イベント シミュレーションでは、対応するイベント ハンドラーがトリガーされた場合でも、キー押下シミュレーション イベントの結果がテキスト ボックスに文字として表示されないことに注意してください。
個人的には、DOM イベント シミュレーションと比較して、IE のイベント シミュレーションの方が覚えやすく受け入れられやすいと感じています。統一されたイベント モデルはある程度の利便性をもたらします。