Bong bóng sự kiện - Bất cứ khi nào một sự kiện xảy ra trên một phần tử, đầu tiên các trình xử lý sự kiện sẽ chạy trên phần tử đó, sau đó chạy trên phần tử cha và cuối cùng là đến các phần tử tổ tiên khác của nó.
Ghi hình sự kiện - Nó là đảo ngược của sự kiện sôi nổi và ở đây sự kiện bắt đầu từ phần tử mẹ và sau đó đến phần tử con của nó.
Sau đây là mã cho sự kiện tạo bọt so với ghi lại sự kiện trong JavaScript -
Ví dụ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.result {
font-size: 18px;
font-weight: 500;
color: blueviolet;
}
.outer {
display: inline-block;
width: 400px;
height: 200px;
font-size: 20px;
background-color: chartreuse;
}
.inner {
width: 200px;
height: 100px;
font-size: 20px;
background-color: blueviolet;
text-align: center;
margin: 20px;
}
.tags {
display: inline-block;
width: 400px;
font-weight: bold;
font-size: 18px;
}
</style>
</head>
<body>
<h1>Event bubbling vs event capturing</h1>
<div class="outer">
OUTER
<div class="inner">INNER</div>
</div>
<div class="outer">
OUTER
<div class="inner">INNER</div>
</div>
<br />
<div class="tags">Bubbling</div>
<div class="tags">Capturing</div>
<div class="result"></div>
<script>
let outerDiv = document.querySelectorAll(".outer");
let innerDiv = document.querySelectorAll(".inner");
let resEle = document.querySelector(".result");
outerDiv[0].addEventListener("click", () => {
resEle.innerHTML += "Outer div has been clicked" + "<br>";
});
innerDiv[0].addEventListener("click", () => {
resEle.innerHTML = "";
resEle.innerHTML += "Inner div has been clicked" + "<br>";
});
outerDiv[1].addEventListener("click",() => {
resEle.innerHTML = "";
resEle.innerHTML += "Outer div has been clicked" + "<br>";
},true);
innerDiv[1].addEventListener("click",() => {
resEle.innerHTML += "Inner div has been clicked" + "<br>";
}, true);
</script>
</body>
</html> Đầu ra
Khi nhấp vào div bên trong, sự kiện đang sôi sục -
Khi nhấp vào div bên trong có ghi lại sự kiện -
