简单获取三个嵌套的元素用来举例:
① 事件捕获-事件传递的顺序-从父级到子级
② 事件冒泡-事件处理的顺序-从子级到父级
var box = document.getElementsByClassName('box')[0]; //父
var item = document.getElementsByClassName('item')[0]; //儿子
var xm = document.getElementsByClassName('xm')[0]; //孙子
addEvent(box,"click",function(){//这里的事件是调用了我们上回写的函数("事件绑定"里面的)
console.log("点击了box");
// 取消冒泡两种方法:
var evObj = window.event || ev;
evObj.cancelBubble = true;
或:
evObj.stopPropagation();
// 阻止默认事件三种方法:
return false;
或
evObj.preventDefault();
或
evObj.returnValue = false;
});
addEvent(item,"click",function(){
console.log("点击了item");
// var evObj = window.event || ev;
// evObj.cancelBubble = true;
});
addEvent(xm,"click",function(){
console.log("点击了xm");
// var evObj = window.event || ev;
// evObj.cancelBubble = true;
});
备注:根据上面的事件冒泡和捕获的特性,读者可以自己运行代码,将注掉的代码放出来,以便查看结果,分析结果,得出自己的结论。