event、Dom

event、Dom

事件處理方法：事件流

事件流分爲兩種：事件冒泡（從裏到外）；事件捕獲（從外到裏）。

IE：只存在事件冒泡

DOM瀏覽器（現代瀏覽器，包括chrome、firefix等）：存在兩種事件流，默認事件冒泡。

DOM 0最先版本，也是DOM規範，兼容全部瀏覽器；缺點：不能同時添加多個事件，若是寫在行內，會污染全局。

DOM 2優勢：能夠累加事件；缺點：要作兼容處理。

DOM 2累加且作兼容示例：

if(document.addEventListener){
p1.addEventListener("click",function(e){//DOM瀏覽器 
alert("hello");
}，true);//true可選值，表明是冒泡事件
p1.addEventListener("click",function(e){
alert("hi");
}.true);
}else{
p1.attachEvent("onclick",function(e){//IE瀏覽器
alert("hello");
});
p1.attachEvent("onclick",function(e){
alert("hi");
});
 }

event 事件對象

獲取事件信息。

clientX 事件屬性返回當事件被觸發時鼠標指針向對於瀏覽器頁面（或客戶區）的水平座標。//對於瀏覽器頁面

clientY 事件屬性返回當事件被觸發時鼠標指針向對於瀏覽器頁面（客戶區）的垂直座標。

screenX 事件屬性可返回事件發生時鼠標指針相對於屏幕的水平座標。//相對於屏幕

screenY 事件屬性可返回事件發生時鼠標指針相對於屏幕的垂直座標。

阻止DOM2事件冒泡：// DOM瀏覽器

e.stopPropagation();

阻止IE事件冒泡：

e.cancelBubble=true;

阻止默認事件://DOM瀏覽器

e.preventDefault();

阻止IE默認事件（一樣阻止任何事件的發生）：

e.returnValue=false;

節點

獲取節點：

var attrs=d1.attributes;

訪問節點：

attrs['id']//訪問元素節點id屬性或訪問id屬性節點
d1.id;
d1.gerAttrbute('id');

IE在table的td/tr,以及select的option不支持innerHTML

var sheets=document.styleSheets(獲取內外全部樣式表)

IE\DOM sheets[0].rule[0].style.height;//調用內部樣式表的第一個的height

DOM sheets[0].cssRule[0].style.height;

最終樣式表（只能獲取，不能設置）

IE:d2.currentStyle.height;

DOM:window.get computedStyle(d2,null).height;