Comment lier et dissocier des événements en JavaScript

Cet article parlera de la liaison et de la dissociation des événements JavaScript. Il a une certaine valeur de référence, j'espère qu'il le pourra. être utile à tout le monde. Aide

Les événements en JavaScript signifient que lorsque nous cliquons sur un élément HTML, un morceau de JavaScript est démarré, déclenchant ainsi le comportement du navigateur. Nous devons souvent utiliser la liaison d'événements. nous partagerons plusieurs détails avec vous. Méthodes courantes de liaison d'événements et comment dissocier

Liaison d'événement

événement onclick

Signifie que l'objet est déclenché lorsque la souris est enfoncée, et qu'un élément ne peut être lié qu'à un seul événement

Lorsque la souris clique sur le carré, sa couleur de fond change

window.onload=function(){
var div=document.getElementsByTagName("div")[0];
div.onclick=function(){
div.style.backgroundColor="pink";
console.log(1);
}
}

Rendu

Avant de cliquer

Après avoir cliqué

addEventListener(event, function, useCapture)

Ajouter un gestionnaire d'événements à l'élément spécifié. Vous pouvez ajouter plusieurs événements, IE9 Les éléments suivants sont incompatibles.

événement : spécifie le nom de l'événement, qui existe sous la forme d'une chaîne.

fonction : fait référence à la fonction exécutée. lorsque l'événement est déclenché

useCapture : valeur booléenne, décrivant l'événement. S'il doit être exécuté lors de l'étape de capture ou de bouillonnement, où true signifie que le gestionnaire d'événements est exécuté lors de l'étape de capture, false signifie que le gestionnaire d'événements est exécuté au stade de bouillonnement, où false signifie la valeur par défaut

 window.onload=function(){
   var div=document.getElementsByTagName("div")[0];
     div.addEventListener('click',function(){
     		div.style.backgroundColor="pink";
     },false);
 }//用addEventListener绑定一个click事件，当点击时使背景颜色改变

Remarque : faites attention lors de l'écriture d'événements N'écrivez pas, écrivez simplement cliquez sur Dans la plupart des cas, écrivez false

. attachEvent(event, function)

Un événement peut être lié à plusieurs gestionnaires, la même fonction. Vous pouvez également lier plusieurs fois, ce qui est unique à IE

événement. : le type d'événement qui doit être lié. Notez qu'il commence par on

fonction : fait référence à la fonction exécutée lorsque l'événement est déclenché.

window.onload=function(){
var div=document.getElementsByTagName("div")[0];
 div.attachEvent('onclick',function(){
 div.style.backgroundColor="pink";
     });
 }

Remarque : le programme. doit être exécuté sous le navigateur IE.

Dissocier l'événement

onclick =false/null

Dissocier l'événement onclick Dissocier par définir sa valeur sur false ou null

window.onload=function(){
   var div=document.getElementsByTagName("div")[0];
     div.onclick=function(){
     		div.style.backgroundColor="pink";
     }
     div.onclick=null;

removeEventListener(event, function, useCapture)

est utilisé pour dissocier l'événement addEventListener. Remarque Lors de la dissociation, la fonction. ne peut pas être écrit directement. La fonction doit être écrite en externe

 window.onload=function(){
   var div=document.getElementsByTagName("div")[0];
     div.addEventListener('click',demo,false);
     function demo(){
     	div.style.backgroundColor="pink";
     }
     div.removeEventListener('click',demo,false);
 }//用addEventListener绑定一个click事件，当点击时使背景颜色改变

detachEvent(event, function)

est utilisé pour détacher l'événement attachEvent. vous ne pouvez pas écrire la fonction directement. Vous devez écrire la fonction en externe

 window.onload=function(){
   var div=document.getElementsByTagName("div")[0];
     div.attachEvent('onclick',demo);
     function demo(){
     	div.style.backgroundColor="pink";
     }
     div.detachEvent('onclick',demo);
     }

Résumé : Ce qui précède est l'intégralité du contenu de cet article. J'espère qu'il sera utile à tout le monde d'apprendre la liaison des événements en JavaScript. .

 

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!