Une brève discussion sur la simulation d'événements Javascript

Les événements sont utilisés pour décrire un moment intéressant spécifique dans une page Web. Comme nous le savons tous, les événements sont généralement déclenchés lorsque l'utilisateur interagit avec le navigateur. En fait, ce n'est pas le cas. temps via Javascript, et ces événements sont liés aux événements créés par le navigateur sont les mêmes. Cela signifie que les événements appropriés apparaîtront et que le navigateur exécutera les gestionnaires d'événements attribués. Cette capacité est très utile lors du test d'applications Web. La spécification DOM niveau 3 fournit des méthodes pour simuler des événements spécifiques. IE9 Chrome FF Opera et Safari prennent tous deux en charge cette méthode. Dans IE8 et les méthodes précédentes, Internet Explorer a sa propre façon de simuler des événements.

Simulation d'événement Javascript

a) Simulation d'événement Dom
Vous pouvez créer un objet événement à tout moment via la méthode createEvent() sur le document. Cette méthode n'accepte qu'un seul paramètre, qui est la chaîne d'événement pour créer l'objet événement. Dans la spécification de niveau DOM2, toutes les chaînes sont au pluriel. Dans le DOM Toutes les chaînes des événements de niveau 3 sont au singulier. Toutes les chaînes sont les suivantes :
UIEvents : les événements universels de l'interface utilisateur, les événements de souris et les événements de clavier sont tous hérités des événements de l'interface utilisateur.
MouseEvents : événements de souris universels, MouseEvent est utilisé sur le niveau 3 du DOM.
MutationEvents : Événement de mutation universel, MutationEvent est utilisé au niveau 3 du DOM.
HTMLEvents : Evénements HTML universels, il n'y a pas d'équivalent au niveau DOM3.
Notez qu'IE9 est le seul navigateur qui prend en charge les événements de clavier au niveau DOM3, mais d'autres navigateurs fournissent également d'autres méthodes disponibles pour simuler des événements de clavier.
Une fois qu'un objet événement est créé, les informations pertinentes de l'événement doivent être initialisées. Chaque type d'événement a une méthode spécifique à initialiser. Une fois l'objet événement créé, l'événement est appliqué à l'événement via dispatchEvent(). sur un nœud dom spécifique afin qu'il prenne en charge cet événement. Cet événement dispatchEvent() prend en charge un paramètre, qui est l'objet événement que vous avez créé.

Recommandations associées : "Tutoriel JavaScript de base"
b) Simulation d'événements de souris
Les événements de souris peuvent être simulés en créant un objet d'événement de souris (souris objet événement), et accordez-lui des informations pertinentes, créez un événement souris en passant une chaîne "MouseEvents" à la méthode createEvent() pour créer un objet événement souris, puis initialisez l'objet événement renvoyé via la méthode iniMouseEvent(), iniMouseEvent ( ) accepte 15 paramètres, les paramètres sont les suivants :
Type string type : le type d'événement à déclencher, tel que 'clic'.
Bulles Type booléen : indique si l'événement doit faire des bulles. Pour la simulation d'événements de souris, cette valeur doit être définie sur true.
Type bool annulable : indique si l'événement peut être annulé pour la simulation d'événement de souris, cette valeur doit être définie sur true.
Vue abstraite : la vue accordée par l'événement. Cette valeur est presque toujours document.defaultView
Type int détaillé : informations supplémentaires sur l'événement. Elle doit généralement être définie par défaut sur 0 lors de l'initialisation.
screenX int type : coordonnée X à partir du côté gauche de l'écran à partir de l'événement
screenY int type : coordonnée y à partir du haut de l'écran à partir de l'événement
clientX int type : coordonnée X à partir du côté gauche de la zone visible de l'événement
clientY int type : La coordonnée y de la distance de l'événement au-dessus de la zone visible
ctrlKey Type booléen : Représente si la touche Ctrol est enfoncée, la valeur par défaut est false.
　altKey Type booléen : représente si la touche alt est enfoncée, la valeur par défaut est false.
　shiftKey Type booléen : représente si la touche Maj est enfoncée, la valeur par défaut est false.
Type booléen MetaKey : représente si la touche méta est enfoncée. La valeur par défaut est false.
　Button int type : représente le bouton de la souris enfoncé, la valeur par défaut est zéro.
　ratedTarget (object) : l'objet associé à l'événement uniquement utilisé lors de la simulation du survol et de la sortie de la souris.

Il convient de noter que les paramètres de initMouseEvent() sont directement mappés à l'objet événement. Les quatre premiers paramètres sont utilisés par le navigateur. Seule la fonction de traitement d'événement utilise d'autres paramètres lorsque l'objet événement est transmis. en tant que paramètre Pour la méthode dispatch(), l'attribut cible se verra automatiquement attribuer une valeur. Voici un exemple,

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

Dans les navigateurs implémentés par DOM, tous les autres événements, y compris dbclick, peuvent être implémentés de la même manière.
c) Simulation d'événements de clavier
Il convient de noter que les événements de clavier ont été retirés des événements de niveau DOM2. Initialement, dans la version préliminaire des événements de niveau DOM2, les événements de clavier étaient inclus. dans le cadre du brouillon. mais a été supprimé de la version finale, FF a implémenté les événements de clavier dans la version brouillon. Il convient de noter que les événements de clavier implémentés dans les événements de niveau DOM3 sont toujours très différents des événements de clavier dans le DOM2. version préliminaire de l'événement de niveau.
La création d'un objet événement clavier dans un événement de niveau dom3 s'effectue via la méthode createEvent() et en passant la chaîne KeyBoardEvent en paramètre. Pour l'objet événement renvoyé, appelez la méthode initKeyBoadEvent() pour l'initialiser. les événements de clavier sont les suivants : Chacun :
Type (chaîne) - Le type d'événement à déclencher, tel que "keydown".
Bulles (Booléen) - Représente si l'événement doit faire des bulles
Annulable. (Boolean) — Représente si l'événement peut être annulé.
　view (AbstractView) — La vue à laquelle l'événement a été accordé. La valeur habituelle est : document.defaultView.
　key (string) — Le code correspondant au. touche enfoncée.
Emplacement (entier) — L'emplacement de la touche enfoncée 0 : clavier par défaut, 1 position à gauche, 2 positions à droite, 3 zones de clavier numérique, 4 zones de clavier virtuel ou 5 contrôleurs de jeu.
　modificateurs (chaîne). ) — Une liste de modificateurs séparés par des espaces.
　repeat (integer) — Le nombre de fois qu'une touche est enfoncée d'affilée.
Veuillez noter que dans l'événement DOM3, l'événement keypress est gaspillé, donc dans le De la manière suivante, vous ne pouvez simuler que les événements keydown et keyup du clavier.

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

Sous FF, vous êtes autorisé à créer des événements de clavier en utilisant document.createEvent('KeyEvents'). La méthode d'initialisation est initKeyEvent(). Cette méthode accepte 10 paramètres. string) — Le type d'événement à déclencher, tel que "keydown".
Bulles (booléen) — Représente si l'événement doit faire des bulles.
Annulable (booléen) — Représente si l'événement peut être annulé 　view (AbstractView) — L'événement est accordé à l'image. La valeur habituelle est : document.defaultView.
　ctrlKey (Boolean) — Représente si la touche Ctrol est enfoncée. La valeur par défaut est false.
　altKey (Boolean) — Représente alt Si la touche est enfoncée. Par défaut false.
　shiftKey (Booléen) — Représente si la touche Maj est enfoncée Par défaut false.
　metaKey (Booléen) — Représente si la touche méta est enfoncée par défaut.
　keyCode (integer ) — Le code de touche correspondant à la touche lorsque la touche est enfoncée ou relâchée. La valeur par défaut est 0
charCode (integer) — Le code ASCII correspondant au caractère de la touche enfoncée. utilisé par l'événement keypress est 0.

D) Simuler d'autres événements
Les événements de souris et de clavier sont les événements les plus couramment simulés dans les navigateurs, mais parfois les événements de mutation et les événements HTML doivent également être simulé. Vous pouvez utiliser createEvent('MutationEvents') pour créer un objet d'événement de mutation. Vous pouvez utiliser initMutationEvent() pour initialiser cet objet d'événement. Les paramètres incluent type, bubbles, Cancelable, RelatedNode, prevValue,newValue, attrName et attrChange. . Oui Utilisez la méthode suivante pour simuler un événement de mutation :

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

Pour les événements HTML, saisissez directement le code.

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

Les événements de mutation et les événements HTML sont rarement utilisés dans les navigateurs car ils sont soumis aux limitations des applications.

E) Événements DOM personnalisés

Dans les événements de niveau DOM3, un type d'événement est défini appelé événement personnalisé. Je l'appelle événement client ne sera pas déclenché par le DOM de manière native, mais sera fourni directement. développeurs qui peuvent créer leurs propres événements, vous pouvez créer votre propre événement client en appelant createEvent('CustomEvent'), en appelant la méthode initCustomEvent() sur l'objet événement renvoyé, en passant quatre paramètres : type, bulles, annulable, détail. ps : Ma compréhension de cette partie est limitée, je donne donc juste quelques conseils ici.

F) Simulation d'événements dans IE
Depuis IE8 et les versions antérieures d'IE, ils imitent tous la façon dont DOM simule les événements : crée des objets d'événement, initialise les informations d'événement, puis déclenche des événements. Bien entendu, le processus utilisé par IE pour effectuer ces étapes est différent. Tout d'abord, différent de la méthode de création d'objets événement dans DOM, IE utilise la méthode document.createEventObject() et n'a aucun paramètre. Il renvoie un objet événement général. Ensuite, vous devez attribuer une valeur à l'objet renvoyé. Objet événement. Pour le moment, IE ne fournit pas de fonction d'initialisation, vous ne pouvez utiliser que des méthodes physiques pour attribuer des valeurs une par une, et enfin appeler la méthode fireEvent() sur l'élément cible avec deux paramètres : le nom de le gestionnaire d'événements et l'objet événement créé. Lorsque la méthode fireEvent est appelée, les attributs srcElement et type de l'objet événement seront automatiquement attribués, et les autres devront être attribués manuellement. Veuillez consulter l'exemple ci-dessous :

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!