Cet article résume les événements courants de JS DOM pour tout le monde, et les amis intéressés peuvent s'y référer.
clic clic double clic double-clic menu contextuel clic droit survol de la souris la souris survole l'élément, il est recommandé d'utiliser mouseenter au lieu de mouseout la souris quitte l'élément, il est recommandé d'utiliser mouseleave au lieu de mouseenter la souris survole l'élément mouseleave la souris quitte l'élément mousedown bouton de la souris appuyer mouseup bouton de la souris soulever mousemove mouvement de la souris
keydown clavier bouton enfoncé keyup clavier bouton levé touche clavier bouton enfoncé, utilisé pour saisir les touches de caractère
1. Quels éléments peut-on écouter les événements du clavier ?
① document
② Éléments pouvant obtenir le focus (contrôles de formulaire, en particulier les éléments d'entrée)
2. Quelle est la différence entre une touche enfoncée et une pression sur une touche ?
① keydown peut être déclenché en appuyant sur toutes les touches, et il ne peut pas faire la distinction entre les touches majuscules et minuscules.
② La pression sur une touche ne peut être déclenchée que lorsque la touche qui peut saisir des caractères est enfoncée, et les touches peuvent être sensibles à la casse.
3. Comment savoir sur quel bouton vous avez appuyé ?
Utilisez les attributs de l'objet événement :
evnet.keyCode obtient la valeur ascii correspondant à l'
événement clé, qui est la même que keyCode
event.key obtient la valeur de caractère de la clé.
chargement de l'événement de document sera déclenché lorsque tout ce qui se trouve dans la page est chargé. Vous pouvez écouter la fenêtre ou l'élément de corps. DOMContentLoaded sera déclenché lorsque tous les éléments de la page sont chargés. Vous pouvez écouter la fenêtre ou le document. ne peut utiliser addEventListener que pour écouter l'événement avant le déchargement. La différence entre l'événement de chargement et l'événement DOMContentLoaded qui est déclenché lorsque la page Web est fermée
:
① L'événement de chargement n'est déclenché qu'une fois que tout ce qui se trouve dans la page est chargé, y compris les éléments et les éléments externes. ressources.
② L'événement DOMContentLoaded peut être déclenché lorsque tous les éléments de la page sont chargés, à l'exclusion des ressources externes.
submit est déclenché lorsque le formulaire est soumis. Cet événement écoute l'élément du formulaire. la réinitialisation est déclenchée lorsque le formulaire est réinitialisé. Cet événement écoute le focus de l'élément de formulaire. Le focus est déclenché lorsque le contrôle de formulaire perd le focus. Le contenu de la zone de saisie ou du champ de texte est sélectionné. .changement Pour la zone de saisie, il ne sera déclenché que lorsque le contenu change et que le focus est perdu ; convient pour sélectionner
chargement d'un événement d'image téléchargement du fichier image erreur terminée échec de chargement de l'image
redimensionnent la fenêtre et les changements de taille de la fenêtre défilent. surveille la fenêtre ou les éléments avec des corps de défilement, déclenchés lorsque le contenu de la page ou de l'élément défile.
Définissez le premier paramètre formel sur la fonction de rappel de l'événement pour obtenir l'objet événement.
Différents types d'événements obtiennent différents types d'objets Event.
offsetX / offsetY Obtenir la position des coordonnées de la souris sur l'élément cible clientX / clientY Obtenir la position des coordonnées de la souris sur la fenêtre pageX / pageY Obtenir la position des coordonnées de la souris sur la page screenX / screenY Obtenir la position des coordonnées de la souris sur l'écran Le bouton de position des coordonnées sur le bouton indique quel bouton de la souris a été enfoncé, 0 : bouton gauche ; 1 : bouton du milieu ; 2 : bouton droit
keyCode obtient la valeur du code correspondant au bouton qui est la même que keyCode key Récupère la valeur du caractère correspondant à la clé
type Récupère le nom de l'événement timeStamp Récupère le nombre de millisecondes à partir du déclenchement de l'événement target Récupère l'élément cible stopPropagation() Empêche l'événement de bouillonner PreventDefault() bloque le comportement par défaut du navigateur
en exécutant event.stopPropagation() dans la fonction de rappel de l'événement pour empêcher le bouillonnement.
Cliquer sur le lien hypertexte pour soumettre et réinitialiser le formulaire de saut, cliquer avec le bouton droit pour faire apparaître le menu système, etc...
appelez event.preventDefault() dans la fonction de rappel de l'événement pour empêcher le comportement par défaut.
Remarque : Si vous utilisez la deuxième méthode pour écouter les événements,
return falsedans la fonction de rappel peut également empêcher le comportement par défaut.
événement délégué d'événement écoute l'élément ancêtre, détermine l'élément cible et effectue les opérations pertinentes si l'élément cible remplit les conditions.
Avantages de la délégation d'événements :
Pour écouter le même événement sur un grand nombre d'éléments, utiliser la délégation d'événements est plus efficace que de parcourir et d'écouter un par un.
L'utilisation de la délégation d'événements permet à de nouveaux éléments de répondre aux événements.
Recommandations associées : [Tutoriel vidéo JavaScript]
Ce qui précède est le dernier résumé des événements JavaScript DOM courants ! Pour plus de détails, veuillez prêter attention aux autres articles connexes sur le site Web php chinois !
