课程记录整理
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML/DOM0级/DOM2级事件处理程序</title>
</head>
<body>
<div id="Box">
<input type="button" value="html事件1" id="btn" onclick="alert('我是html事件1即直接插入')"/>
<input type="button" value="html事件2" id="btn1" onclick="htm()"/>
<input type="button" value="DOM0级事件" id="btn2" />
<input type="button" value="DOM2级事件" id="btn3" />
<a href="http://imooc.com" id="go">验证默认跳转行为</a>
</div>
<script type="text/javascript">
function htm(){
alert("我是html事件2即封装函数。也是被DOM2级事件调用的函数");
event.stopPropagation();//阻止冒泡事件，即阻止父元素的showBox事件触发
}//html事件2，此事件更改要改两处，不方便后续优化
function showBox(){
alert("这个函数用于验证冒泡事件")
}
function stopgoto(event){//接收event事件
// event.stopPropagation();//阻止冒泡
// event.preventDefault();//阻止默认行为，使a的默认跳转行为取消
}
var dom0=document.getElementById("btn2");
var dom2=document.getElementById("btn3");
var Box=document.getElementById('Box');//验证冒泡事件
var go=document.getElementById("go");
dom0.onclick=function(){
alert("我是DOM0级事件函数")
}
//dom0.onclick=null;//清除DOM0级事件
/* dom2.addEventListener("click",htm,false);//此处为添加监听事件。所有事件都要去掉ON,例click；调用函数htm;冒泡事件false.DOM2级事件可调用需要的函数
dom2.addEventListener("click",function(){
alert("DOM2级事件可添加多个事件，并获取想要的属性，this可引用被触发的元素，即this表示被触发的那个函数。见下面示例");
},false);//this十分重要
dom2.addEventListener("click",function(){
alert(this.value);
},false);//HTML事件没法添加多个事件，DOM0级可以
//dom2.removeEventListener("click",htm,false);//删除DOM2运用addEventListener() 所添加的事件
//dom2级事件处理程序在IE中无效，所以要设置兼容性,此时要将DOM2级事件注释掉。以下以btn3为例进行IE方法演示
*/
/* dom2.attachEvent("onclick",htm);//此时btn3z在IE中可用。此处事件要加上ON，与DOM有所区别。无false是因为IE8及更早的浏览器只支持冒泡事件（false).
// dom2.detachEvent("onclick",htm);//清除 dom2.attachEvent("onclick",htm);事件
*/
//以下设置函数，使btn3在多种浏览器中均可使用即跨浏览器事件处理
var eventUtil={
//添加句柄.如何给一个元素添加事件
addHandler:function(element,type,handler){//type类型无ON,element给谁添加，type添加类型，handler触发的操作.target用于获取事件目标
if(element.addEventListener){//判断DOM2级
element.addEventListener(type,handler,false);
}
else if(element.attachEvent){//判断IE
element.attachEvent(type,handler)
}
else{//判断DOM0级,低级和传统浏览器，on为字符串，变量和字符串之间不可用.链接
element['on'+type]=handler;//element[onclick] ===element.onclick
}
},
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]=null;
}
},
//对以上函数封装判断事件对象DOM与IE不同
getEvent:function(event){//获取事件。如何获取兼容所有浏览器的事件对象
return event?event:window.event;
},
getType:function(event){//获取事件类型
return event.type;
},
getElement:function(event){//如何获取事件来自哪个元素
return event.target || event.srcElement;
},
preventDefault:function(event){//判断事件对象为DOM还是IE，选择阻止默认行为的方法
if(event.preventDefault){//判断DOM事件对象，执行阻止默认行为方法
event.preventDefault();
} else{
event.returnValue=false;//判断IE事件对象
}
},
stopPropagation:function(event){//判断事件对象为DOM还是IE，选择阻止事件冒泡的方法
if(event.stopPropagation){//判断DOM事件对象
event.stopPropagation()
}else{
event.cancelBubble=true;//判断为IE事件对象
}
}
}
//通过选择判断可让其跨浏览器兼容.eventUtil这部分内容可单独放置在一个event.js文件，再调用<script src="event.js"/>
eventUtil.addHandler(dom2,'click',htm);//调用
eventUtil.addHandler(Box,'click',showBox);//调用id为Box
eventUtil.addHandler(go,'click',stopgoto);//调用a的页面跳转事件，将事件go绑定
// eventUtil.removeHandler(dom2,'click',htm);//删除调用
</script>//此部分可放置于单独的JS文件调用
</body>
</html>
