Exemples de bouillonnement d'événements JavaScript, de capture d'événements et de blocage d'événements par défaut

En parlant des événements de JavaScript, les trois sujets du bouillonnement d'événements, de la capture d'événements et du blocage des événements par défaut sont difficiles à éviter que ce soit dans les entretiens ou dans le travail quotidien.

Bulles

Regardons d'abord un exemple :

js :

var $input = document.getElementsByTagName("input")[0];
        var $p = document.getElementsByTagName("p")[0];
        var $body = document.getElementsByTagName("body")[0];

        $input.onclick = function(e){
            this.style.border = "5px solid red"
            var e = e || window.e;
            alert("red")
        }
        $p.onclick = function(e){
            this.style.border = "5px solid green"
            alert("green")
        }
        $body.onclick = function(e){
            this.style.border = "5px solid yellow"
            alert("yellow")
        }

html :

<p>
        <input type="button" value="测试事件冒泡" />
    </p>

Dans l'ordre "rouge", "vert", "jaune" apparaît.

Votre intention initiale est de déclencher l'élément bouton, mais il est déclenché avec l'événement lié à l'élément parent. C’est un événement bouillonnant.

Si l'événement lié à l'entrée est modifié en :

$input.onclick = function(e){
    this.style.border = "5px solid red"
    var e = e || window.e;
    alert("red")
    e.stopPropagation();
}

À ce moment, seul "rouge" apparaîtra

car l'événement ne peut pas bouillonner.

Capture

Puisqu'il y a bouillonnement d'événements, il peut aussi y avoir capture d'événements. Il s'agit d'un processus inverse. La différence se fait de l'élément supérieur à l'élément cible ou de l'élément cible à l'élément supérieur.

Regardez le code :

$input.addEventListener("click", function(){
    this.style.border = "5px solid red";
    alert("red")
}, true)
$p.addEventListener("click", function(){
    this.style.border = "5px solid green";
    alert("green")
}, true)
$body.addEventListener("click", function(){
    this.style.border = "5px solid yellow";
    alert("yellow")
}, true)

À ce moment-là, "jaune", "vert" et "rouge" apparaissent en séquence.

Voici la capture de l'événement.

Si vous changez le troisième paramètre de la méthode addEventListener en false, cela signifie qu'elle ne se déclenchera que pendant la phase de bouillonnement. Les pop-ups sont dans l'ordre : "rouge", "vert", "jaune". ".

Prévention des événements par défaut

Il existe certains éléments HTML comportements par défaut, tels que la balise a, qui a une action de saut après avoir cliqué sur l'entrée de type de soumission dans le formulaire ; Il existe un événement de saut de soumission par défaut ; l'entrée de type de réinitialisation a un comportement de formulaire réinitialisé.

Si vous souhaitez empêcher ces comportements par défaut du navigateur, JavaScript vous en fournit les moyens.

Commençons par le code

var $a = document.getElementsByTagName("a")[0];
$a.onclick = function(e){
    alert("跳转动作被我阻止了")
    e.preventDefault();
    //return false;//也可以
}

<a href="http://www.nipic.com">昵图网</a>

L'événement par défaut a disparu.

Puisque return false et e.preventDefault() ont le même effet, y a-t-il des différences entre eux ? Bien sûr, il y en a.

Uniquement dans l'attribut HTML d'événement et la méthode DOM niveau 0 de gestion des événements le comportement par défaut de l'hôte de l'événement peut être organisé en renvoyant return false.

Remarque : Les éléments ci-dessus sont basés sur la norme W3C et ne prennent pas en compte les différentes implémentations d'IE.

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!