<style>
#box1 {
width: 300px;
height: 300px;
background-color: red;
}
#box2 {
width: 200px;
height: 200px;
background-color: green;
}
#box3 {
width: 100px;
height: 100px;
background-color: blue;
}
</style>
<body>
<div id="box1">
<div id="box2">
<div id="box3">
</div>
</div>
</div>
<script>
// addEventListener 的第三个参数的作用
var box1 = document.getElementById('box1');
var box2 = document.getElementById('box2');
var box3 = document.getElementById('box3');
var array = [box1, box2, box3];
// addEventListener 的第三个参数为false的时候 ： 事件冒泡
// addEventListener 的第三个参数为true的时候 ： 事件捕获
// 事件的三个阶段：
// 第一个阶段： 捕获阶段
// 第二个阶段： 执行当前点击的元素
// 第三个阶段： 冒泡阶段
// for (var i = 0; i < array.length; i++) {
// array[i].addEventListener('click', function () {
// console.log(this.id);
// }, true);
// }
// document.body.addEventListener('click', function () {
// console.log('body');
// }, true);
// box.onclick 只有事件冒泡
// box.attachEvent
// attachEvent只有两个参数， 只有事件冒泡
// box.attachEvent('onclick', function () {
// });
for (var i = 0; i < array.length; i++) {
var box = array[i];
box.onclick = function () {
console.log(this.id);
}
}
document.body.onclick = function () {
console.log('body');
}
document.onclick = function () {
console.log('document');
}
</script>
</body>
网友评论