Eine kurze Diskussion zur Javascript-Ereignissimulation

Ereignisse werden verwendet, um einen bestimmten interessanten Moment auf einer Webseite zu beschreiben. Wie wir alle wissen, werden Ereignisse normalerweise ausgelöst, wenn der Benutzer mit dem Browser interagiert Zeit durch Javascript, und diese Ereignisse beziehen sich auf Die vom Browser erstellten Ereignisse sind dieselben. Das bedeutet, dass die entsprechenden Ereignisse auftauchen und der Browser die zugewiesenen Ereignishandler ausführt. Diese Fähigkeit ist beim Testen von Webanwendungen sehr nützlich. Die DOM-Level-3-Spezifikation bietet Methoden zum Simulieren bestimmter Ereignisse. Sowohl IE9 als auch Chrome FF unterstützen diese Methode.

Javascript-Ereignissimulation

a) Dom-Ereignissimulation
Sie können jederzeit ein Ereignisobjekt über die Methode createEvent() im Dokument erstellen. Diese Methode akzeptiert nur einen Parameter, nämlich die Ereigniszeichenfolge zum Erstellen des Ereignisobjekts. In der DOM2-Ebenenspezifikation liegen alle Zeichenfolgen im Plural vor. Im DOM liegen alle Zeichenfolgen auf Ebene 3 in Singularform vor. Alle Zeichenfolgen lauten wie folgt:
UIEvents: Universelle UI-Ereignisse, Mausereignisse und Tastaturereignisse werden alle von UIEvent auf DOM-Ebene 3 geerbt.
MouseEvents: Universelle Mausereignisse, MouseEvent wird auf DOM-Ebene 3 verwendet.
MutationEvents: Universelles Mutationsereignis, MutationEvent wird auf DOM-Ebene 3 verwendet.
HTMLEvents: Universelle HTML-Ereignisse, es gibt kein Äquivalent auf DOM3-Ebene.
Beachten Sie, dass IE9 der einzige Browser ist, der Tastaturereignisse auf DOM3-Ebene unterstützt. Andere Browser bieten jedoch auch andere verfügbare Methoden zur Simulation von Tastaturereignissen.
Sobald ein Ereignisobjekt erstellt wurde, müssen die relevanten Informationen des Ereignisses initialisiert werden. Jeder Ereignistyp verfügt über eine bestimmte Methode zum Initialisieren. Nachdem das Ereignisobjekt erstellt wurde, wird das Ereignis über „dispatchEvent()“ auf das Ereignis angewendet. Methode. Auf einem bestimmten Dom-Knoten, damit er dieses Ereignis unterstützt. Dieses „dispatchEvent()“-Ereignis unterstützt einen Parameter, nämlich das von Ihnen erstellte Ereignisobjekt.

Verwandte Empfehlungen: „Basic JavaScript Tutorial“
b) Simulation von Mausereignissen
Mausereignisse können durch Erstellen eines Mausereignisobjekts (Mouse (Ereignisobjekt) und geben Sie ihm einige relevante Informationen, erstellen Sie ein Mausereignis, indem Sie eine Zeichenfolge „MouseEvents“ an die Methode createEvent() übergeben, um ein Mausereignisobjekt zu erstellen, und initialisieren Sie dann das zurückgegebene Ereignisobjekt über die Methode iniMouseEvent(), iniMouseEvent () Methode akzeptiert 15 Parameter, die Parameter sind wie folgt:
Typ Zeichenfolgentyp: der Typ des auszulösenden Ereignisses, z. B. „Klick“.
Bubbles Boolescher Typ: Gibt an, ob das Ereignis blasen soll. Für die Simulation von Mausereignissen sollte dieser Wert auf „true“ gesetzt werden.
Abbrechbarer Bool-Typ: Gibt an, ob das Ereignis abgebrochen werden kann. Für die Mausereignissimulation sollte dieser Wert auf „true“ gesetzt werden.
Abstrakte Ansicht anzeigen: Die durch das Ereignis gewährte Ansicht ist fast immer document.defaultView: Dies sollte im Allgemeinen während der Initialisierung auf 0 gesetzt werden.
ScreenX int-Typ: Die X-Koordinate von der linken Seite des Bildschirms aus dem Ereignis
screenY int-Typ: Die Y-Koordinate vom oberen Bildschirmrand aus dem Ereignis
clientX int-Typ: Die X-Koordinate von die linke Seite des sichtbaren Bereichs vom Ereignis
clientY int type: Die y-Koordinate des Ereignisabstands über dem sichtbaren Bereich
ctrlKey Boolescher Typ: Stellt dar, ob die Strg-Taste gedrückt wird, der Standardwert ist false.
　altKey Boolescher Typ: Stellt dar, ob die Alt-Taste gedrückt wird. Der Standardwert ist false.
　shiftKey Boolescher Typ: Stellt dar, ob die Umschalttaste gedrückt wird. Der Standardwert ist false.
MetaKey Boolescher Typ: Stellt dar, ob die Metataste gedrückt wird. Der Standardwert ist false.
　Button-int-Typ: Stellt die gedrückte Maustaste dar, der Standardwert ist Null.
　latedTarget (Objekt): Wird nur beim Simulieren von Mouseover und Mouseout verwendet.

Es ist zu beachten, dass die Parameter von initMouseEvent() direkt dem Ereignisobjekt zugeordnet werden. Die ersten vier Parameter werden vom Browser verwendet. Nur die Ereignisverarbeitungsfunktion verwendet andere Parameter als Parameter Für die Methode „dispatch()“ wird dem Zielattribut automatisch ein Wert zugewiesen. Hier ist ein Beispiel,

　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);

In DOM-implementierten Browsern können alle anderen Ereignisse, einschließlich dbclick, auf die gleiche Weise implementiert werden.
c) Simulation von Tastaturereignissen
Es ist erwähnenswert, dass Tastaturereignisse aus Ereignissen auf DOM2-Ebene entfernt wurden. In der Entwurfsversion der Ereignisse auf DOM2-Ebene waren zunächst Tastaturereignisse enthalten Als Teil des Entwurfs, aber aus der endgültigen Version entfernt, hat FF die Tastaturereignisse in der Entwurfsversion implementiert. Es ist erwähnenswert, dass sich die in DOM3-Level-Ereignissen implementierten Tastaturereignisse immer noch stark von den Tastaturereignissen in DOM2 unterscheiden Level-Event-Entwurfsversion.
Das Erstellen eines Tastaturereignisobjekts in einem Ereignis auf Dom3-Ebene erfolgt über die Methode „createEvent()“ und die Übergabe der Zeichenfolge „KeyBoardEvent“ als Parameter. Rufen Sie für das zurückgegebene Ereignisobjekt die Methode „initKeyBoadEvent()“ auf, um die Parameter zu initialisieren Die Tastaturereignisse lauten wie folgt: Jeder:
Typ (Zeichenfolge) – Der Typ des auszulösenden Ereignisses, z. B. „keydown“.
Bubbles (Boolean) – Gibt an, ob das Ereignis sprudeln soll (Boolean) – Stellt dar, ob das Ereignis abgebrochen werden kann.
　view (AbstractView) – Die Ansicht, der das Ereignis gewährt wurde.
　key (string) – Der entsprechende Code gedrückte Taste.
Position (Ganzzahl) – Die gedrückte Taste Position 0: Standardtastatur, 1 linke Position, 2 rechte Position, 3 numerischer Tastaturbereich, 4 virtueller Tastaturbereich oder 5 Gamecontroller.
　Modifikatoren (Zeichenfolge ) – Eine durch Leerzeichen getrennte Liste von Modifikatoren.
　repeat (integer) – Die Häufigkeit, mit der eine Taste hintereinander gedrückt wird.
Bitte beachten Sie, dass im DOM3-Ereignis das Tastendruckereignis verschwendet wird, also im Auf folgende Weise können Sie nur die Keydown- und Keyup-Ereignisse der Tastatur simulieren.

　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);

Unter FF können Sie Tastaturereignisse erstellen, indem Sie document.createEvent('KeyEvents') verwenden. Diese Methode akzeptiert 10 Parameter. string) – Der Typ des auszulösenden Ereignisses, z. B. „keydown“.

Bubbles (Boolean) – Stellt dar, ob das Ereignis abgebrochen werden soll >　view (AbstractView) – Der übliche Wert ist: document.defaultView.
　ctrlKey (Boolean) – Gibt an, ob die Strg-Taste gedrückt wird.
　altKey (Boolean) – Stellt dar, ob die Taste gedrückt wird.
　shiftKey (Boolean) – Stellt dar, ob die Umschalttaste gedrückt wird.
　metaKey (Boolean) – Stellt dar, ob die Metataste gedrückt wird.
　keyCode (integer) – Der Tastencode, der der Taste entspricht, wenn die Taste gedrückt oder losgelassen wird. Der Standardwert ist 0;
charCode (integer) – Der ASCII-Code, der dem Zeichen der gedrückten Taste entspricht Der vom Tastendruckereignis verwendete Wert ist 0.

D) Andere Ereignisse simulieren

Mausereignisse und Tastaturereignisse sind die am häufigsten simulierten Ereignisse in Browsern, aber manchmal müssen auch Mutationsereignisse und HTML-Ereignisse simuliert werden simuliert. Sie können createEvent('MutationEvents') verwenden, um ein Mutation-Ereignisobjekt zu erstellen. Sie können initMutationEvent() verwenden, um dieses Ereignisobjekt zu initialisieren. Die Parameter umfassen type, bubbles, cancelable, relatedNode, prevValue,
newValue, attrName und attrChange . Ja Verwenden Sie die folgende Methode, um ein Mutationsereignis zu simulieren:

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

Geben Sie für HTML-Ereignisse den Code direkt ein.

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

Mutationsereignisse und HTML-Ereignisse werden in Browsern selten verwendet, da sie Anwendungsbeschränkungen unterliegen.

E) Benutzerdefinierte DOM-Ereignisse
In DOM-Level-3-Ereignissen ist ein Ereignistyp definiert, der als benutzerdefinierte Ereignisse bezeichnet wird. Ich nenne sie Kundenereignisse, die nicht nativ vom DOM ausgelöst werden, sondern direkt bereitgestellt werden Für Entwickler, die ihre eigenen Ereignisse erstellen können, können Sie Ihr eigenes Kundenereignis erstellen, indem Sie createEvent('CustomEvent') aufrufen, die initCustomEvent()-Methode für das zurückgegebene Ereignisobjekt aufrufen und vier Parameter übergeben: Typ, Blasen, abbrechbar, Detail. ps: Mein Verständnis dieses Teils ist begrenzt, daher gebe ich hier nur einige Ratschläge.

F) Ereignissimulation im IE

Ab IE8 und früheren Versionen von IE imitieren sie alle die Art und Weise, wie DOM Ereignisse simuliert: Ereignisobjekte erstellen, Ereignisinformationen initialisieren und dann Ereignisse auslösen. Natürlich ist der Prozess des IE zum Ausführen dieser Schritte anders.
Im Gegensatz zur Methode zum Erstellen von Ereignisobjekten im DOM verwendet der IE zunächst die Methode document.createEventObject() und hat keine Parameter. Als nächstes müssen Sie dem zurückgegebenen Objekt einen Wert zuweisen Derzeit bietet der IE keine Initialisierungsfunktion. Sie können nur physische Methoden verwenden, um Werte einzeln zuzuweisen, und schließlich die Methode fireEvent () für das Zielelement mit zwei Parametern aufrufen: dem Namen von der Event-Handler und das erstellte Event-Objekt. Wenn die Methode fireEvent aufgerufen wird, werden die Attribute srcElement und type des Ereignisobjekts automatisch zugewiesen, die anderen müssen manuell zugewiesen werden. Bitte sehen Sie sich das folgende Beispiel an:

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的事件模拟更容易让人记忆和接受，统一的事件模型可以带来一些便捷。

Das obige ist der detaillierte Inhalt vonEine kurze Diskussion zur Javascript-Ereignissimulation. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!