Les événements du navigateur existent tous sous forme d'objets. De même, il existe également une différence dans l'obtention d'objets d'événement entre le navigateur IE et les navigateurs DOM standard. Dans le navigateur IE, l'objet Event est un événement d'attribut de l'objet Windows. La méthode suivante est généralement utilisée pour y accéder.
La copie de code est la suivante:
op.onclick = function () {
var oevent = window.event;
}
Bien qu'il s'agisse d'une propriété de l'objet de fenêtre, l'objet de l'événement ne peut être accessible que lorsque l'événement se produit. Une fois que toutes les fonctions de traitement des événements sont exécutées, l'objet disparaît.
Le DOM standard stipule que les objets d'événement doivent être transmis aux fonctions de traitement des événements comme paramètres uniques. L'accès à des objets d'événement dans les navigateurs Firefox est généralement utilisé comme paramètres, et le code est le suivant:
La copie de code est la suivante:
op.OnClick = fonction (oevent) {
}
Par conséquent, pour être compatible avec les deux navigateurs, la méthode suivante est généralement utilisée
La copie de code est la suivante:
op.OnClick = fonction (oevent) {
if (window.event) oevent = window.event;
}
Après avoir obtenu l'objet Event, le navigateur peut gérer divers événements à travers sa série de propriétés et de méthodes, telles que les événements de souris, les événements de clavier et les événements du navigateur. attendez
Le suivant répertorie les propriétés et méthodes communes:
À partir de ce qui précède, nous pouvons voir que les deux types de navigateurs ont encore des similitudes. Par exemple, l'attribut type est compatible avec divers navigateurs. Il indique le type d'événement et renvoie des valeurs telles que "cliquez" et "MouseMove".
Ceci est très utile pour gérer plusieurs types d'événements dans la même fonction.
Comme suit: La même fonction gère plusieurs événements.
La copie de code est la suivante:
<script linguisse = "javascript">
Poignée de fonction (Oevent) {
var disp = document.getElementById ("affichage");
if (window.event) oevent = window.event; // gérer la compatibilité et obtenir l'objet
if (oevent.type == "cliquez")
disp.innerhtml + = "Vous avez cliqué sur moi!";
else if (oevent.type == "Mouseover")
disp.innerhtml + = "vous déménagez au mien";
}
window.onload = function () {
var op = document.getElementById ("box");
op.OnClick = manche;
op.onMouseOver = manche;
}
</cript>
<div>
<div id = "box"> </ div>
<p id = "affichage"> Cliquez sur moi </p>
</div>
Le code ci-dessus ajoute deux fonctions de réponse d'événements à la div de id = "box", et ces deux événements sont la même fonction.
Dans cette fonction, envisagez d'abord d'obtenir l'objet de l'événement compatible, puis en utilisant le disque d'attribut type au nom de l'événement.
Lors de la détection des trois clés de Shift, Alt et Ctrl, les méthodes utilisées par les deux types de navigateurs sont exactement les mêmes, les deux ont les trois attributs de ShiftKey, Altkey et Ctrlkey.
Le code est le suivant:
La copie de code est la suivante:
var bshift = oevent.shiftkey;
var balt = oevent.altkey;
var bctrl = oevent.ctrlkey;
De plus, lors de l'obtention de pointeurs de souris, les méthodes utilisées par les deux types de navigateurs sont les mêmes, qui incluent ClientX, Clienty, ScreenX et Screeny.
Parmi eux, ClientX et Clienty représentent l'emplacement de la souris dans la zone client et n'incluent pas la barre d'état du navigateur, la barre de menu, etc.
Le code est le suivant:
La copie de code est la suivante:
var iclientx = oevent.clientx;
var iclienty = oevent.clienty;
ScreenX et Screeny se réfèrent à la position de la souris sur l'ensemble de l'écran de l'ordinateur, et le code est
La copie de code est la suivante:
var iscreenx = oevent.screenx;
var iscreeny = oevent.screeny;
Plusieurs fois, les développeurs veulent savoir que l'événement est déclenché par cet objet, c'est-à-dire la cible de l'événement.
En supposant que l'élément <p> alloue une fonction de gestionnaire d'événements OnClick, <p> sera considéré comme la cible lorsque l'événement de clic est déclenché.
Dans le navigateur IE, la cible est contenue dans la propriété Srcelement de l'objet de l'événement, le code est le suivant
La copie de code est la suivante: var otarget = oevent.srcelement;
Dans le navigateur DOM standard, la cible est incluse dans l'attribut cible, le code est le suivant
La copie de code est la suivante: var otarget = oevent.target;
Obtenez la cible de l'événement
La copie de code est la suivante:
<script linguisse = "javascript">
Poignée de fonction (Oevent) {
var disp = document.getElementById ("affichage");
if (window.event) oevent = window.event; // gérer la compatibilité et obtenir l'objet
var otarget;
if (oevent.srcelement) // gérer la compatibilité et obtenir des événements
otarget = oevent.srcelement;
autre
otarget = oevent.target;
disp.innerhtml + = "Nom de l'élément:" + otarget.tagname + "<br>" + "Contenu de l'élément:" + otarget.textContent + "<br>"
+ "Node suivant:" + otarget.TextContent + "<br>"
;
}
window.onload = function () {
var op = document.getElementById ("box");
op.OnClick = manche;
}
</cript>
<div>
<div id = "box">
Contenu de la boîte
</div>
<p id = "affiche"> </p>
</div>
(Supplément) Propriétés de l'objet élément http://www.w3school.com.cn/xmldom/dom_element.asp
(Supplément) Méthodes d'objet d'élément http://www.w3school.com.cn/xmldom/dom_element.asp
Étant donné que l'objectif de l'événement est différent dans deux types de navigateurs, le code doit assurer la compatibilité. La pratique habituelle consiste à utiliser directement l'objet comme condition de l'instruction if. Le code est le suivant
La copie de code est la suivante:
if (oevent.srcelement)
otarget = oevent.srcelement;
autre
otarget = oevent.target;
Cette méthode est également couramment utilisée dans d'autres propriétés.