[JavaScript] Deux flux d'événements complètement opposés : le bouillonnement d'événements et la capture d'événements-js tutoriel-php.cn

[JavaScript] Deux flux d'événements complètement opposés : le bouillonnement d'événements et la capture d'événements

php是最好的语言

Libérer： 2018-08-02 09:13:26

original

2086 Les gens l'ont consulté

Qu'est-ce qu'un événement ?

Les événements sont des moments d'interaction spécifiques qui se produisent dans les documents et les fenêtres du navigateur.

Qu'est-ce que le flux d'événements :

Le flux d'événements décrit l'ordre dans lequel les événements sont reçus de la page, mais fait intéressant, Microsoft (IE) et Netscape (Netscape) ) L'équipe de développement a en fait proposé deux concepts de flux d'événements complètement opposés. Le flux d'événements d'IE est un flux bouillonnant d'événements (event bouillonnant), tandis que le flux d'événements de Netscape est un flux de capture d'événements (capture d'événements).

Le premier type : bouillonnement d'événements

Le flux d'événements proposé par IE est appelé bouillonnement d'événements, c'est-à-dire que l'événement commence par l'élément le plus spécifique Recevoir, puis propager jusqu'à des nœuds moins spécifiques étape par étape

p——>body——>html——>document

Deuxième type : capture d'événement

Les nœuds moins spécifiques devraient recevoir l'événement plus tôt, et le nœud le plus spécifique devrait recevoir l'événement en dernier. Le but de la capture est de capturer un événement avant qu'il n'atteigne sa destination prévue.

document——>html——>body——>p

Flux d'événements DOM

"Événement DOM niveau 2" spécifié Le flux d'événements comprend trois étapes : l'étape de capture d'événements, l'étape cible, l'étape de bouillonnement d'événements

Dans le flux d'événements DOM, la cible réelle ne recevra pas d'événements pendant la phase de capture, ce qui signifie que pendant la phase de capture, Le l’événement s’arrête après avoir atteint le corps. L'étape suivante se situe dans l'étape cible, donc l'événement se produit sur p et est considéré comme faisant partie de l'étape de bouillonnement dans le traitement des événements. Ensuite, la phase de bouillonnement se produit et l’événement se propage au document.

Même si la spécification « Événements de niveau DOM2 » exige clairement que la phase de capture n'implique pas la cible de l'événement, les navigateurs grand public actuels déclencheront des événements sur l'objet événement pendant la phase de capture. Le résultat est qu'il existe deux possibilités de manipuler des événements sur l'objet cible.

Gestionnaire d'événements DOM niveau 2

L'événement DOM niveau 2 définit deux méthodes : les opérations de traitement des événements d'ajout et des événements de suppression :

Ajouter event addEventListener() Supprimer event removeEventListener()

Tous les nœuds DOM contiennent ces deux méthodes, et ils contiennent tous deux 3 paramètres : (1) La méthode événementielle à traiter (par exemple : clic, survol de la souris, dbclick...) (2) La fonction de traitement d'événement peut être une fonction anonyme ou une fonction nommée (mais si vous devez supprimer l'événement, il doit s'agir d'une fonction nommée) (3) Une valeur booléenne, représentant Est-ce en cours de traitement l'étape de bouillonnement d'événements ou l'étape de capture d'événements (vrai : signifie appeler le gestionnaire d'événements dans l'étape de capture ; faux : signifie appeler le gestionnaire d'événements dans l'étape de bouillonnement)

//这是一个DOM 2级事件 添加事件最简单的方式（此时添加的是一个匿名函数）
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

    <button>按钮</button>
    <script>
        var btn=document.querySelector(&#39;button&#39;);
        btn.addEventListener(&#39;click&#39;,function(){
            console.log(&#39;我是按钮&#39;)
        },false)   //当第三个参数不写时，也是默认为false（冒泡时添加事件）
    </script>

</body>
</html>

Copier après la connexion

//添加的函数是命名函数，removeEventListener需要用这种方式
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

    <button>按钮</button>
    <script>
        var btn=document.querySelector(&#39;button&#39;);
        btn.addEventListener(&#39;click&#39;,foo,false);
        function foo(){
            console.log(&#39;我是按钮&#39;)
        }
           //其实操作就是把写在里面的函数拿到了外面，而在原来的位置用函数名来代替
    </script>
</body>
</html>

Copier après la connexion

Traitement au niveau DOM2 Le programme prend également en charge l'ajout de deux gestionnaires d'événements, puis les deux événements seront exécutés

Dans la plupart des cas, nous ajoutons le gestionnaire d'événements à l'étape bouillonnante du flux d'événements , il peut donc être compatible avec divers navigateurs au maximum.

Il est préférable d'ajouter des gestionnaires d'événements à la phase de capture uniquement lorsque vous devez intercepter l'événement avant qu'il n'atteigne la cible.

Il n'est pas recommandé d'enregistrer des gestionnaires d'événements pendant la phase de capture d'événements si cela n'est pas spécifiquement nécessaire.

Empêcher le bouillonnement d'événements

est principalement utilisé pour empêcher la propagation d'événements. L'empêche d'être distribué vers d'autres nœuds DOM et peut être utilisé à n'importe quelle étape de la propagation des événements. La méthode d'utilisation est la suivante (compatible avec IE) :

function stopBubble(event){
	if(window.event){
        //兼容IE
		window.event.cancelBubble=true;
	}else{
		event.stopPropagation();
	}
}

Copier après la connexion

Bloquer les événements par défaut

function stopDefaultEvent(event){
	if(window.event){
        //兼容IE
		window.event.returnValue=false;
	}else{
		event.preventDefault()
	}
	return false;
}

Copier après la connexion

Articles associés :

Explication détaillée du bouillonnement JS événements et exemples de capture d'événements

Comment implémenter le bouillonnement et la capture d'événements JavaScript

Vidéos associées :

Classe abstraite JS et tutoriel vidéo sur les modèles de conception d'événements

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!