DOM 事件屬性補充

2021-08-01 09:25:11 字數 1489 閱讀 6357

1.      dom2事件處理程式的新增:利用addeventlistener()方法新增

a)        格式:節點.addeventlistener(「事件名稱」,  函式名,  事件流);

b)        注意事項:

l  同一節點可以新增多個相同的事件,這些事件會依次執行

l  刪除事件時需要用到removeeventlistener(),格式:節點.removeeventlistener(「事件名稱」,  函式名,  事件流)

l  事件名稱不包含on

l  函式名不加括號

l  事件流的值為true或者false

2.      事件流:所謂事件流就是事件的執行順序,兩種常用方式:事件捕獲、事件冒泡

a)        事件捕獲:事件的執行順序為從大到小

b)        事件冒泡:事件的執行順序為從小到大,瀏覽器預設

3.      event物件:作用是用來儲存事件資訊,如儲存事件的型別,事件目標等,該物件不需要建立,在事件被新增的時候自動就會生成乙個event物件,並且以引數的形式傳遞到事件處理函式中了,在事件處理函式中可以直接使用該物件

4.      event物件常用屬性屬性/

方法 型別

讀/寫

說明 cancelable

boolean

唯讀表明是否可以取消事件的預設行為

bubbles

boolean

唯讀表明事件是否冒泡

type

string

唯讀表示要觸發的事件型別

currenttarget

element

唯讀其事件處理程式當前正在處理的事件的那個元素

target

element

唯讀事件的目標

keycode 整數

唯讀被按下或釋放的鍵的鍵碼,這個引數對keydown和keyup有用,預設值為0

ctrlkey

boolean

唯讀表明是否按下了ctrl鍵,預設值為false

altkey

boolean

唯讀表明是否按下了alt鍵,預設值為false

shiftkey

boolean

唯讀表明是否按下了shift鍵,預設值為false

screenx、screeny

整數唯讀

事件相對於螢幕的x、y座標

clientx、clienty

整數唯讀

事件相對於視口的x、y座標

offsetx、offsety

整數唯讀

游標相對於目標元素邊界的x、y座標

preventdefault()

function

唯讀取消事件的預設行為,如果cancelable為true則可以

stoppropagation()

function

唯讀取消事件的進一步捕獲或冒泡,如果bubbles為true則可以使用這個方法

DOM事件物件的屬性

事件物件event的屬性 屬性 方法 型別 說明 bubbles 布林值,表示事件是否冒泡 cancelable 布林值,表示是否可以取消事件的預設行為 currenttarget 元素,當前事件處理程式所在的元素 defaultprevented 布林值,true表示以及呼叫preventdefa...

Dom操作補充

dom查詢方式 直接查詢 var obj document.getelementbyid i1 間接查詢 檔案內容操作 innertext 僅僅查詢文字內容 innerhtml 查詢全部內容 文字和標籤 舉例 doctype html html lang en head meta charset u...

DOM 事件(鍵盤事件)

onkeydown 事件會在使用者按下乙個鍵盤按鍵時發生。onkeydown onkeypress onkeyup onkeydown事件在很多小遊戲上應用較多,比如需要控制上下左右的很多遊戲,如2048,貪吃蛇,俄羅斯方塊等等。keydown function bind this 然後就可以通過鍵...