阻止冒泡事件与阻止默认行为(练习)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="aaa" style="width:500px;height:300px;background: red;text-align: center;">
<div id="bbb" style="width:300px;height:200px;background: pink;">
<div id="ccc" style="width:200px;height:100px;background: green;"></div>
</div>
</div>
<a href="http://www.baidu.com" id="link"> 百度一下</a>
<script type="text/javascript">
function $(id){
return document.getElementById(id);
}
var link=$("link");
var btn=$("btn");
var divs=document.getElementsByTagName("div");
//（1）.阻止冒泡
function bindEvent(obj,type,fun){ //经典封装事件
if(obj.addEventListener){//判断是否标准浏览器DOM2级事件模型
obj.addEventListener(type,fun,false); //注：false为冒泡→从里面到外面，true为捕获→从外面到里面
}
else if(obj.attachEvent){//判断是否IE浏览器DOM2级事件模型
obj.attachEvent("on"+type,fun);
}
else{ //DOM0级事件模型
obj["on"+type]=fun;
}
}
function stopBubble(ev){ //阻止冒泡；
var e=event||ev; //浏览器兼容
if(e.stopPropagation){
e.stopPropagation();
}
else{
e.cancelBubble=true;
}
}
for(var i=0;i<divs.length;i++){
bindEvent(divs[i],"click",function(ev){
alert(this.id);
stopBubble(ev); //调用
})
}
//(2) 阻止默认事件
function prevent(ev){ //阻止默认事件；
var e=event||ev;
if(e.preventDefault){
e.preventDefault();
}
else{
window.event.returnValue=false;
}
}
link.onclick=function(ev){ //调用
prevent(ev);
}
</script>
</body>
</html>
