Maison > interface Web > js tutoriel > Une brève discussion sur les compétences JavaScript events_javascript

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

WBOY
Libérer: 2016-05-16 16:12:36
original
1092 Les gens l'ont consulté

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

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal