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” >默認能跳轉到百度，但是被阻止了</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>
2016-03-28
a的ID用了中文的引號
2016-03-28
var goo=document.getElementById('goo'); ? 這里沒有獲取到A標簽的對象。。。。至于為什么我沒沒搞明白