Este artigo descreve o modelo de captura de eventos e o modelo de bolha no JS. Compartilhe para sua referência.
O método de implementação específico é o seguinte:
Exemplo 1:
Copie o código da seguinte forma: <html>
<head>
<script type = "text/javascript">
window.onload = function () {
document.getElementById ('par'). addEventListener ('click', function () {alert ('par');}, true);
document.getElementById ('filho'). addEventListener ('click', function () {alert ('filho');}, true);
}
</script>
<style type = "text/css">
#par {width: 300px; altura: 200px; fundo: cinza;}
#son {width: 200px; altura: 100px; fundo: verde;}
</style>
</head>
<Body>
<div id = "par">
<div id = "filho"> </div>
</div>
</body>
</html>
Exemplo 2:
Copie o código da seguinte forma: <html>
<head>
<script type = "text/javascript">
window.onload = function () {
document.getElementById ('par'). addEventListener ('click', function () {alert ('par');});
document.getElementById ('Son'). addEventListener ('click', function () {alert ('filho');});
}
</script>
<style type = "text/css">
#par {width: 300px; altura: 200px; fundo: cinza;}
#son {width: 200px; altura: 100px; fundo: verde;}
</style>
</head>
<Body>
<div id = "par">
<div id = "filho"> </div>
</div>
</body>
</html>
AddEventListener: O terceiro parâmetro é um parâmetro opcional, que é falso por padrão, indicando o modelo de bolha, ou seja, a menor camada é acionada primeiro (div com id é filho); E se o parâmetro verdadeiro for adicionado, significa que é o modelo de captura (do HTML-> Body ---> div), desencadeando de acordo com esse nível.
O código HTML do Exemplo 1 possui dois divs. A pequena div está contida na grande div. Ao clicar no pequeno Div, o evento Alert ('par') será primeiro acionado; E então o alerta ('filho') a peça inteira será desencadeada. Exemplo 2 é exatamente o oposto.
Se o atributo "Object.OnClick" for usado para acionar o evento, o modelo de bolha será usado.
O IE não suporta addEventListener, mas usa o AnextEvent. Mas o AnextEvent não suporta o terceiro parâmetro, ele não captura o modelo.
Espero que este artigo seja útil para a programação JavaScript de todos.