Javascript イベントシミュレーションに関する簡単な説明-jsチュートリアル-php.cn

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

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

#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(&#39;MutationEvents&#39;);
　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 サイトの他の関連記事を参照してください。