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