一個(gè)事件其實(shí)在頁(yè)面上 有多個(gè)元素相應(yīng)事件處理,點(diǎn)擊頁(yè)面上的一個(gè)button,會(huì)發(fā)生什么?其實(shí) 是相當(dāng)于先后點(diǎn)擊了按鈕,它的容器,及這個(gè)頁(yè)面.也就是說(shuō)沒一個(gè)元素都按照特定的順序響應(yīng)那個(gè)事件.事件的發(fā)生順序在IE和mozilla在事件支持上的主要差別.
? 事件流
?? 冒泡技術(shù).冒泡型事件的基本思想,事件按照從特定的事件目標(biāo)開始到最不確定的事件目標(biāo).例如:
??? <html>
??????? <head>
??????????? test
??????? <head>
????????<body onclick="handle()">
???????????? <div onclick="handle1()">click</div>
??????? </body>
??? </html>
? IE5.5順序是div??--body--document.
?在IE6中div-body--html--document.
?mozilla的順序是div--body--html--html--document--window.
? 還有另外一種技術(shù):捕獲型事件,它的執(zhí)行順序正好和冒泡技術(shù)相反,從document開始到div結(jié)束.
DOM事件流?
???? 同時(shí)支持2種事件,但是捕獲型事件先發(fā)生.2種事件流會(huì)觸及DOM中的所有對(duì)象,從document開始,也在document結(jié)束.DOM事件流最獨(dú)特的性質(zhì)是,文本節(jié)點(diǎn)也會(huì)觸發(fā)事件(在IE不會(huì)),所以如果點(diǎn)擊click, dom事件是這樣的:
? 首先window--document--body--div--click.
? 然后click--div--body--document--window.
所以一個(gè)事件處理函數(shù)在DOM瀏覽器中會(huì)執(zhí)行2次.
給事件指定處理函數(shù)? 的做法比較簡(jiǎn)單?
var?obj = document.getElementById("id");
obj.onclick=function(){}
或者直接在html標(biāo)簽里加onclick="function-name"
這兩種方式是在目前所有流行的瀏覽器種都可以使用.但是如何為每個(gè)事件分配多個(gè)處理函數(shù)呢?
IE的做法:
?? 在IE? 中,每個(gè)元素和window對(duì)象都有2個(gè)方法:attachEvent()和detachEvent(); attachEvent用來(lái)給一個(gè)事件附加事件處理函數(shù). 而detachEvent用來(lái)將事件處理函數(shù)分離.每個(gè)方法都有2個(gè)參數(shù):要分配的事件處理函數(shù)的名字(例如:onclick)和一個(gè)函數(shù)引用.
例如:
var fnClick=function(){alert("ss")}
var fnClick1=function(){alert("sss")}
var obj=document.getElementById("id")
obj.attachEvent("onclick",fnClick);
obj.attachEvent("onclick",fnClick1);
obj.detachEvent("onclick",fnClick);
事件的執(zhí)行順序是按照添加的順序執(zhí)行的.
DOM方法
???? dom中對(duì)應(yīng)的方法是addEventListener()和removeEventListener ,這兩個(gè)方法有3個(gè)參數(shù),事件名稱,要分配的函數(shù)和處理函數(shù)是用于冒泡階段還是捕獲階段.如果事件處理函數(shù)是用在捕獲階段,第三個(gè)參數(shù)為true,冒泡階段為false.用法和IE中的用法一樣,不再多說(shuō)了,就舉一個(gè)例子吧:
var fnClick=function(){alert("ss")}
var fnClick1=function(){alert("sss")}
var obj=document.getElementById("id")
obj.addEventListener("click",fnClick,false);
obj.addEventListener("click",fnClick1,false);
obj.removeEventListener("click",fnClick,false);
注意這里的是事件名稱"click",不是要分配的事件處理函數(shù)的名字"onclick",自己體會(huì)一下吧.
如何獲取事件對(duì)象:
??? 獲取事件信息是很重要的事情,事件對(duì)象只在事件發(fā)生時(shí)被創(chuàng)建,而且只有在事件處理函數(shù)中可以訪問,當(dāng)所有的事件處理函數(shù)結(jié)束后,事件對(duì)象被銷毀.
IE和DOM在獲取事件對(duì)象上也是有差別的.
IE中,事件對(duì)象時(shí)window的一個(gè)屬性event,也就是說(shuō)必須在事件處理函數(shù)中這樣訪問:
obj.onclick=function(){obj 1= window.event;}
盡管它是window的屬性,event對(duì)象也是只能在事件發(fā)生時(shí)訪問.
DOM的準(zhǔn)則說(shuō)明,event對(duì)象必須座位唯一的參數(shù)傳遞給事件處理函數(shù),所以在DOM瀏覽器中訪問對(duì)象有兩種方法:
1.obj.onclick=function(){obj1=arguments[0]}
2.obj.onclick=function(envent){}
事件的屬性:介紹幾個(gè)比較常用的
IE:
altKey???????????????? boolean????????????????????????????????????????? true 按下alt健
button???????????????? integer??????????????????????????????????????????? 0=未按鍵,
??????????????????????????????????????????????????????????????????????????????? 1=按下左鍵,
??????????????????????????????????????????????????????????????????????????????? 2=右健,
????????????????????????????????????????????????????????????????????????????????3=同時(shí)按左右,
??????????????????????????????????????????????????????????????????????????????? 4=按下中鍵,
????????????????????????????????????????????????????????????????????????????????5=左鍵+中鍵,
????????????????????????????????????????????????????????????????????????????????6=右鍵+中鍵,
????????????????????????????????????????????????????????????????????????????????7=三個(gè)健子一起按下
cancelBuble??????????boolean??????????????????????????????????????????? 設(shè)置成true 會(huì)停止事件向上冒泡.
fromElement???????? element???????????????????????????????????????? 鼠標(biāo)事件中,鼠標(biāo)所離開的元素.
srcElement??????????????????????????????????????????????????????????????? 引起事件的元素
toElement????????????????????????????????????????????????????????????????? 鼠標(biāo)事件中,鼠標(biāo)所進(jìn)入的元素
type????????????????????? string?????????????????????????????????????????? 事件的名稱.
DOM中:
bubbles??????????????? boolean???????????????????????????????????????? 表示事件是否是否在冒泡階段中
cancelable??????????? ''??????????????????????????????????????????????????? 表示事件能否取消.
charCode?????????????????????????????????????????????????????????????????? 按下健的unicode值,和IE的keyCode不一樣
currentTarget???????????????????????????????????????????????????????????? 事件目前所指向的元素
detail??????????????????? integer??????????????????????????????????????????? 鼠標(biāo)點(diǎn)按鈕被點(diǎn)擊的次數(shù)
eventPhase?????????? integer??????????????????????????????????????????? 1=捕獲階段,2=在目標(biāo)上,3=冒泡階段
isChar????????????????? Boolean????????????????????????????????????????? 表示按鍵是否時(shí)字符
preventDefault???????Function?????????????????????????????????????? 調(diào)用這個(gè)方法可以終止事件的默認(rèn)行為
relatedTaget?????????????????????????????????????????????????????????????? 事件的第二個(gè)目標(biāo),經(jīng)常用戶鼠標(biāo)事件.
stopPropagation??????????????????????????????????????????????????????調(diào)用這個(gè)方法,組織事件將來(lái)事件的冒泡.