JavaScript事件、event作用講解

event概念及作用

在觸發DOM上某個事件時,會產生一個事件對象event,這個對象包含著所有事件相 關的信息,包含導致事件的元素,事件的類型以及其他的與特定事件相關的信息。

n它是事件綁定中的一個隱藏的參數,可以通過arguments[0]來獲取

n也可以叫事件源對象,這裡面包含瞭關於這次事件的相關信息

獲取方式(兼容問題)

n在W3C標準中,直接在函數中聲明該參數即可

btn.onclick = function(event) {

//這裡就可以使用瞭

};

n兼容性寫法,支持老版本的IE

var ev = ev ? ev : window.event;

var ev = ev || window.event;

event.button屬性介紹

alert(event.button); alert(ev.which);

//如果當前event是鼠標事件,則會有一個button屬性,它是一個數字

0代表鼠標按下瞭左鍵 || 1代表按下瞭滾輪 || 2代表按下瞭右鍵

n不過老版本的IE並沒有遵守W3C的規范,它的button屬性含義如下

nonmousedown/onmouseup

1鼠標左鍵 2鼠標右鍵3左右同時按4滾輪5左鍵加滾輪 6右鍵加滾輪 7三個同時

n目前IE11.0版本,無兼容性問題

鼠標事件中獲取鼠標的位置屬性介紹(兼容問題)

blob.png

event.clientX鼠標相對於瀏覽器窗口可視區域的X坐標(窗口坐標),可視區域不包括工具欄和滾動條。

event.pageX類似於event.clientX,但它們使用的是文檔坐標而非窗口坐標。(ie8及以下不支持)

event.offsetX鼠標相對於事件源元素(srcElement)的X坐標。

event.screenX鼠標相對於用戶顯示器屏幕左上角的X,Y坐標。

鍵盤事件(keyup、keydown、keypress)*

組合鍵ctrlKey、altKey、shiftKey

if(event.keyCode == 13 && event.ctrlKey) {

//發送消息

}

keyCode/which兼容

event.keyCode || event.which

alert(event.which); //IE不支持(ie8)

事件的冒泡(事件從子節點向上依次傳遞給父節點)

IE的事件流叫做事件冒泡(event bubbling) ,即事件開始時由最具體的元素(文檔中嵌套 層次最深的那個節點)接收,然後逐級向上傳播到較為不具體的節點(文檔)

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *