我怎么加了event.stopPropagation();还是没阻止掉?
我怎么加了event.stopPropagation();还是没阻止掉?
代码如下,哪里错了?
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div id="box">
<!-- <input type="button" value="HTML事件" id="btn" onclick="showMes()"> -->
<input type="button" value="DOM0事件" id="btn2">
<input type="button" value="DOM2事件" id="btn3">
<input type="button" value="IE事件" id="btn4">
</div>
<script type="text/javascript">
//HTML事件,将触发事件放在HTML里面。可以直接写,也可以封装。
function showMes(event){
alert(event.target.nodeName);
event.stopPropagation();
}
function showBox(){
alert("这是放按钮的盒子");
}
var d=document;
var box=d.getElementById("box"),
btn2=d.getElementById("btn2"),
btn3=d.getElementById("btn3"),
btn4=d.getElementById("btn4") ;
//DOM0事件,在js里触发事件,便于修改;当触发的事件=null为删除该事件。
/*btn2.onclick=function(){
alert("这是通过DOM0级添加的事件");
}
btn2.onclick=null;*/ //null不加引号。删除事件后,点击按钮将不再跳出弹框。
//DOM2事件,处理事件addEventListener("其包括三个参数,触发、函数、false"),删除事件removeEventLiatener("同样包含三个参数")。
//注意:DOM2的触发事件不加“on”,且此方法不支持IE浏览器。
/*btn3.addEventListener("click",showMes,false);
btn3.removeEventListener("click",showMes,false);*/
//IE事件
//IE8以及更早浏览器只支持事件冒泡
//添加事件attachEvent("其包含两个参数,触发、函数(触发需要加‘on’)"),删除事件detachEvent("统一包含两个参数")。
//btn4.attachEvent("onclick",showMes);
//btn4.detachEvent("onclick",showMes);
//封装一个DOM0,DOM2,IE事件,谁行谁用上。
var eventutil={
addhandler:function(element,type,handler){
if(element=addEventListener){
element=addEventListener(type,handler,false);
}else if(element=attachEvent){
element=attachEvent('on'+type,handler);
}else{
element['on'+type]=handler;
}
},
removehandler:function(element,type,handler){
if(element=removeEventListener){
element=removeEventListener(type,handler,false);
}else if(element=detachEvent){
element=detachEvent('on'+type,handler);
}else{
element['on'+type]=handler;
}
}
}
eventutil.addhandler(btn3,'click',showMes);
eventutil.addhandler(box,'click',showBox);//先出来showMes的内容,然后弹出showBox,这就是事件冒泡,逐级往上往外触发。
//eventutil.removehandler(btn3,'click',showMes);
//组织事件冒泡
</script>
</body>
</html>