45 lines
1.1 KiB
HTML
45 lines
1.1 KiB
HTML
<!doctype html>
|
|
<html>
|
|
<head>
|
|
<title>JS Tester</title>
|
|
<style>
|
|
.box {
|
|
width: 200px;
|
|
height: 100px;
|
|
border: 1px solid black
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<div class="box" id="box0">Box #1</div>
|
|
<div class="box" id="box1">Box #2</div>
|
|
<div class="box" id="box2">Box #3</div>
|
|
<div class="box" id="box3">Box #4</div>
|
|
</div>
|
|
<script>
|
|
const main = document.querySelector(".container");
|
|
const boxes = document.querySelectorAll(".box");
|
|
main.addEventListener("click", (e) => {
|
|
console.log("4");
|
|
},false);
|
|
main.addEventListener("click", (e) => {
|
|
console.log("1");
|
|
},true);
|
|
|
|
boxes.forEach(ele => {
|
|
ele.addEventListener("click", (e) => {
|
|
console.log("3");
|
|
console.log(e.target.textContent);
|
|
},false);
|
|
ele.addEventListener("click", (e) => {
|
|
console.log("2");
|
|
console.log(e.target.textContent);
|
|
},true);
|
|
|
|
});
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|