Lectures connexes:
JavaScript Event Learning Résumé (V) Type d'événement de souris en JS
//www.vevb.com/article/86259.htm
JavaScript Event Learning Résumé (i) Flux d'événements
//www.vevb.com/article/86261.htm
JavaScript Event Learning Résumé (iv) Membres publics de l'événement (propriétés et méthodes)
//www.vevb.com/article/86262.htm
JavaScript Event Learning Résumé (ii) JS Événements JS
//www.vevb.com/article/86264.htm
JavaScript Event Learning Résumé (III) Objet de l'événement JS
1. Gérélateur d'événements
Comme mentionné précédemment, les événements sont des actions effectuées par l'utilisateur ou le navigateur eux-mêmes, tels que Click, Load et Mouseover sont tous les noms des événements. La fonction qui répond à un certain événement est appelée gestionnaire d'événements (également appelée gestionnaire d'événements, gestionnaire d'événements). Le nom du gestionnaire d'événements commence par "ON", donc le gestionnaire d'événements de l'événement Click est ONCLICK, et le gestionnaire d'événements de l'événement de chargement est Onload.
Il existe trois façons principales de spécifier les gestionnaires d'événements pour les événements.
1. Géréateur d'événements HTML
Tout d'abord, cette approche est obsolète. Parce que les actions (code JavaScript) et le contenu (code HTML) sont étroitement couplées. Mais il peut toujours être utilisé lors de l'écriture d'une petite démo.
Il existe deux façons de le faire, qui sont toutes deux très simples:
Le premier type: définissez directement le gestionnaire d'événements et les actions incluses dans le HTML.
La copie de code est la suivante: <entrée type = "bouton" value = "cliquez sur moi!" />
Le deuxième type: définit le gestionnaire d'événements dans HTML, et les actions exécutées appellent le script défini ailleurs.
La copie de code est la suivante: <entrée type = "bouton" value = "cliquez sur moi!" /> <cript> Fonction showMessage () {alert ("cliquez sur!");} </cript>
note:
1) Grâce à la variable d'événement, vous pouvez accéder directement à l'événement lui-même. Par exemple, onclick = "alert (event.type)" fera apparaître l'événement de clic.
2) Cette valeur est égale à l'élément cible de l'événement, où l'élément cible est l'entrée. Par exemple, onclick = "alert (this.value)" peut obtenir la valeur de la valeur de l'élément d'entrée.
2. Gérélateur d'événements de niveau DOM0
Cette méthode est simple et transversale, mais ne peut ajouter qu'un gestionnaire d'événements à un seul élément.
Étant donné que cette méthode ajoute plusieurs gestionnaires d'événements aux éléments, les éléments suivants l'emporteront sur le précédent.
Ajouter un gestionnaire d'événements:
<entrée type = "bouton" value = "cliquez sur moi!" onClick = "showMessage ()" /> <Script> fonction showMessage () {alert ("cliquer!");} </cript>Supprimer le gestionnaire d'événements:
La copie de code est la suivante: mybtn.onclick = null;
3. Gérélateur d'événements de niveau DOM2
Les gestionnaires d'événements de niveau DOM2 peuvent ajouter plusieurs gestionnaires d'événements à un élément. Il définit deux méthodes pour ajouter et supprimer les gestionnaires d'événements: addEventListener () et re SupportEventListener ().
Les deux méthodes nécessitent 3 paramètres: nom d'événement, fonction du gestionnaire d'événements et valeur booléenne.
Cette valeur booléenne est vraie, et l'événement est traité dans l'étape de capture, FAUX, et l'événement est traité dans le stade de la bulle, ce qui est par défaut faux.
Ajoutez un gestionnaire d'événements: Ajoutez maintenant deux gestionnaires d'événements pour le bouton, l'un apparaît "Hello" et l'autre apparaît "monde".
<entrée id = "mybtn" type = "bouton" value = "cliquez sur moi!" /> <cript> var mybtn = document.getElementById ("myBtn"); mybtn.addeventListener ("cliquez", fonction () {alert ("bonjour");}, false); mybtn.addeventListener ("cliquez", function () {alert ("world");}, false); </cript>Supprimer le gestionnaire d'événements: le gestionnaire d'événements ajouté via AddeveventListener doit être supprimé via devingEventListener, et les paramètres sont cohérents.
Remarque: La fonction anonyme ajoutée via AddEventListener ne sera pas supprimée. Le code suivant ne fonctionnera pas!
La copie de code est la suivante: myBtn.RemoveEventListener ("click", function () {alert ("world");}, false);
Il semble que le RemoveEventListener soit cohérent avec le paramètre AddeventListener ci-dessus, mais en fait, la fonction anonyme du deuxième paramètre est complètement différente.
Ainsi, afin de supprimer le gestionnaire d'événements, le code peut être écrit comme ceci:
<entrée id = "mybtn" type = "bouton" value = "cliquez sur moi!" /> <cript> var mybtn = document.getElementById ("myBtn"); var handler = function () {alert ("bonjour"); } mybtn.addeventListener ("cliquez", gestionnaire, false); myBtn.RemoveEventListener ("cliquez", gestionnaire, false); </cript>2. IE Événements Géréditer
1. Scénarios d'application pratiques
IE8 et ci-dessous Les navigateurs ne prennent pas en charge AddEventListener. Si vous voulez être compatible avec IE8 et en dessous des navigateurs dans le développement réel. Si vous utilisez des événements de liaison natifs et que vous devez être traité compatible, vous pouvez utiliser JQuery Bind à la place.
2. IE8 Binding des événements
IE8 et les navigateurs suivants implémentent deux méthodes similaires à celles de Dom: attachEvent () et Detachevent ().
Les deux méthodes nécessitent deux paramètres: le nom du gestionnaire d'événements et la fonction du gestionnaire d'événements.
note:
IE11 ne prend en charge qu'AdveventListener!
IE9 et IE10 Prise en charge jointetEvent et AddeventListener!
TE8 et en dessous de la prise en charge uniquement Pièdet!
Vous pouvez utiliser le code suivant pour le tester dans divers navigateurs de version IE.
<entrée id = "mybtn" type = "bouton" value = "cliquez sur moi!" /> <cript> var mybtn = document.getElementById ("myBtn"); var handlerie = function () {alert ("helloie"); } var handlerdom = function () {alert ("hellodom"); } mybtn.addeventListener ("cliquez", HandlerDom, false); mybtn.attachevent ("onclick", handlerie); </script>Ajouter un gestionnaire d'événements: Ajoutez maintenant deux gestionnaires d'événements pour le bouton, l'un apparaît "Hello" et l'autre apparaît "monde"
<script> var myBtn = document.getElementById ("myBtn"); mybtn.attachevent ("onClick", function () {alert ("bonjour");}); mybtn.attachevent ("onclick", function () {alert ("world");}); </script>Remarque: L'effet d'opération ici mérite d'être noté:
"World" apparaît d'abord dans les navigateurs ci-dessous IE8, puis "Hello". L'ordre des événements déclenchant dans DOM est opposé.
IE9 et au-dessus des navigateurs apparaissent d'abord "Hello", puis apparaissent "World". Le même ordre que l'événement déclenchant dans DOM.
On peut voir que le navigateur IE se rend progressivement sur la bonne voie. . .
Supprimer le gestionnaire d'événements: le gestionnaire d'événements ajouté via Pié-attaquant doit être supprimé via la méthode Detachevent, et les paramètres sont cohérents.
Comme l'événement DOM, les fonctions anonymes ajoutées ne seront pas supprimées.
Ainsi, afin de supprimer le gestionnaire d'événements, le code peut être écrit comme ceci:
<entrée id = "mybtn" type = "bouton" value = "cliquez sur moi!" /> <cript> var mybtn = document.getElementById ("myBtn"); var handler = function () {alert ("bonjour"); } mybtn.attachevent ("onclick", gestionnaire); mybtn.detachevent ("onclick", gestionnaire); </script>Remarque : il y a un autre endroit où faire attention dans le gestionnaire d'événements IE: Scope.
À l'aide de la méthode jointe de playEvent (), le gestionnaire d'événements s'exécute dans la portée globale, donc cela est égal à la fenêtre.
La portée de la méthode au niveau DOM2 ou DOM0 est à l'intérieur de l'élément, et cette valeur est l'élément cible.
L'exemple suivant apparaîtra vrai.
<entrée id = "mybtn" type = "bouton" value = "cliquez sur moi!" /> <cript> var mybtn = document.getElementById ("myBtn"); mybtn.attachevent ("onClick", function () {alert (this === window);}); </script>C'est quelque chose à garder à l'esprit lors de l'écriture de code croisé.
IE7 / 8 Détection:
// Juge IE7 / 8 Détection de compatibilité Var Isie = !! Window.activexObject; var isie6 = ISIE &&! Window.xmlHttpRequest; var isie8 = ISIE && !! document.DocumentMode; var Isie7 = Isie &&! Isie6 &&! Isie8; if (ISIE8 || ISIE7) {li.attachevent ("onClick", function () {_marker.openInfowInDow (_iw);})} else {li.addeventListener ("cliquez", fonction () {_Marker.OpenInFowindow (_iw);})}Ce qui précède est la connaissance pertinente du résumé de l'apprentissage des événements JavaScript (ii) du gestionnaire d'événements JS que l'éditeur vous a présenté. J'espère que ce sera utile à tous!