<!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是事件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>
a標簽的事件無法通過寫好的方法添加，不知道這是為什么
FANR
2016-03-28 04:50:50
