Cet article décrit le modèle de capture d'événements et le modèle de bulle dans JS. Partagez-le pour votre référence.
La méthode de mise en œuvre spécifique est la suivante:
Exemple 1:
Copiez le code comme suit: <html>
<adal>
<script type = "text / javascript">
window.onload = function () {
document.getElementById ('par'). AddEventListener ('click', function () {alert ('par');}, true);
document.getElementById ('Son'). AddEventListener ('click', function () {alert ('Son');}, true);
}
</cript>
<style type = "text / css">
#par {largeur: 300px; hauteur: 200px; fond: gris;}
#son {largeur: 200px; hauteur: 100px; fond: vert;}
</ style>
</ head>
<body>
<div id = "Par">
<div id = "Son"> </div>
</div>
</docy>
</html>
Exemple 2:
Copiez le code comme suit: <html>
<adal>
<script type = "text / javascript">
window.onload = function () {
document.getElementById ('par'). AddEventListener ('click', function () {alert ('par');});
document.getElementById ('Son'). AddEventListener ('click', function () {alert ('Son');});
}
</cript>
<style type = "text / css">
#par {largeur: 300px; hauteur: 200px; fond: gris;}
#son {largeur: 200px; hauteur: 100px; fond: vert;}
</ style>
</ head>
<body>
<div id = "Par">
<div id = "Son"> </div>
</div>
</docy>
</html>
AddeventListener: Le troisième paramètre est un paramètre facultatif, qui est faux par défaut, indiquant le modèle de bulle, c'est-à-dire que la plus petite couche est déclenchée en premier (div avec id est fils); Et si le vrai paramètre est ajouté, cela signifie qu'il s'agit du modèle de capture (de HTML -> Body ---> div), déclenchant selon un tel niveau.
Le code HTML de l'exemple 1 a deux div. La petite div est contenue dans la grande div. Lorsque vous cliquez sur le petit div, l'événement alerte («par») sera d'abord déclenché; Et puis la pièce entière d'alerte («fils») sera déclenchée. L'exemple 2 est exactement le contraire.
Si l'attribut "object.onclick" est utilisé pour déclencher l'événement, le modèle de bulle est utilisé.
IE ne prend pas en charge AddEventListener, mais utilise Pié-Pièce. Mais attachEvent ne prend pas en charge le troisième paramètre, il ne capture pas le modèle.
J'espère que cet article sera utile à la programmation JavaScript de tous.