1. Flux d'événements
Le flux d'événements décrit l'ordre dans lequel les événements sont reçus de la page. Cependant, ce que propose IE est un flux bouillonnant, tandis que Netscape Communicator propose un flux de capture.
Flux d'événements JavaScript
2. Événement bouillonnant
Les événements sont initialement reçus par l'élément le plus spécifique (le nœud avec le niveau d'imbrication le plus profond), puis se propagent vers le haut vers des nœuds moins spécifiques (documents). Comme suit :
Cliquez sur moi
window.onload = function(){
var obj = document.getElementById("test");
obj.onclick = fonction(){
alert(this.tagName);
};
Document.body.onclick = fonction(){
alert(this.tagName);
};
Document.documentElement.onclick = function(){
alert(this.tagName);
};
Document.onclick = function(){
alert("document");
};
window.onclick = fonction(){
alert("fenêtre");
>
};
Séquence de propagation des événements : div——>body——>html——>document
Remarque :
Tous les navigateurs modernes prennent en charge les événements bouillonnants, mais il existe quelques différences dans la mise en œuvre. Les événements bouillonnants dans IE5.5 et les versions antérieures passeront directement du corps au document (le HTML ne sera pas exécuté). Événements de bulles Firefox, Chrome et Safari jusqu'à l'objet fenêtre.
3. Arrêtez le bouillonnement des événements et annulez les événements par défaut
a. Récupérez l'objet événement
fonction getEvent(événement) {
// window.event IE
// événement non-IE
événement de retour || window.event;
}
b Fonction : Arrêter le bouillonnement d'événement
fonction stopBulle(e) {
// Si un objet événement est fourni, il s'agit d'un navigateur non-IE
if ( e && e.stopPropagation ) {
// Il prend donc en charge la méthode stopPropagation() du W3C
e.stopPropagation();
} autre {
// Sinon, nous devons utiliser IE pour annuler le bouillonnement d'événement
window.event.cancelBubble = true;
>
>
c. Bloquer le comportement par défaut du navigateur
fonction stopDefault( e ) {
// Bloquer les actions du navigateur par défaut (W3C)
Si ( e && e.preventDefault ) {
e.preventDefault();
} autre {
//Comment empêcher l'action par défaut de la fonction dans IE
window.event.returnValue = false;
>
Renvoie faux ;
>