1. Flux d'événement
Les flux d'événements décrivent l'ordre dans lequel les événements sont reçus de la page. Mais IE propose des flux de bulles, tandis que Netscape Communicator propose des flux de capture.
Flux d'événements JavaScript
2. Bubble d'événement
L'événement commence à être reçu par l'élément le plus spécifique (le nœud avec la hiérarchie de nidification la plus profonde), puis se propage vers le haut étape par étape vers des nœuds moins spécifiques (document). comme suit:
La copie de code est la suivante:
<html>
<adal>
<Title> Événement bouillonnant </TITME>
</ head>
<body>
<div id = "mydiv"> cliquez sur moi </div>
</docy>
</html>
window.onload = function () {
var obj = document.getElementById ("test");
obj.onclick = function () {
alert (this.tagname);
};
document.body.onclick = function () {
alert (this.tagname);
};
document.DocumentElement.OnClick = function () {
alert (this.tagname);
};
document.onclick = function () {
alert ("document");
};
window.onclick = function () {
alert ("fenêtre");
}
};
Ordre de propagation des événements: div-> body-> html-> document
Avis:
Tous les navigateurs modernes prennent en charge les événements de bulles, mais il existe quelques différences dans la mise en œuvre. Les bulles d'événements dans IE5.5 et les versions antérieures sauteront directement du corps en document (pas d'exécution HTML). Événements de bulles de Firefox, Chrome et Safari jusqu'à l'objet Window.
3. Arrêtez des bulles d'événements et annulez les événements par défaut
un. Obtenez l'objet de l'événement
La copie de code est la suivante:
fonction getEvent (événement) {
// window.event ie
// Événement non-IE
Événement de retour || window.event;
}
B Fonction B: Arrêtez les bulles des événements
La copie de code est la suivante:
fonction stopbubble (e) {
// Si un objet d'événement est fourni, il s'agit d'un navigateur non IE
if (e && e.stoppropagation) {
// Par conséquent, il prend en charge la méthode stoppropagation () de W3C
e.stoppropagation ();
} autre {
// sinon, nous devons utiliser IE pour annuler la bulle d'événement
window.event.cancelbubble = true;
}
}
c. Bloquer le comportement par défaut du navigateur
La copie de code est la suivante:
fonction stopdefault (e) {
// Bloquer l'action du navigateur par défaut (W3C)
if (e && e.preventdefault) {
E.PreventDefault ();
} autre {
// Comment bloquer l'action par défaut de la fonction dans IE
window.event.returnvalue = false;
}
retourne false;
}