JavaScript之event事件

目錄

1：事件驅動1

2：事件分類2

3：事件對象event3

4：關於鼠標事件對象屬性3

應用：5

5：關於鍵盤事件對象的屬性6

6：目標事件源對象7

7. 事件冒泡7

應用：8

CSS模擬下拉菜單。8

綜合應用：8

 

1：事件驅動

1.事件event

所謂事件就是js偵測到的用戶的操做或是頁面的一些行爲(怎麼發生的)

2.事件源

引起事件的元素。(發生在誰的身上)

3.事件處理程序

對事件處理的程序或是函數 (發生了什麼事)

4.事件對象

當事件發生的時候，具體發生了哪些信息，（當按鍵盤的時候按的哪一個鍵或者鼠標光標在頁面的哪一個位置等等）。

2：事件分類

1.鼠標事件

onclick      點擊鼠標     ondblclick     雙擊鼠標

onmousedown   鼠標按下     onmouseup     鼠標擡起

onmousemove   鼠標移動   

  onmouseover   鼠標放上去  onmouseout    鼠標離開     

onmouseenter  鼠標進入onmouseleave  鼠標離開

2.鍵盤事件

onkeyup    鍵盤擡起     onkeydown    鍵盤按下

onkeypress   鍵盤按下或按住

3. 表單事件

onfocus     得到焦點

onblur     失去焦點

onchange    改變文本區域的內容

 4.頁面事件

onload           當頁面加載完成

onbeforeunload   當頁面卸載完成以前

3：事件對象event

用來記錄一些事件發生時的相關信息的對象。

1.只有當事件發生的時候才產生，只能在處理函數內部訪問。

2.處理函數運行結束後自動銷燬。

如何獲取事件對象：

IE：window.event

火狐ff：對象.on事件=function(event){}

兼容的獲取方式

對象.on事件=function(event){

var evt = event || window.event

}

4：關於鼠標事件對象屬性

相對於瀏覽器位置的：

clientX   當鼠標事件發生的時候，鼠標相對於瀏覽器左上角X軸的位置。

clientY   當鼠標事件發生的時候，鼠標相對於瀏覽器左上角Y軸的位置。

相對於文檔位置的：

pageX     當鼠標事件發生的時候，鼠標相對於文檔X軸的位置。（IE7/8無） （相似於event.clientX、event.clientY）

pageY     當鼠標事件發生的時候，鼠標相對於文檔Y軸的位置。（IE7/8無）

相對於屏幕位置的：

screenX   當鼠標事件發生的時候，鼠標相對於屏幕X軸的位置。

screenY   當鼠標事件發生的時候，鼠標相對於屏幕Y軸的位置。

相對於事件源的位置：

offsetX   當鼠標事件發生的時候，鼠標相對於父元素左上角X軸的位置。

offsetY   當鼠標事件發生的時候，鼠標相對於父元素左上角Y軸的位置。

 

 

應用：

1：光標的實時顯示。

 

 

2：跟隨鼠標的提示框。

 

 

5：關於鍵盤事件對象的屬性

keyCode：得到鍵盤碼（ascll碼）。空格：32  回車13   左上右下：37 38 39 40。which屬性有兼容性問題。 e.keyCode || e.which

ctrlKey：判斷ctrl鍵是否被按下，按下是true,反之是false  布爾值。還有shiftKey   altKey。（使用keydown事件）

type：用來檢測事件的類型。

button：0表明鼠標按下了左鍵 ||  1表明按下了滾輪  ||  2表明按下了右鍵。不過老版本的IE並無遵照W3C的規範，它的button屬性含義以下：1鼠標左鍵 2鼠標右鍵 3左右同時按 4滾輪 5左鍵加滾輪 6右鍵加滾輪 7三個同時。目前IE11.0版本，無兼容性問題。

6：目標事件源對象

IE：事件對象.srcElement

火狐：事件對象.target    e.target     ||e.srcElement

7. 事件冒泡

冒泡型事件：事件按照從最特定的事件目標到最不特定的事件目標(document對象)的順序觸發。

div -> body -> html -> document （由內往外傳遞）

 

事件的捕獲 跟 冒泡相反

 

//不讓事件繼續冒泡,取消冒泡
var e = evt || window.event;
e.cancelBubble = true;//ie8 及 ie8如下
e.stopPropagation(); //其餘瀏覽器

 

應用：

CSS模擬下拉菜單。

 

 

 

綜合應用：

聊天對話框。

//newLi.scrollIntoView();//將元素滾動到可見位置