Introduction aux compétences JavaScript events_javascript

Les événements JavaScript sont une série d'opérations provoquées par les utilisateurs accédant à une page Web ;
Par exemple : l'utilisateur clique ; lorsque l'utilisateur effectue certaines opérations, une série de codes sont exécutés

;

1 introduction à l'événement

Les événements sont généralement utilisés pour interagir entre les navigateurs et les opérations des utilisateurs ; ils sont apparus pour la première fois dans IE et Netscape Navigator comme moyen de partager la charge de calcul côté serveur ; La spécification du niveau DOM2 a commencé à essayer de normaliser les événements DOM de manière logique ;
IE9/Firefox/Opera/Safari et Chrome ont tous implémenté la partie principale du module « Événements au niveau DOM2 »
 ; Les navigateurs antérieurs à IE8 utilisent toujours leur modèle d'événement propriétaire ;
JavaScript a trois modèles d'événements : modèle en ligne/modèle de script et modèle DOM2 ;

2 Modèle en ligne (gestionnaire d'événements HTML)

Ce modèle est la manière la plus traditionnelle et la plus simple de gérer les événements ;

Dans le modèle en ligne, le gestionnaire d'événements est un attribut de la balise HTML, utilisé pour gérer les événements spécifiés
 ; Bien que l'inline ait été davantage utilisé au début, il était mélangé avec le HTML et n'était pas séparé du HTML ;

Utilisez la fonction de gestionnaire d'événements comme attribut en HTML pour exécuter du code JS ;

77ec74010cb3406895ed03e5d7b399b0 Exécuter la fonction JS ;
PS : La fonction ne doit pas être placée dans window.onload, sinon elle ne sera pas visible
;

Trois modèles de script (gestionnaire d'événements DOM niveau 0)

// 由于内联模型违反了HTML和JavaScript代码层次分离的原则;
// 我们可以在JavaScript中处理事件,这种处理方式就是脚本模型;
  var input = document.getElementsByTagName('input')[0];     // 得到input对象;
  input.onclick = function(){                  // 匿名函数执行;
    alert('Lee');              
  }
  // PS:通过匿名函数,可以直接触发对应的代码;
  //  也可以通过指定的函数名赋值的方式来执行函数(赋值的函数名不要跟括号);
  input.onclick = box;                      // 把匿名函数赋值给事件处理函数;
  input.onclick = null;                     // 删除事件处理程序;

Quatre fonctions de traitement d'événements

//Les types d'événements que JavaScript peut gérer sont : événements de souris/événements de clavier/événements HTML ;
Fonctions de gestion des événements JavaScript et leur liste d'utilisation
Fonction de gestionnaire d'événements Éléments concernés Quand se produit
onabort image Lorsque le chargement de l'image est interrompu ;
on floute la fenêtre/le cadre/tous les objets du formulaire lorsque le focus s'éloigne de l'objet ;
onchange zone de saisie/zone de sélection/champ de texte Lors de la modification de la valeur d'un élément et de la perte du focus ;
onclick lien/bouton/objet de formulaire/image, etc. Lorsque l'utilisateur clique sur l'objet ;
ondblclick lien/bouton/objet formulaire lorsque l'utilisateur double-clique sur l'objet ;
ondragdrop window Lorsque l'utilisateur glisse et dépose un objet dans la fenêtre du navigateur ;
onError window/frame/all form objets lorsqu'une erreur de syntaxe se produit dans le script ;
onfocus fenêtre/cadre/tous les objets du formulaire Lorsque l'on clique sur la souris ou que le mouvement de la souris est concentré sur la fenêtre ou le cadre ;
onkeydown document/image/link/form lorsque la touche est enfoncée ;
onkeypress document/image/connection/form Lorsque la touche est enfoncée puis relâchée ;
onkeyup document/image/link/form lorsque la clé est relâchée ;
onload body/frameset/image après le chargement du document ou de l'image ;
onunload body/frameset Une fois le document ou le frameset déchargé ;
lien onmouseout Lorsque l'icône supprime le lien ;
onmouseover link Lorsque la souris se déplace sur le lien ;
onmove window Lorsque la fenêtre du navigateur se déplace ;
onreset bouton de réinitialisation du formulaire Cliquez sur le bouton de réinitialisation du formulaire ;
onresize window Lors de la modification de la taille de la fenêtre du navigateur ;
onselect form element Lors de la sélection d'un objet de formulaire ;
onsubmit form Lors de l'envoi du formulaire au serveur ;
// PS : Pour chaque événement, il a sa propre plage et méthode de déclenchement, et le traitement des événements sera invalide

 ;

1. Les événements de souris peuvent être déclenchés par tous les éléments de la page

(1).click : déclenché lorsque l'utilisateur clique sur le bouton de la souris ou appuie sur la touche Entrée
 ; ​ input.onclick = function(){
alert('Lee');
};

(2).dblclick : Déclenché lorsque l'utilisateur double-clique sur le bouton de la souris ;
​ input.ondblclick = function(){
alert('Lee');
>

(3).mousedown : Déclenché lorsque l'utilisateur appuie sur la souris mais ne l'a pas encore fait rebondir
 ; ​ input.onmousedown = function(){
alert('Lee');
>

(4)mouseup : déclenché lorsque l'utilisateur relâche le bouton de la souris ;
​ input.onmouseup = function(){
alert('Lee');
>

(5).mouseover : Déclenché lorsque la souris passe sur un élément
​ input.onmouseover = function(){
alert('Lee');
>

(6).mouseout : Déclenché lorsque la souris sort d'un élément
​ input.onmouseout = function(){
alert('Lee');
>

(7).mousemove : Déclenché lorsque le pointeur de la souris se déplace sur l'élément
​ input.onmousemove = function(){
alert('Lee');
>

2. Événements de clavier

(1).keydown : Déclenché lorsque l'utilisateur appuie sur n'importe quelle touche du clavier. S'il est enfoncé et maintenu enfoncé, il sera déclenché à plusieurs reprises
 ; onkeydown = fonction(){
alert('Lee');
>

(2).keypress : Déclenché lorsque l'utilisateur appuie sur une touche de caractère du clavier. S'il est enfoncé et maintenu enfoncé, il sera déclenché à plusieurs reprises
 ; onkeypress = fonction(){
alert('Lee');
>

(3).keyup : Déclenché lorsque l'utilisateur relâche une touche du clavier ;
onkeyup = fonction(){
alert('Lee');
>

3.Événements HTML

(1).load : Lorsque la page est complètement chargée (y compris toutes les images/fichiers JavaScript/fichiers CSS et autres ressources externes), l'événement de chargement sur la fenêtre sera déclenché ;
window.onload = function(){
alert('Lee');
>

// L'événement load peut également être déclenché sur des images, qu'il s'agisse d'un élément image en DOM ou d'un élément image en HTML
; // Vous pouvez donc spécifier un gestionnaire d'événement onload pour n'importe quelle image en HTML ;
9e9f4c9c4503612e96012bdbf25fae8f
// PS : Les nouveaux éléments d'image ne commencent pas nécessairement à être téléchargés après avoir été ajoutés au document. Tant que l'attribut src est défini, le téléchargement démarre // L'élément 3f1c4e4b6b16bbbd69b2ee476dc4f83a déclenchera également l'événement de chargement afin que les développeurs puissent déterminer si le fichier JavaScript chargé dynamiquement a été chargé

// Contrairement aux images, le téléchargement des fichiers JavaScript ne démarrera qu'une fois l'attribut src de l'élément 3f1c4e4b6b16bbbd69b2ee476dc4f83a défini et l'élément ajouté au document
.

(2).unload : Déclenché lorsque le document est complètement déchargé
// Tant que l'utilisateur passe d'une page à une autre, l'événement de déchargement se produira
; // L'utilisation la plus courante de cet événement est d'effacer les références pour éviter les fuites de mémoire
; ​​ Window.onunload = function(){
alert('Lee');
>
(3).select : Déclenché lorsque l'utilisateur sélectionne une zone de texte (saisie ou zone de texte) dont le contenu change et perd le focus
 ; ​​ input.onselect = fonction(){
alert('Lee');
>
(4).change : déclenché lorsque le contenu de la zone de texte (saisie ou zone de texte) change et perd le focus
 ; ​​ input.onchange = function(){
alert('Lee');
>
(5).focus : déclenché sur la fenêtre et les éléments associés lorsque la page ou l'élément obtient le focus ; cet événement ne bouillonne pas
 ; ​​ input.onfocus = fonction(){
alert('Lee');
>
(6).blur : Déclenché sur la fenêtre et les éléments associés lorsque la page ou l'élément perd le focus ; cet événement ne fera pas de bulle
 ; ​​ input.onblur = function(){
alert('Lee');
>
(7).submit : déclenché sur l'élément ff9c23ada1bcecdd1a0fb5d5a0f18437 lorsque l'utilisateur clique sur le bouton de soumission
 ; Form.onsubmit = function(){
alert('Lee');
>

(8).reset : Déclenché sur l'élément ff9c23ada1bcecdd1a0fb5d5a0f18437 lorsque l'utilisateur clique sur le bouton de réinitialisation
Form.onreset = fonction(){
alert('Lee');
>

(9).resize : Lorsque la fenêtre du navigateur est ajustée à une nouvelle hauteur ou largeur, l'événement de redimensionnement sera déclenché

 ;

// Cet événement est déclenché sur la fenêtre (window) ; maximiser ou réduire la fenêtre du navigateur déclenchera également l'événement de redimensionnement
 ; // IE/Safari/Chrome et Opera déclencheront en permanence l'événement de redimensionnement lorsque le navigateur change
 ; // Firefox ne déclenchera l'événement de redimensionnement que lorsque l'utilisateur arrêtera de redimensionner la fenêtre
​ window.onresize = function(){
alert('Lee');
>

(10).scroll : Déclenché lorsque l'utilisateur fait défiler l'élément de la barre de défilement
​ window.onscroll = function(){
alert('Lee');
>