Analyser la différence entre les principes et l'utilisation de Js on et addEventListener

1. Présentez d'abord l'utilisation des deux :
<.>

1. Sur l'utilisation : prenez onclick comme exemple

Le premier type :

obj.onclick = function(){
//do something..
}

Le deuxième type :

obj.onclick= fn;
function fn (){
//do something...
}

Troisième méthode : Lorsque la fonction fn a des paramètres, utilisez une fonction anonyme pour passer les paramètres :

obj.onclick = function(){fn(param)};
function fn(param){
//do something..
}

ne peut pas être écrit comme ceci : Mauvaise écriture : obj.onclick= fn(param):

Parce que la fonction écrite de cette manière sera exécutée immédiatement et n'attendra pas que le clic se déclenche, portez une attention particulière à

Utilisation de addEventListener :

Formulaire :

addEventListener(event,funtionName,useCapture)

Paramètres :

event : type d'événement tel que "clic"
• funtionName : méthode name
• useCapture( Facultatif) : valeur booléenne qui précise si l'événement est exécuté en phase de capture ou de bouillonnement.
• true - le gestionnaire d'événements est exécuté pendant la phase de capture
• false- false- Par défaut. Le gestionnaire d'événements est exécuté dans la phase de bouillonnement

Ecriture :

La première façon :

obj.addEventListener("click",function(){
//do something
}));

La deuxième façon, vous pouvez écrire directement la fonction nom sans paramètres

obj.addEventListener("click",fn,fasle));
function fn(){
//do something..
}

Le troisième type : lorsque la fonction a des paramètres, des fonctions anonymes doivent être utilisées pour transmettre les paramètres

obj.addEventListener("click",function(){fn(parm)},false);

2. entre les deux

1. L'événement on sera écrasé par l'événement on suivant

Prendre onclick comme un exemple :

//obj是一个dom对象，下同//注册第一个点击事件
obj.onclick(function(){
alert("hello world");
});
//注册第二个点击事件
obj.onclick(function(){
alert("hello world too");
});

À la fin, il n'y aura qu'une sortie de boîte contextuelle :

hello world too

2.addEventListener ne sera pas écrasé.

//注册第一个点击事件
obj.addEventListener("click",function(){
alert("hello world");
}));
//注册第二个点击事件
obj.addEventListener("click",function(){
alert("hello world too");
}));

Cela affichera en continu :

hello world
hello world too

3. Notes d'AddEventListener :
1. Remarque spéciale selon laquelle addEventListener n'est pas compatible avec IE9 et versions antérieures. Pour IE9 et versions antérieures, utilisez attachEvent()

obj.attachEvent(event,funtionName);

Paramètres :

event : type d'événement (. doit être écrit comme "onclick "Ajouter devant, c'est différent de addEventListener)

funtionName : nom de la méthode (si vous voulez des paramètres, vous devez également utiliser des fonctions anonymes pour transmettre les paramètres)

4. Collection d'événements :
1. Événement souris :

cliquez sur ( clic)

• dbclick (double-clic)
• mousedown(mouse down)
• mouseout(mouse out)
• mouseover(mouse in)
• mouseup(souris vers le haut)
• mousemove(mouvement de la souris)
• 2. Événements du clavier :

keydown(pression sur une touche)

• keypress(appuyez sur une touche)
• keyup(keyup)
• 3. Événements HTML :
• load (charger la page)
• unload (décharger la page page)
• changer (Changer le contenu)
• faire défiler (faire défiler)
• se concentrer (se concentrer)
• flou (perdre la mise au point)

5. Résumé :
onXXX et addEventListener ajoutent tous deux des écouteurs d'événements aux éléments dom afin qu'ils puissent exécuter les codes et opérations correspondants après le l'événement se produit. Avec eux, nous réalisons l’interaction des pages et des utilisateurs.

Recommandations d'apprentissage associées :

Tutoriel vidéo 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!