Il existe trois manières de gérer les événements JavaScript : 1. Gestionnaire d'événements HTML, ajoutez le gestionnaire d'événements directement dans le code HTML, la syntaxe est "<element event=event function...>" 2. Gestionnaire d'événements de niveau DOM0, pour le objet spécifié Pour ajouter un traitement d'événements, la syntaxe est "element object.event=function(){...}" ; 3. Les gestionnaires d'événements de niveau DOM2 sont également ajoutés à des objets spécifiques et sont principalement utilisés pour gérer les opérations de spécification et suppression des gestionnaires d'événements.
L'environnement d'exploitation de ce tutoriel : système Windows 10, JavaScript version 1.8.5, ordinateur Dell G3.
3 façons d'utiliser les gestionnaires d'événements Javascript
Lorsqu'un événement se produit, nous devons le gérer. Il existe trois méthodes principales de gestionnaires d'événements Javascript :
1. Gestionnaire d'événements HTML
Autrement dit, nous ajoutons des gestionnaires d'événements directement dans le code HTML, comme le code suivant :
<input id="btn" value="Button" type="button" onclick="showmsg();"> <script> function showmsg(){ alert("Gestion des événements ajoutés par HTML");A partir du code ci-dessus, nous pouvons voir que le traitement des événements est directement imbriqué dans l'élément. Cela pose un problème : le couplage entre le code HTML et js est trop fort. Si un jour vous souhaitez changer le showmsg en js, alors pas seulement. devez-vous le modifier en js, vous devez également le modifier en html. Nous pouvons accepter une ou deux modifications, mais lorsque votre code atteint le niveau de 10 000 lignes, la modification nécessitera donc beaucoup de temps et d'argent. , nous ne recommandons pas cette méthode.
2. Gestionnaire d'événements DOM niveau 0
Autrement dit, pour ajouter un traitement d'événement pour l'objet spécifié, regardez le morceau de code suivant :
<input id="btn" value="Button" type="button"> <script> var btn= document.getElementById("btn.onclick=function(){ alert("Traitement des événements ajouté au niveau DOM" ); } btn.onclick=null;//Si vous souhaitez supprimer l'événement click de btn, définissez-le simplement sur null</script>À partir du code ci-dessus, nous pouvons voir que par rapport aux gestionnaires d'événements HTML, aux événements DOM de niveau 0, le couplage entre le code HTML et le code js a été considérablement réduit. Cependant, les programmeurs intelligents ne sont toujours pas satisfaits et espèrent trouver un moyen plus simple de résoudre ce problème. Examinons la troisième façon de résoudre ce problème.
3. Gestionnaire d'événements au niveau DOM2
DOM2 ajoute également des gestionnaires d'événements à des objets spécifiques, mais implique principalement deux méthodes pour gérer les opérations de spécification et de suppression des gestionnaires d'événements : addEventListener() et removeEventListener(). Ils reçoivent tous trois paramètres : le nom de l'événement à gérer, la fonction de gestionnaire d'événement et une valeur booléenne (si l'événement doit être géré dans la phase de capture), regardez le morceau de code suivant :
<input id="btn" value="Button" type="button"> <script> var btn=document.getElementById("btn"); btn.addEventListener("click",showmsg,false);//Ici, nous are Définissez la dernière valeur sur false, c'est-à-dire qu'elle ne sera pas traitée lors de la phase de capture. De manière générale, le traitement de bouillonnement a une meilleure compatibilité dans divers navigateurs function showmsg(){ alert("Gestionnaire d'événements ajouté au niveau DOM" }) btn.removeEventListener ("click",showmsg,false);//Si vous souhaitez supprimer cet événement, transmettez simplement les mêmes paramètres</script>Ici, nous pouvons voir que lors de l'ajout et de la suppression de traitements d'événements, la dernière méthode est plus directe et la plus simple. Cependant, Ma Haixiang rappelle à tous que lors du traitement de l'événement de suppression, les paramètres transmis doivent être cohérents avec les paramètres précédents, sinon la suppression sera invalide !
Élargissez vos connaissances :
Le flux d'événements décrit l'ordre dans lequel les événements sont reçus sur une page. Au début du développement des navigateurs, les deux principaux fabricants de navigateurs, IE et Netscape, étaient en désaccord, ce qui a conduit à une situation frustrante. le flux des événements était complètement différent. C'est ce que nous connaissons : le bouillonnement d'événements d'IE, la capture d'événements de Netscape. Prenons d’abord une photo et examinons brièvement la structure :
1. L’événement bouillonne
Le bouillonnement d'événements signifie que l'événement est initialement reçu par l'élément le plus spécifique (le nœud avec le niveau d'imbrication le plus profond dans le document), puis se propage vers le nœud le moins spécifique (le document). Prenez l'image ci-dessus pour illustrer que lorsque l'on clique sur la partie du texte, elle est d'abord reçue par l'élément au niveau du texte, puis propagée étape par étape vers la fenêtre, c'est-à-dire le processus de 6-7-8-9-10. est exécuté.
2. Capture d'événement
La capture d'événement signifie que l'événement est reçu en premier par le nœud le moins spécifique, et que le nœud le plus spécifique reçoit l'événement en dernier. De même, dans le modèle ci-dessus, lorsque l'on clique sur la partie de texte, elle est d'abord reçue par la fenêtre puis propagée étape par étape à l'élément de texte, c'est-à-dire que le processus 1-2-3-4-5 est exécuté.