課程記錄整理
<!DOCTYPE html>
<html>
<head>
? ? <meta charset="utf-8">
? ? <title>HTML/DOM0級(jí)/DOM2級(jí)事件處理程序</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級(jí)事件" id="btn2" />
? ? <input type="button" value="DOM2級(jí)事件" id="btn3" />
? ? <a id="go">驗(yàn)證默認(rèn)跳轉(zhuǎn)行為</a>
</div>
<script type="text/javascript">
? ? function htm(){
? ? ? ? alert("我是html事件2即封裝函數(shù)。也是被DOM2級(jí)事件調(diào)用的函數(shù)");
? ? ? ? event.stopPropagation();//阻止冒泡事件，即阻止父元素的showBox事件觸發(fā)
? ? }//html事件2，此事件更改要改兩處，不方便后續(xù)優(yōu)化
? ? function showBox(){
? ? ? ? alert("這個(gè)函數(shù)用于驗(yàn)證冒泡事件")
? ? }
? ? function stopgoto(event){//接收event事件
? // ? ? ?event.stopPropagation();//阻止冒泡
? // ? ? ?event.preventDefault();//阻止默認(rèn)行為，使a的默認(rèn)跳轉(zhuǎn)行為取消
? ? }
? ? var dom0=document.getElementById("btn2");
? ? var dom2=document.getElementById("btn3");
? ? var Box=document.getElementById('Box');//驗(yàn)證冒泡事件
? ? var go=document.getElementById("go");
? ? dom0.onclick=function(){
? ? ? ? alert("我是DOM0級(jí)事件函數(shù)")
? ? }
? ? //dom0.onclick=null;//清除DOM0級(jí)事件
?/* ?dom2.addEventListener("click",htm,false);//此處為添加監(jiān)聽(tīng)事件。所有事件都要去掉ON,例click；調(diào)用函數(shù)htm;冒泡事件false.DOM2級(jí)事件可調(diào)用需要的函數(shù)
? ? dom2.addEventListener("click",function(){
? ? ? ? alert("DOM2級(jí)事件可添加多個(gè)事件，并獲取想要的屬性，this可引用被觸發(fā)的元素，即this表示被觸發(fā)的那個(gè)函數(shù)。見(jiàn)下面示例");
? ? },false);//this十分重要
? ? dom2.addEventListener("click",function(){
? ? ? ? alert(this.value);
? ? },false);//HTML事件沒(méi)法添加多個(gè)事件，DOM0級(jí)可以
? ? //dom2.removeEventListener("click",htm,false);//刪除DOM2運(yùn)用addEventListener() 所添加的事件
? ? //dom2級(jí)事件處理程序在IE中無(wú)效，所以要設(shè)置兼容性,此時(shí)要將DOM2級(jí)事件注釋掉。以下以btn3為例進(jìn)行IE方法演示
?*/
/* ? ?dom2.attachEvent("onclick",htm);//此時(shí)btn3z在IE中可用。此處事件要加上ON，與DOM有所區(qū)別。無(wú)false是因?yàn)镮E8及更早的瀏覽器只支持冒泡事件（false).
? ?// dom2.detachEvent("onclick",htm);//清除 dom2.attachEvent("onclick",htm);事件
*/
? ? //以下設(shè)置函數(shù)，使btn3在多種瀏覽器中均可使用即跨瀏覽器事件處理
? ? var eventUtil={
? ? ? ? //添加句柄.如何給一個(gè)元素添加事件
? ? ? ? addHandler:function(element,type,handler){//type類型無(wú)ON,element給誰(shuí)添加，type添加類型，handler觸發(fā)的操作.target用于獲取事件目標(biāo)
? ? ? ? ? ? if(element.addEventListener){//判斷DOM2級(jí)
? ? ? ? ? ? ? ? element.addEventListener(type,handler,false);
? ? ? ? ? ? }
? ? ? ? ? ? else if(element.attachEvent){//判斷IE
? ? ? ? ? ? ? ? element.attachEvent(type,handler)
? ? ? ? ? ? }
? ? ? ? ? ? else{//判斷DOM0級(jí),低級(jí)和傳統(tǒng)瀏覽器，on為字符串，變量和字符串之間不可用.鏈接
? ? ? ? ? ? ? ?element['on'+type]=handler;//element[onclick] ===element.onclick
? ? ? ? ? ? }
? ? ? ? },
? ? ? ? removeHandler:function(element,type,handler){//刪除句柄。如何給一個(gè)元素刪除事件
? ? ? ? ? ? if(element.removeEventListener){
? ? ? ? ? ? ? ? element.removeEventListener(type,handler,false);
? ? ? ? ? ? }
? ? ? ? ? ? else if(element.detachEvent){
? ? ? ? ? ? ? ? element.detachEvent('on'+type,handler);
? ? ? ? ? ? }
? ? ? ? ? ? else{
? ? ? ? ? ? ? ? element['on'+type]=null;
? ? ? ? ? ? }
? ? ? ? },
? ? ? ? //對(duì)以上函數(shù)封裝判斷事件對(duì)象DOM與IE不同
? ? ? ? getEvent:function(event){//獲取事件。如何獲取兼容所有瀏覽器的事件對(duì)象
? ? ? ? ? ? return event?event:window.event;
? ? ? ? },
? ? ? ? getType:function(event){//獲取事件類型
? ? ? ? return event.type;
? ? },
? ? ? ? getElement:function(event){//如何獲取事件來(lái)自哪個(gè)元素
? ? ? ? ? ? return event.target || event.srcElement;
? ? ? ? },
? ? ? ? preventDefault:function(event){//判斷事件對(duì)象為DOM還是IE，選擇阻止默認(rèn)行為的方法
? ? ? ? ? if(event.preventDefault){//判斷DOM事件對(duì)象，執(zhí)行阻止默認(rèn)行為方法
? ? ? ? ? ? ? event.preventDefault();
? ? ? ? ? } ?else{
? ? ? ? ? ? ? event.returnValue=false;//判斷IE事件對(duì)象
? ? ? ? ? }
? ? ? ? },
? ? ? ? stopPropagation:function(event){//判斷事件對(duì)象為DOM還是IE，選擇阻止事件冒泡的方法
? ? ? ? if(event.stopPropagation){//判斷DOM事件對(duì)象
? ? ? ? ? ? event.stopPropagation()?
? ? ? ? }else{
? ? ? ? ? ? event.cancelBubble=true;//判斷為IE事件對(duì)象
? ? ? ? }
? ? }
}
//通過(guò)選擇判斷可讓其跨瀏覽器兼容.eventUtil這部分內(nèi)容可單獨(dú)放置在一個(gè)event.js文件，再調(diào)用<script src="event.js"/>
? ? eventUtil.addHandler(dom2,'click',htm);//調(diào)用
? ? eventUtil.addHandler(Box,'click',showBox);//調(diào)用id為Box
? ? eventUtil.addHandler(go,'click',stopgoto);//調(diào)用a的頁(yè)面跳轉(zhuǎn)事件，將事件go綁定
?// ? eventUtil.removeHandler(dom2,'click',htm);//刪除調(diào)用
</script>//此部分可放置于單獨(dú)的JS文件調(diào)用
</body>
</html>
