Maison > Article > interface Web > Exemples pour expliquer les compétences de traitement des événements d'enregistrement Javascript function_javascript

Exemples pour expliquer les compétences de traitement des événements d'enregistrement Javascript function_javascript

WBOYoriginal: 2016-05-16 15:20:431391parcourir

Les événements constituent le contenu principal de JavaScript et leur importance ne sera pas présentée ici. Une fois l'événement déclenché, une fonction de traitement d'événement est nécessaire pour le gérer. Par exemple, nous pouvons définir que lorsque l'on clique sur un bouton, l'arrière-plan d'un div sera défini sur vert. Voyons d'abord comment y parvenir. cet effet. L'exemple de code est le suivant :

<html> 
<head> 
<meta charset=" utf-8"> 
<title>javascript如何注册事件处理函数</title>
<style type="text/css">
#mydiv{
 width:100px;
 height:100px;
 background-color:red;
}
</style>
<script type="text/javascript"> 
function changebg(){
 var mydiv=document.getElementById("mydiv");
 mydiv.style.backgroundColor="green";
}
</script>
</head>
<body>
 <div id="mydiv"></div>
 <button id="bt">点击查看效果</button> 
</body>
</html>

Dans le code ci-dessus, cliquer sur le bouton définira la couleur d'arrière-plan du div sur vert. En effet, le code enregistre une fonction de gestionnaire d'événements pour l'événement onclick du bouton. Cette fonction peut définir la couleur d'arrière-plan du div. au vert. Présentons brièvement comment enregistrer les fonctions de traitement d'événements pour les événements d'objet avec des exemples :
Méthode 1 :
Enregistrez la fonction de traitement d'événement directement dans le code HTML, c'est-à-dire définissez la fonction de traitement d'événement directement via l'attribut HTML. Le code à exécuter par la fonction de traitement d'événement est la valeur de l'attribut HTML. Cette méthode est utilisée au début du. article. Les avantages et inconvénients sont les suivants :

1. Facile à comprendre et à utiliser.
2. Tous les principaux navigateurs prennent en charge cette méthode.
3. Mélangé avec du code HTML, rendant la page très compliquée et incompatible avec le principe de séparation des performances et du contenu.
4. Un seul gestionnaire d'événements du même type peut être enregistré sur le même objet.

Méthode 2 :
En mode gestionnaire d'événement, ce que l'on appelle le handle d'événement est la fonction de traitement d'événement, et l'événement spécifié de l'objet spécifié correspond à un gestionnaire d'événement. Pour enregistrer une fonction de traitement d'événement de cette manière, vous devez d'abord obtenir une référence à l'objet, puis attribuer le handle d'événement à l'attribut de fonction de traitement d'événement correspondant de l'objet. En fait, la première méthode est également une sorte de méthode de gestion d’événements.
L'exemple de code est le suivant :

<html> 
<head> 
<meta charset=" utf-8"> 
<title>javascript如何注册事件处理函数</title>
<style type="text/css">
#mydiv{
 width:100px;
 height:100px;
 background-color:red;
}
</style>
<script type="text/javascript"> 
window.onload=function(){
 var mydiv=document.getElementById("mydiv");
 var bt=document.getElementById("bt");
 bt.onclick=function(){
  mydiv.style.backgroundColor="green";
 }
}
</script>
</head>
<body>
 <div id="mydiv"></div>
 <button id="bt">点击查看效果</button>
</body>
</html>

Dans le code ci-dessus, utilisez d'abord document.getElementById("bt") pour obtenir une référence à l'objet bouton, puis attribuez le handle d'événement (fonction de gestion d'événement) à l'attribut d'événement onclick de l'objet bouton, de sorte que onclick sera déclenché lorsque l'on clique sur le bouton, puis exécutera le code dans le gestionnaire d'événements. Les avantages et inconvénients sont les suivants :

1. Simple et facile à comprendre.
Pris en charge par 2 navigateurs.
3. Un seul gestionnaire d'événements du même type peut être enregistré sur le même objet.

Méthode 3 :
Il s'agit d'une méthode d'enregistrement d'événement plus avancée, c'est-à-dire un écouteur d'événement. Cette méthode résout le problème selon lequel une seule fonction de gestionnaire pour un type d'événement spécifié peut être enregistrée dans un objet spécifié. Cependant, il existe certains problèmes de compatibilité, présentés ci-dessous :
1).Navigateur IE :
Dans le navigateur IE, vous pouvez utiliser les méthodes attachEvent() et detachEvent() pour enregistrer les fonctions de gestion d'événements pour l'objet spécifié et supprimer les fonctions de gestion d'événements enregistrées.
Le format de syntaxe est le suivant :
element.attachEvent("onevent",eventListener)
Cette fonction a deux paramètres, le premier paramètre est le nom du type d'événement et le deuxième paramètre est la fonction de gestionnaire d'événements à enregistrer.
L'exemple de code est le suivant :

<html> 
<head> 
<meta charset=" utf-8"> 
<title>javascript如何注册事件处理函数</title>
<style type="text/css">
#mydiv{
 width:100px;
 height:100px;
 background-color:red;
}
</style>
<script type="text/javascript"> 
window.onload=function(){
 var mydiv=document.getElementById("mydiv");
 var bt=document.getElementById("bt");
 
 bt.attachEvent("onclick",changebg);
 
 function changebg(){
  mydiv.style.backgroundColor="green";
 }
}
</script>
</head>
<body>
 <div id="mydiv"></div>
 <button id="bt">点击查看效果</button>
</body>
</html>

Le code ci-dessus utilise la fonction attachEvent() pour enregistrer le gestionnaire d'événements onclick pour le bouton, mais il n'est valide que dans le navigateur IE. Utilisez la fonction detachEvent() pour détacher la fonction de traitement d'événement initialement enregistrée. Le format de syntaxe est le suivant :
. element.detachEvent("onevent",eventListener)
Le format est le même que celui de la fonction attachEvent().
Note particulière : Le premier paramètre doit contenir on. Par exemple, l'événement click doit être écrit sous la forme "onclick".
2). Navigateur standard :
Dans les navigateurs standards (y compris les navigateurs IE9 et IE9 et supérieurs), utilisez les fonctions addEventListener() et removeEventListener() pour enregistrer et supprimer les fonctions de traitement d'enregistrement.
Le format de syntaxe est le suivant :
element.addEventListener('event', eventListener, useCapture);
Cette fonction a trois paramètres. Le premier paramètre est le nom du type d'événement. Le deuxième paramètre est la fonction de traitement d'événement à enregistrer. La troisième fonction précise si cette fonction de traitement est appelée pendant la phase de capture du processus de livraison d'événement. L'étape est appelée. Dans les conditions par défaut, la valeur de cette propriété est false, ce qui signifie que le gestionnaire d'événements est appelé pendant l'étape de bouillonnement.
Remarque particulière : le premier paramètre ne peut pas contenir on. Par exemple, l'événement click ne peut pas être écrit sous la forme "onclick", mais doit être écrit sous la forme "click".
L'exemple de code est le suivant :

<html> 
<head> 
<meta charset=" utf-8"> 
<title>javascript如何注册事件处理函数</title>
<style type="text/css">
#mydiv{
 width:100px;
 height:100px;
 background-color:red;
}
</style>
<script type="text/javascript"> 
window.onload=function(){
 var mydiv=document.getElementById("mydiv");
 var bt=document.getElementById("bt");
 
 bt.addEventListener("click",changebg);
 
 function changebg(){
  mydiv.style.backgroundColor="green";
 }
}
</script>
</head>
<body>
 <div id="mydiv"></div>
 <button id="bt">点击查看效果</button>
</body>
</html>

以上代码在IE9和IE9以上或者其他标准浏览器中，点击按钮可以将div的背景颜色设置为绿色。使用removeEventListener()函数可以解除原来注册的事件处理函数，语法格式如下:
element.removeEventListener('event', eventListener, useCapture);
格式和addEventListener()函数式一样的。
跨浏览器注册事件处理函数:
只要加个判断语句即可，代码如下:

var EventUtil={
  //注册
  addHandler: function(element, type, handler){
   if (element.addEventListener){
    element.addEventListener(type, handler, false);
   } else if (element.attachEvent){
    element.attachEvent("on" + type, handler);
   } else {
    element["on" + type] = handler;
   }
  },
  //移除注册
  removeHandler: function(element, type, handler){
   if (element.removeEventListener){
    element.removeEventListener(type, handler, false);
   } else if (element.detachEvent){
    element.detachEvent("on" + type, handler);
   } else {
    element["on" + type] = null;
   }
  }       
 };

以上就是本文的详细内容，希望对大家的学习有所帮助。

Déclaration：

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

Article précédent：Méthode JS pour effacer le contenu de la zone de texte et déclencher js lorsque la zone de texte est restaurée et que la souris quitte les compétences text box_javascriptArticle suivant：Méthode JS pour effacer le contenu de la zone de texte et déclencher js lorsque la zone de texte est restaurée et que la souris quitte les compétences text box_javascript

Articles Liés

Voir plus