Este artículo describe el modelo de captura de eventos y el modelo de burbujas en JS. Compártelo para su referencia.
El método de implementación específico es el siguiente:
Ejemplo 1:
Copie el código de la siguiente manera: <html>
<Evista>
<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);
}
</script>
<style type = "text/css">
#par {ancho: 300px; altura: 200px; fondo: gris;}
#son {ancho: 200px; altura: 100px; fondo: verde;}
</style>
</ablo>
<Body>
<div id = "par">
<div id = "hijo"> </div>
</div>
</body>
</html>
Ejemplo 2:
Copie el código de la siguiente manera: <html>
<Evista>
<script type = "text/javaScript">
window.onload = function () {
document.getElementById ('par'). addEventListener ('click', function () {alert ('par');});
document.getElementById ('son'). addEventListener ('click', function () {alert ('son');});
}
</script>
<style type = "text/css">
#par {ancho: 300px; altura: 200px; fondo: gris;}
#son {ancho: 200px; altura: 100px; fondo: verde;}
</style>
</ablo>
<Body>
<div id = "par">
<div id = "hijo"> </div>
</div>
</body>
</html>
AddEventListener: el tercer parámetro es un parámetro opcional, que es falso de forma predeterminada, lo que indica el modelo de burbujas, es decir, la capa más pequeña se desencadena primero (div with ID es son); Y si se agrega el parámetro verdadero, significa que es el modelo de captura (de html-> cuerpo ---> div), que se desencadena según dicho nivel.
El código HTML del ejemplo 1 tiene dos divs. El pequeño div está contenido en el gran div. Al hacer clic en el pequeño div, el evento alerta ('par') se activará primero; y luego se activará la alerta ('hijo') completa. El ejemplo 2 es exactamente lo contrario.
Si el atributo "Object.Onclick" se usa para activar el evento, se usa el modelo de burbujas.
IE no es compatible con AdDeventListener, pero usa AttackEvent. Pero AttackEvent no admite el tercer parámetro, no captura el modelo.
Espero que este artículo sea útil para la programación de JavaScript de todos.