VIP26/day14/js/5.事件冒泡.js

var box1 = document.getElementById("box1");
var box2 = document.getElementById("box2");
var box3 = document.getElementById("box3");

// 事件捕获 由外向内触发操作 
// 事件冒泡 由内向外触发操作
// box1.onclick = function(event) {
//     console.log("第一个盒子");
//     event.stopPropagation();
// }

// box2.onclick = function(event) {
//     console.log("第二个盒子");
//     event.stopPropagation();
// }

// box3.onclick = function(event) {
//     console.log("第三个盒子");
//     // IE浏览器阻止事件冒泡方法
//     event.cancelBubble = true;
// }

// 阻止事件冒泡
// 1.event.stopPropagation();
//2.event.cancelBubble = true;


// addEventListener 添加监听事件
// 1.要执行的事件 字符串格式
// 2.执行的函数方法
// 3.触发类型 false(事件冒泡) true（事件捕获）
box1.addEventListener("click",function(event){
    console.log("第一个盒子");
    event.stopPropagation();
},false);

box2.addEventListener("click",function(event){
    console.log("第二个盒子");
    event.stopPropagation();
},false);

box3.addEventListener("click",function(event){
    console.log("第三个盒子");
    event.cancelBubble = true;
},false);