Lorsque vous parlez d'événements JavaScript, il est difficile d'éviter trois sujets: les bulles d'événements, la capture d'événements et le blocage des événements par défaut, qu'il s'agisse d'entretien ou de travail quotidien.
1. Bubbles d'événement
Jetons un coup d'œil à un morceau de code:
var $ input = document.getElementsByTagName ("input") [0]; var $ div = document.getElementsByTagName ("div") [0]; var $ body = document.getElementsByTagName ("body") [0]; $ input.onclick = function (e) {this.style.borter = "5px solide rouge" var e = e || window.e; alert ("red")} $ div.onclick = function (e) {this.style.border = "5px Solid Green" alert ("green")} $ body.onclick = function (e) {this.style.borter = "5px wellow solide" alert ("jaune")}code html
<div> <entrée type = "Button" value = "Test Event Bubbles" /> </div> "Red", "Green", "Yellow" apparaît à son tour.
Votre intention d'origine est de déclencher l'élément bouton, mais il est déclenché avec l'événement lié à l'élément parent. Ceci est la bulle d'événement.
Si la liaison de l'événement à l'entrée est modifiée en:
$ input.onclick = function (e) {this.style.border = "5px solide rouge" var e = e || window.e; alert ("rouge") e.stoppropagation ();}Pour le moment, seul "Red" apparaîtra car il empêche l'événement de bouillonner.
2. Capture d'événement
Puisqu'il y a un bouillonnement d'événements, il peut y avoir une capture d'événements, ce qui est un processus inverse. La différence est de l'élément supérieur à l'élément cible ou de l'élément cible à l'élément supérieur.
Voyons un morceau de code:
$ input.addeventListener ("cliquez", fonction () {this.style.border = "5px solide rouge"; alert ("red")}, true) $ div.addeventListener ("clique this.style.border = "5px Solid Yellow";À cette époque, "jaune", "vert", "rouge" apparaît un par un, qui est la capture de l'événement.
3. Bloquer l'événement par défaut
Il existe certains comportements par défaut des éléments HTML, tels que la balise A, et il y aura une action de saut après avoir cliqué; L'entrée de type soumission dans le formulaire a un événement de saut de soumission par défaut; L'entrée de type de réinitialisation a un comportement de formulaire de réinitialisation. Si vous souhaitez bloquer ce comportement par défaut du navigateur, JavaScript vous fournit une méthode.
var $ a = document.getElementsByTagName ("a") [0]; $ a.onclick = function (e) {alert ("L'action de saut a été bloquée par moi") e.PreventDefault (); // return false; // il est également possible} <a href = "http://keleyi.com"> ke leyi </a> L'événement par défaut a disparu.Puisque Retour False et E.PreventDefault () ont le même effet, y a-t-il des différences? Bien sûr, il y en a.
Le comportement par défaut des hôtes d'événements ne peut être organisé que dans les attributs d'événements HTML et les méthodes de traitement des événements de niveau DOM0.
Ce qui précède est tout le contenu de cet article. J'espère que cela sera utile à l'apprentissage de tous et j'espère que tout le monde soutiendra davantage Wulin.com.