mecanismo de burbujeo de eventos dom
Burbujeo: después de que el elemento html desencadena el evento, el evento burbujeará, se lo entregará al elemento principal para que lo procese, y luego hacia arriba hasta que aparezca la ventana del navegador.
Ejemplo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#pre {
width: 200px;
height: 200px;
background: #31fdff;
}
#child {
width: 100px;
height: 100px;
background: #bfa;
}
</style>
</head>
<body>
<div id="pre">
<div id="child"></div>
</div>
<script>
document.getElementById('pre').addEventListener('click', function (e) {
console.log('pre');
})
document.getElementById('child').addEventListener('click', function (e) {
console.log('child');
})
window.addEventListener('click', function (e) {
console.log('window');
})
</script>
</body>
</html>
Haga clic en el elemento secundario, la consola imprime el resultado
Camino burbujeante
Event.composedPath () devuelve una lista de objetos de elemento que manejan el evento, el primer elemento es el primer elemento que desencadenó el evento y el último es el objeto de ventana
Ejemplo
document.getElementById('pre').addEventListener('click', function (e) {
console.log('pre');
console.log(e.composedPath());
})
document.getElementById('child').addEventListener('click', function (e) {
console.log('child');
console.log(e.composedPath());
})
window.addEventListener('click', function (e) {
console.log('window');
console.log(e.composedPath());
})
Haga clic en el elemento secundario, la consola imprime el resultado
Bloquear eventos para que no se propaguen
Event.stopPropagation () bloquea el evento para que no se propague al elemento principal. Una vez que se procesa el elemento actual, el elemento principal ya no activa el evento.
document.getElementById('pre').addEventListener('click', function (e) {
console.log('pre');
console.log(e.composedPath());
})
document.getElementById('child').addEventListener('click', function (e) {
// 阻断事件向上冒泡
e.stopPropagation()
console.log('child');
})
window.addEventListener('click', function (e) {
console.log('window');
console.log(e.composedPath());
})
Haga clic en el elemento secundario, la consola imprime el resultado
Bloquear evento desencadenado en el mismo nivel
Por ejemplo, si se registran dos controladores de eventos de clic para el mismo elemento, si la propagación del evento está bloqueada en el primer controlador de eventos registrado, el segundo controlador de eventos registrado ya no activará
eventos de estadísticas sin bloqueo Ejemplo de activación
document.getElementById('child').addEventListener('click', function (e) {
console.log('child 1');
})
document.getElementById('child').addEventListener('click', function (e) {
console.log('child 2');
})
Haga clic en el elemento secundario, la consola imprime el resultado
Ejemplo de activación de eventos de estadísticas de bloqueo
document.getElementById('child').addEventListener('click', function (e) {
e.stopImmediatePropagation()
console.log('child 1');
})
document.getElementById('child').addEventListener('click', function (e) {
console.log('child 2');
})
Haga clic en el elemento secundario, la consola imprime el resultado
