Moins non-sens, donnez simplement l'exemple de code:
La copie de code est la suivante:
<script type = "text / javascript">
fonction eventUtil () {
var _self = this;
/// Ajouter l'événement
var addEvent = (function () {
if (document.addeventListener) {
Fonction de retour (el, type, fn) {
el.addeventListener (type, fn, false);
}
} autre {
Fonction de retour (el, type, fn) {
el.attachevent ("on" + type, fonction () {
retour fn.call (el, window.event);
});
}
}
}) ();
/// Ajouter des attributs pour changer l'événement
var addPropertyChangeEvent = fonction (obj, fn) {
if (window.activexobject) {
obj.onpropertychange = fn;
} autre {
obj.addeventListener ("entrée", fn, false);
}
}
// supprimer l'événement
var reousEvent = fonction (obj, type, fn) {
if (obj.removeeventListener) {
obj.RemoveEventListener (Type, fn, false);
} else if (obj.detachevent) {
obj.detachevent ("on" + type, obj ["on" + type + fn]);
obj ["on" + type + fn] = null;
}
}
// Événement de chargement
var loadevent = fonction (fn) {
var oldonload = window.onload;
if (typeof oldonload! = "function") {
window.onload = fn;
} autre {
window.onload = function () {
OldOnload ();
fn ();
}
}
}
// Bloquer les événements
var stopevent = fonction (e) {
E = E || window.event;
if (e.PreventDefault) {
E.PreventDefault ();
e.stoppropagation ();
} autre {
e.reTurnValue = false;
e.cancelbubble = true;
}
}
// Si c'est juste pour empêcher l'événement de bouillonner
var stopPropagation = fonction (e) {
E = E || window.event;
if (! + "/ v1") {
e.cancelbubble = true;
} autre {
e.stoppropagation ();
}
}
// Obtenez l'objet de source d'événement
var getEvent1 = fonction (e) {
E = E || window.event;
var obj = e.srcelement? e.srcelement: e.target;
retour obj;
}
// Obtenez l'objet de source d'événement
var getEvent2 = fonction (e) {
if (window.event) return window.event;
var c = getEvent2.Caller;
while (c.Caller) {
C = C.Caller;
}
retour c.arguments [0];
}
// ou cette fonction est plus puissante
var getEvent3 = fonction (e) {
var e = e || window.event;
if (! e) {
var c = this.getEvent3.Caller;
tandis que (c) {
e = c.arguments [0];
if (e && (event == E.Contructor || MouseEvent == E.Contructor)) {
casser;
}
C = C.Caller;
}
}
var cible = e.srcelement? e.srcelement: e.target,
currentn = Target.NodeName.TolowerCase (),
parentn = Target.parentNode.NodeName.TolowerCase (),
Grandn = Target.parentNode.parentNode.NodeName.tolowerCase ();
return [e, cible, currentn, parentn, grandn];
}
_self.addevent = addEvent;
_self.adddPropertyChangeEvent = addProperTyChangeEvent;
_self.reMoveEvent = RemoveEvent;
_self.Loadevent = Loadevent;
_self.Stopevent = Stopevent;
_self.stoppropagation = stopPropagation;
_self.getEvent1 = getEvent1;
_self.getEvent2 = getEvent2;
_self.getEvent3 = getEvent3;
}
var eventUtil = new EventUtil ();
eventUtil.Loadevent (function () {
eventUtil.addevent (document, "cliquez", fonction (e) {
alert (eventUtil.getEvent3 (e));
});
eventUtil.addpropertyChangeEvent (document, fonction (e) {
alert (eventUtil.getEvent3 (e));
});
});
</cript>
Le traitement des événements JavaScript est divisé en trois étapes: capture-processeur-bubles.
Prenez en cliquant sur le bouton à titre d'exemple:
Étape de capture: De la couche externe vers la couche intérieure, appelez d'abord la méthode de surveillance de la étape de capture de clic enregistrée pour la fenêtre, puis document, corps, nœuds parent couche par calque, jusqu'au bouton lui-même.
Phase de traitement: appelez la méthode d'écoute de clic du bouton lui-même.
Étape de la bulle: à partir du bouton, de la couche intérieure à la couche externe, appelez la méthode de surveillance de l'étape de la bulle des nœuds parents à chaque niveau de séquence jusqu'à la fenêtre.
Cependant, pour IE8 et IE inférieur, la phase de capture n'est pas prise en charge, donc l'écoute d'événements dans la phase de capture n'est pas encore courante.
La méthode habituelle de gestion des événements est:
La copie de code est la suivante:
fonction EventHandler (e) {
E = E || window.event;
var cible = e.target || e.srcelement;
... ...
}
E est un objet d'événement. Lorsque l'événement est déclenché, il est passé en tant que paramètre. Cependant, il ne s'applique pas aux versions IE8 et inférieures de IE. Il ne peut être accessible que par le biais de la variable d'événement global. Heureusement, il n'y aura pas de situation où deux événements seront traités en même temps.