Dieser Artikel beschreibt das Event -Capture -Modell und das Blasenmodell in JS. Teilen Sie es für Ihre Referenz.
Die spezifische Implementierungsmethode lautet wie folgt:
Beispiel 1:
Kopieren Sie den Code wie folgt: <html>
<kopf>
<script type = "text/javaScript">
window.onload = function () {
document.getElementById ('par'). addEventListener ('klick', function () {alert ('par');}, true);
document.getElementById ('Sohn'). AddEventListener ('klick', function () {alert ('Sohn');}, true);
}
</script>
<style type = "text/css">
#PAR {Breite: 300px; Höhe: 200px; Hintergrund: Gray;}
#son {width: 200px; Höhe: 100px; Hintergrund: grün;}
</style>
</head>
<body>
<div id = "par">
<div id = "Son"> </div>
</div>
</body>
</html>
Beispiel 2:
Kopieren Sie den Code wie folgt: <html>
<kopf>
<script type = "text/javaScript">
window.onload = function () {
document.getElementById ('par'). addEventListener ('klick', function () {alert ('par');});
document.getElementById ('Sohn'). AddEventListener ('Click', function () {alert ('Sohn');});
}
</script>
<style type = "text/css">
#PAR {Breite: 300px; Höhe: 200px; Hintergrund: Gray;}
#son {width: 200px; Höhe: 100px; Hintergrund: grün;}
</style>
</head>
<body>
<div id = "par">
<div id = "Son"> </div>
</div>
</body>
</html>
AddEventListener: Der dritte Parameter ist ein optionaler Parameter, der standardmäßig falsch ist und das Blasenmodell angibt, dh die kleinste Schicht wird zuerst ausgelöst (Div mit ID ist Sohn); Und wenn ein echter Parameter hinzugefügt wird, bedeutet dies, dass es sich um das Erfassungsmodell (aus HTML-> Körper ---> div) handelt, das nach einem solchen Niveau ausgelöst wird.
Der HTML -Code von Beispiel 1 hat zwei Divs. Das kleine Div ist in der großen Div enthalten. Beim Klicken auf die kleine DIV wird zuerst das Alarm -Ereignis ausgelöst. Und dann wird das ganze Stück Alarm ('Sohn') ausgelöst. Beispiel 2 ist genau das Gegenteil.
Wenn das Attribut "Object.onclick" verwendet wird, um das Ereignis auszulösen, wird das Blasenmodell verwendet.
IE unterstützt AddEventListener nicht, sondern verwendet AttachEvent. AttachEvent unterstützt jedoch nicht den dritten Parameter, sondern erfasst das Modell nicht.
Ich hoffe, dieser Artikel wird für JavaScript -Programme aller hilfreich sein.