js網頁特效（四）事件

1.事件

（1）事件物件的相容性寫法

var event = event || window.event;

event物件常用屬性

屬性         作用
-----------------------------------------------------
data        返回拖拽物件的URL字串（dragDrop）
width       該視窗或框架的高度
height      該視窗或框架的高度
pageX       游標相對於該網頁的水平位置（ie無）
pageY       游標相對於該網頁的垂直位置（ie無）
screenX     游標相對於該螢幕的水平位置
screenY     游標相對於該螢幕的垂直位置
target      該事件被傳送到的物件
type        事件的型別
clientX     游標相對於該客戶區的水平位置 
clientY     游標相對於該客戶區的垂直位置

三個事件的重要座標：

clientX clientY
當前視窗的左上角為基準點

pageX pageY
以當前文件的左上角為基準點

screenX screenY
當前螢幕的左上角為基準點

注意：
IE678不支援pageX和pageY 但是我們可以採取另一種方式
client和documentElement.scroll在IE678中都支援

var pageY = event.pageY || event.clientY +
            document.documentElement.scrollTop;
var pageX = event.pageX || event.clientX + 
            document.documentElement.scrollLeft;

示例程式碼：

document.onclick = function (event) {
        //var event = event || window.event;
    var event = eventUtil.getEvent(event);

        console.log("client: " + event.clientX + "--" + event.clientY);//瀏覽器
        //page有相容問題 client沒有 我們可以用client來計算page
  //var pageX = event.pageX || event.clientX + document.documentElement.scrollLeft;
        //var pageX = getPageX(event);
    var pageX = eventUtil.getPageX(event);

  //var pageY = event.pageY || event.clientY + document.documentElement.scrollTop;
    var pageY = getPageY(event);

    console.log("page: " + event.pageX + "--" + event.pageY);//頁面

    console.log("screen: " + event.screenX + "--" + event.screenY);//螢幕
};

常用事件：

    onmouseover  滑鼠經過
    onmouseout  滑鼠離開
    onmousedown  滑鼠按下
    onmouseup    滑鼠彈起      
    onmousemove  滑鼠移動

其他內容：

1.清除選中的內容

window.getSelection ? window.getSelection().removeAllRanges()  
                    : document.selection.empty();  //三目運算
正常瀏覽器支援：window.getSelection() 
IE678以下支援：document.selection 
　

2.判斷文字選中

 window.getSelection ? window.getSelection().toString() 
                : document.selection.createRange().text;//三目運算子

（2）事件註冊的兩種方式

element.addEventListener(“事件型別”,”事件處理函式”,”是否使用捕獲”)

特點：

addEventListener的好處是不會將其他事件覆蓋，但是有相容性問題

removeEventListener可以移除指定事件

addEventListener便於管理事件佇列 但一般用on的就可以了比較簡單

（3）事件冒泡的三個階段

1捕獲階段
2目標階段   //執行當前物件的事件處理程式
3冒泡階段

阻止事件冒泡：

//相容性寫法
function stopPropagation(event) {
    if (event.stopPropagation) {
        event.stopPropagation();
    } else {
        event.cancelBubble = true;
    }
}

事件相容性總結（封裝函式）：

function getEvent(event) {
//事件的相容性
return event || window.event;
}

---

//page的相容性
function getPageX(event) {
return event.pageX || event.clientX + document.documentElement.scrollLeft;
}
function getPageY(event) {
return event.pageY || event.clientY + document.documentElement.scrollTop;
}

---

//冒泡事件的相容性問題
function stopPropagation(event) {
if (event.stopPropagation) {
    event.stopPropagation();
} else {
    event.cancelBubble = true;
}
}

---

//獲取目標事件相容性的問題
function getTarget(event) {
return event.target || event.srcElement;
}

---

//對相容性封裝的函式
var eventUtil = {
getEvent: function (event) {
    return event || window.event;
},
getPageX: function (event) {
    return event.pageX || event.clientX + document.documentElement.scrollLeft;
},
getPageY: function (event) {
    return event.pageY || event.clientY + document.documentElement.scrollTop;
},
stopPropagation: function (event) {
    if (event.stopPropagation) {
        event.stopPropagation();
    } else {
        event.cancelBubble = true;
    }
},
getTarget: function (event) {
    return event.target || event.srcElement;
}
};

2.滑鼠事件和鍵盤事件

常用滑鼠事件：

mousedown、mouseup、mousemove、mouseover、mouseout、click、dblclick

onmousedown滑鼠按下 onmouseup滑鼠彈起

onmouseclick=onmousedown+onmouseup

常用鍵盤事件：

keydown、keypress、keyup onkeydown鍵盤按下 onkeyup鍵盤彈起

onkeypress=onkeydown+onkeyup

onkeydown onkeyup 輸出的是鍵盤碼 onkeypress輸出的是ASCII碼錶