html内的Dom事件_668dom-CSDN博客

本文链接：https://blog.csdn.net/douyunqian668/article/details/52749327

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>表单标签</title>

</head>
<body>
<div id="box">
<input value="btn3" id="btn3" type="button">
<a href="a0003.html" id="go">跳转</a>
</div>
<script>
function showMe(event)
{
alert(event.target.nodeName);
event.stopPropagation();//不会一直往上面冒泡了，特别有用；
}
function showBox()
{
alert("Box");
}
function stopGo(event)
{ event.stopPropagation();
event.preventDefault();
}
var q=document.getElementById("btn3");
var q1=document.getElementById("box");
var qa1=document.getElementById("go");
//添加句柄
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.attachEvent){
element.detachEvent("on"+type,handler);

}else{
element['on'+type]=null;



}

},

//获取事件
getEvent:function(event){

return event?event:window.event;


},

//阻止时间的默认行为
preventDefault:function(event){
if(event.preventDefault){//判断的时候不要加括号

event.preventDefault();
}else{
event.returnValue=false;

}


},
//停止冒泡事件
stopPropagation:function(event)
{
if(event.stopPropagation)//判断的时候不要加括号
{
event.stopPropagation();
}else{

event.cancelBubble=true;
}




},
//获取元素属性
getType:function(event)
{
return event.type;
},
getElement:function(event)
{
return event.target || event.srcElement;

}



}
//
EventUtil.addHandler(q,"click",showMe);
EventUtil.addHandler(q1,"click",showBox);
EventUtil.addHandler(qa1,"click",stopGo);

</script>
</body>
</html>