a标签无法通过封装好的方法进行事件添加
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="box" style="background: #ccc;height: 30px;padding: 5px;">
<!-- html事件 -->
<input type="button" id="btn1" value="btn1" onclick="showMsg()">
<!-- DOM0事件 -->
<input type="button" id="btn2" value="btn2">
<!-- DOM2事件 -->
<input type="button" id="btn3" value="btn3">
<!-- 跨浏览器事件 -->
<input type="button" id="btn4" value="btn4">
<!-- 事件对象 -->
<input type="button" id="btn5" value="btn5">
<!-- 事件冒泡 -->
<input type="button" id="btn6" value="事件冒泡">
<!-- 阻止事件冒泡 -->
<input type="button" id="btn7" value="阻止事件冒泡">
<!-- 阻止事件的默认行为 -->
<a id=“goo” href="http://www.baidu.com">默认能跳转到百度，但是被阻止了</a>
</div>
</body>
<script type="text/javascript">
function showMsg() {
alert("hello world");
}
function showMsg2(event){//event是事件
event=event||window.event;
alert(event.type);//输出事件的类型
alert(event.target);//输出事件目标对象
alert(event.target.nodeName);//输出事件目标对象的节点名称
}
function showMsg3() {
alert("你点击了div");
}
function showMsg4(event) {
alert("这次没有点击到div");
event.stopPropagation();//停止事件冒泡
}
function stopHref(event) {
alert(1);
event.stopPropagation();
event.preventDefault();
}
var btn2=document.getElementById('btn2');
var btn3=document.getElementById('btn3');
var btn4=document.getElementById('btn4');
var btn5=document.getElementById('btn5');
var btn6=document.getElementById('btn6');
var box=document.getElementById('box');
var btn7=document.getElementById('btn7');
var goo=document.getElementById('goo');
//DOM0级事件处理程序
btn2.onclick=function(){
alert("这是通过DOM0级添加的事件");
};
//btn2.onclick=null;//删除onclick属性
//普通浏览器DOM2级事件处理程序
//添加事件
btn3.addEventListener("click",showMsg,false);
//DOM2级能添加多个事件
btn3.addEventListener("click",function(){alert(this.value);});
//删除事件
//btn3.removeEventListener("click",showMsg,false);
//IE浏览器下的DOM2级事件处理程序
//添加事件
//btn3.attachEvent("onclick",showMsg);
//删除事件
//btn3.detachEvent('onclick',showMsg);
//跨浏览器事件处理程序
var eventUtil={
//添加句柄
addHandler:function(element,type,handler){
//如果浏览器支持这个方法，那就运行
if(element.addEventListener){
element.addEventListener(type,handler,false);
}else if(element.attachEvent){
element.attachEvent("on"+type);
}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);
}else{
element["on"+type]=null;
}
}
};
//调用处理程序运行事件
eventUtil.addHandler(btn4,'click',showMsg);
//调用处理程序运行事件
eventUtil.addHandler(btn5,'click',showMsg2);
//事件冒泡
eventUtil.addHandler(btn6,'click',showMsg);
eventUtil.addHandler(box,'click',showMsg3);
//阻止事件冒泡
eventUtil.addHandler(btn7,'click',showMsg4);
//阻止事件的默认行为
eventUtil.addHandler(goo,'click',stopHref);
</script>
</html>
