Processus Js d'exploitation des événements de souris

Dans les projets réels, nous avons souvent besoin d'utiliser JavaScript pour gérer les événements de souris. Aujourd'hui, je vais donc vous expliquer en détail le processus de gestion des événements de souris avec JS et comment utiliser JS pour gérer les événements de souris.

Notez que onmouseover et onmouseout ne sont exécutés qu'une seule fois, et onmousemove sont exécutés plusieurs fois

Onmousedown Il n'est également exécuté qu'une seule fois, une seule fois pour chaque clic, et ne sera pas déclenché en continu Contrairement à onkeydown et onkeypress, c'est très compliqué ici. Quels sont les événements de la souris ? ? ?

s'affiche comme non défini dans Firefox

et s'affiche comme non défini dans IE

Cependant, l'affichage ci-dessus est normal dans Google. Nous devons maintenant en créer un compatible. Firefox

Il y a une question ici. Dans le console.log(window) séparé, l'attribut d'événement qui y est vu n'est pas défini, mais dans le consoe.log(window.event), il est affiché Pourquoi y a-t-il une telle différence dans l'effet que tu veux ?

C'est là que l'enseignant a du mal, mais je ne sais pas pourquoi

L'analyse ci-dessus est fausse. Dans Google, e et window.event ne prennent en charge que e,. et Google ne prend en charge que window.event

pour participer aux attributs de création dynamique

Puisque les attributs e.pageX et e.pageY ne sont pas pris en charge dans les versions inférieures d'IE (dans les versions inférieures de. IE Affiché au milieu) Utilisez donc la position de la souris de la zone visuelle + la hauteur de courbure de la barre de défilement pour obtenir la position de la souris en fonction de la zone de contenu

Le document ci-dessus est la fenêtre

capture d'événement est juste pour comprendre le contenu, dans IE La fonction

de traitement des événements n'est pas prise en charge dans la fonction

de traitement des événements

Notez que les événements suivent le niveau. 0 événements écraseront les événements précédents. Ceci est très important

La fenêtre peut être omise

Bubbling : des nœuds spécifiques aux nœuds non spécifiques

Maintenant. cela représente la capture, mais cela n'a pas d'effet spécifique. Maintenant, c'est la même chose que le bouillonnementCapture : D'un nœud non spécifique à un nœud spécifique

pour obtenir le même effet que le contexte d'exécution de la fonction. , addEventListener() n'est pas pris en charge dans le

navigateur IE

Ce qui précède est la méthode de désinstallation des événements DOM niveau 0 (la désinstallation des événements, si l'interface est à nouveau actualisée, continuera à exécuter le traitement des événements fonction)

En fait, cela a le même effet que la désinstallation des événements DOM de niveau 0

IE a ajouté les événements de niveau DOM2

La dernière version d'IE, IE11, ne le fait pas prend en charge l'attribut attachEvent

IE désinstalle les événements au niveau DOM2

Voici la fonction d'encapsulation :

Cette façon d'écrire est affichée comme vide dans IE

Cette façon d'écrire signalera directement une erreur dans non-IE

Dans non-IE, elle est affichée sous forme de fonction. Dans IE, elle est affichée comme non définie. L'encapsulation de fonction suivante est basée sur. ce principe La capture d'événement étant rarement utilisée, la quatrième valeur est généralement fausse. Il n'est pas nécessaire de passer un paramètre séparé, il suffit de l'écrire directement

lors de la désinstallation, ne peut pas être utilisée en cas d'événement. fonctions de gestion

Fonctions anonymes

Faites attention à l'ordre d'exécution dans la version IE

DOMContentLoaded Il est maintenant temps de comprendre le contenu et de prêter attention à un concept : la gestion des événements function

Je pense que vous maîtrisez les méthodes après avoir lu ces cas. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php ! Lecture connexe :

Comment rendre la hauteur adaptative DIV

Comment utiliser CSS pour masquer le contenu textuel du fond d'image

La nécessité d'initialiser CSS avant de démarrer un projet front-end

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!