Une brève discussion sur les compétences JavaScript events_javascript

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 :

Copier le code Le code est le suivant :

                                                                                                                                                                                                                       

          

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

Copier le code Le code est le suivant :

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

Copier le code Le code est le suivant :

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

Copier le code Le code est le suivant :

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 ;
>