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

イベントは、Web ページ内の特定の興味深い瞬間を記述するために使用されます。ご存知のとおり、イベントは通常、ユーザーがブラウザーを操作するときにトリガーされます。実際には、そうではありません。特定のイベントは、いつでもトリガーできます。これらのイベントは、ブラウザによって作成されるイベントと同じです。これは、適切なイベントがバブルアップし、ブラウザーが割り当てられたイベント ハンドラーを実行することを意味します。この機能は、Web アプリケーションをテストするときに非常に役立ちます。DOM レベル 3 仕様では、特定のイベントをシミュレートするメソッドが提供されています。IE9 chrome FF Opera および Safari は、このメソッドをサポートしています。IE8 以前のメソッドでは、Internet Explorer にはイベントをシミュレートする独自の方法があります。

#JavaScript イベント シミュレーション

a)Dom イベント シミュレーションイベント オブジェクトは、ドキュメント上の createEvent() メソッドを通じていつでも作成できます。このメソッドは、作成されるイベント オブジェクトのイベント文字列である 1 つのパラメータのみを受け入れます。DOM2 レベルの仕様では、すべての文字列は複数形です。 DOM レベル 3 イベントのすべての文字列は単数形です。すべての文字列は次のとおりです:
UIEvents: ユニバーサル UI イベント。マウス イベントとキーボード イベントはすべて UI イベントから継承されます。UIEvent は DOM レベル 3 で使用されます。 。
MouseEvents: 一般的なマウス イベント。MouseEvent は DOM レベル 3 で使用されます。
MutationEvents: ユニバーサル突然変異イベント。MutationEvent は DOM レベル 3 で使用されます。
HTMLEvents: ユニバーサル HTML イベント。DOM3 レベルでは同等のものはありません。
DOM3 レベルのキーボード イベントをサポートするブラウザは ie9 だけですが、他のブラウザもキーボード イベントをシミュレートするために利用できる他の方法を提供していることに注意してください。
イベント オブジェクトが作成されたら、イベントの関連情報を初期化する必要があります。イベントの種類ごとに、初期化する特定のメソッドがあります。イベント オブジェクトが作成された後、イベントは、dispatchEvent() を通じてイベントに適用されます。このイベントをサポートするために、特定の dom ノード上でメソッドを実行します。このdispatchEvent()イベントは、作成したイベントオブジェクトである1つのパラメータをサポートします。

関連する推奨事項: 「

JavaScript 基本チュートリアル 」
b) マウス イベントのシミュレーション マウス イベントは、マウス イベント オブジェクト (マウス) を作成することでシミュレートできます。イベント オブジェクト) を取得し、関連情報を付与し、文字列「MouseEvents」を createEvent() メソッドに渡してマウス イベント オブジェクトを作成し、返されたイベント オブジェクトを iniMouseEvent() メソッド iniMouseEvent を通じて初期化します。 ( ) メソッドは 15 個のパラメータを受け入れます。パラメータは次のとおりです:
type string type: 「クリック」など、トリガーされるイベントのタイプ。
Bubbles ブール型: イベントをバブルするかどうかを示します。マウス イベント シミュレーションの場合、この値は true に設定する必要があります。
Cancelable bool 型: イベントをキャンセルできるかどうかを示します。マウス イベント シミュレーションの場合、この値は true に設定する必要があります。
view abstract view: イベントによって付与されるビュー。この値はほとんどの場合 document.defaultView.
detail 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 です.
relativeTarget (オブジェクト): イベントの関連オブジェクト. マウスオーバーとマウスアウトをシミュレートする場合にのみ使用されます。

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

　var btn = document.getElementById(“myBtn”);
　var event = document.createEvent(“MouseEvents”);
　event.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 (string) - 「keydown」など、トリガーされるイベントのタイプ
Bubbles (Boolean) - イベントがバブルするかどうかを表します。 (Boolean) - イベントをキャンセルできるかどうかを表します
view (AbstractView) - イベントが許可されたビュー 通常、値は次のとおりです: document.defaultView.
key (string) - に対応するコード押されたキー。
位置 (整数) — 押されたキー 位置。0: デフォルトのキーボード、1 つの左位置、2 つの右位置、3 つの数値キーボード領域、4 つの仮想キーボード領域、または 5 つのゲーム コントローラー。
修飾子 ( string) — 修飾子のスペースで区切られたリスト .
repeat (integer) — キーが連続して押された回数。
DOM3 イベントでは、keypress イベントが無駄になることに注意してください。次の方法では、キーボードのキーダウン イベントとキーアップ イベントのみをシミュレートできます。

　var textbox = document.getElementById(“myTextbox”),event;
　　　　if (document.implementation.hasFeature(“KeyboardEvents”, “3.0”)){
　　　　　　event = document.createEvent(“KeyboardEvent”);
　　　　　　event.initKeyboardEvent(“keydown”, true, true, document.defaultView, “a”,0, “Shift”, 0);
　　　　}
　　　　textbox.dispatchEvent(event);

FF では、 document.createEvent('KeyEvents') を使用してキーボード イベントを作成できます。初期化メソッドは initKeyEvent() です。このメソッドは 10 個のパラメータを受け入れます。

Type ( string) — 「keydown」など、トリガーされるイベントのタイプ
Bubbles (Boolean) — イベントをバブルするかどうかを表します
Cancelable (Boolean) — イベントをキャンセルできるかどうかを表します
view (AbstractView) — イベントが画像に付与されます。通常の値は次のとおりです: document.defaultView.
ctrlKey (Boolean) — Ctrl キーが押されたかどうかを表します。デフォルトは false.
altKey (Boolean) — alt キーが押されているかどうかを表します。デフォルト false.
shiftKey (Boolean) — シフト キーが押されているかどうかを表します。デフォルト false.
metaKey (Boolean) — メタ キーが押されているかどうかを表します。デフォルトは false。
keyCode (integer ) — キーが押されたとき、または離されたときのキーに対応するキーコード。デフォルトは 0;
charCode (integer) — 押されたキーの文字に対応する ASCII コード。デフォルトkeypress イベントによって使用されるのは 0 です。

D) 他のイベントをシミュレートするマウス イベントとキーボード イベントはブラウザーで最も一般的にシミュレートされるイベントですが、場合によってはミューテーション イベントや HTML イベントもシミュレートする必要があります。シミュレートした。 createEvent('MutationEvents') を使用して、ミューテーション イベント オブジェクトを作成できます。initMutationEvent() を使用して、イベント オブジェクトを初期化できます。パラメーターには、type、bbles、cancelable、relationalNode、prevValue、
newValue、attrName、および attrChange が含まれますはい 次の方法を使用して、突然変異イベントをシミュレートします:

　var event = document.createEvent('MutationEvents');
　event.initMutationEvent(“DOMNodeInserted”, true, false, someNode, “”,””,””,0);
　target.dispatchEvent(event);

HTML イベントの場合は、コードを直接入力します。

　var event = document.createEvent(“HTMLEvents”);
　event.initEvent(“focus”, true, false);
　target.dispatchEvent(event);

ミューテーション イベントと HTML イベントは、アプリケーションの制限を受けるため、ブラウザーではほとんど使用されません。

E) カスタマイズされた DOM イベント
DOM3 レベルのイベントでは、カスタム イベントと呼ばれるイベントのタイプが定義されています。私はそれを顧客イベントと呼びます。顧客イベントは DOM によってネイティブにトリガーされるのではなく、直接提供されます独自のイベントを作成できる開発者は、 createEvent('CustomEvent') を呼び出し、返されたイベント オブジェクトで initCustomEvent() メソッドを呼び出し、4 つのパラメーター ( type 、 bubbles 、 cancelable 、detail ) を渡すことで、独自の顧客イベントを作成できます。 。 ps: この部分についての私の理解は限られているので、ここではいくつかのアドバイスをするだけです。

F) IE でのイベント シミュレーションIE8 およびそれ以前のバージョンの IE では、DOM がイベントをシミュレートする方法 (イベント オブジェクトの作成、イベント情報の初期化、イベントのトリガー) がすべて模倣されています。もちろん、これらの手順を完了する IE のプロセスは異なります。
まず第一に、IE は dom でイベント オブジェクトを作成する方法とは異なり、document.createEventObject() メソッドを使用しており、パラメーターはありません。一般的なイベント オブジェクトを返します。次に、イベント オブジェクトに値を代入する必要があります。返されたイベント オブジェクト。現時点では、IE は初期化関数を提供していません。物理メソッドを使用して値を 1 つずつ割り当て、最後に 2 つのパラメーターを指定してターゲット要素の fireEvent() メソッドを呼び出すことしかできません。イベント ハンドラーと作成されたイベント オブジェクトの。 fireEvent メソッドが呼び出されると、イベント オブジェクトの srcElement 属性と type 属性が自動的に割り当てられ、その他は手動で割り当てる必要があります。次の例を参照してください:

var btn = document.getElementById(“myBtn”);
　　var event = document.createEventObject();
　　event.screenX = 100;
　　event.screenY = 0;
　　event.clientX = 0;
　　event.clientY = 0;
　　event.ctrlKey = false;
　　event.altKey = false;
　　event.shiftKey = false;
　　event.button = 0;
　　btn.fireEvent(“onclick”, event);

　　这个例子创建了一个事件对象，之后通过一些信息初始化该事件对象，注意事件属性的赋值是无序的，对于事件对象来说这些属性值不是很重要，因为只有事件句柄对应的处理函数（event handler）会用到他们。对于创建鼠标事件、键盘事件还是其他事件的事件对象之间是没有区别的，因为一个通用的事件对象，可以被任何类型的事件触发。
　　值得注意的是，在Dom的键盘事件模拟中，对于一个keypress模拟事件的结果不会作为字符出现在textbox中，即使对应的事件处理函数已经触发。
　　与DOM事件模拟相比，个人觉得IE的事件模拟更容易让人记忆和接受，统一的事件模型可以带来一些便捷。

以上がJavascript イベントシミュレーションに関する簡単な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。