Introduction aux compétences JavaScript events

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 ;

Utiliser les fonctions de gestion d'événements comme attributs en HTML pour exécuter les fonctions JS ;
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;                     // 删除事件处理程序;

Copier après la connexion

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 ;

// 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