Maison > interface Web > js tutoriel > le corps du texte

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

coldplay.xixi
Libérer: 2020-07-13 17:22:47
avant
2572 Les gens l'ont consulté

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..
}
Copier après la connexion

Le deuxième type :

obj.onclick= fn;
function fn (){
//do something...
}
Copier après la connexion

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..
}
Copier après la connexion

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)
Copier après la connexion

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
}));
Copier après la connexion

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

obj.addEventListener("click",fn,fasle));
function fn(){
//do something..
}
Copier après la connexion

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);
Copier après la connexion

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");
});
Copier après la connexion

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


hello world too
Copier après la connexion

2.addEventListener ne sera pas écrasé.

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

Cela affichera en continu :


hello world
hello world too
Copier après la connexion

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);
Copier après la connexion

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!

Étiquettes associées:
js on
source:jb51.net
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal