js第十一天
attachEvent 事件監聽方式
語法:eventTarget.attachEvent(eventNameWithOn, callback)。
eventNameWithOn:事件型別字串,比如 onclick,onmouseover,這裡要帶 on。
callback:事件處理函式,當目標觸發事件時回撥函式被呼叫。
刪除事件
傳統方式
eventTarget.onclick = null
方法監聽註冊方式
eventTarget.removeEventListener(type, listenet [, useCapture])。
type
listenet:移除哪個處理函式。
注意:要用這個刪除事件的話,繫結事件的時候不能用匿名函式,因為那樣不能確定要解綁哪個處理函式。
DOM 事件流
事件流:它描述的是從頁面中接收事件的順序。事件發生時會在元素節點之間按照特定的順序傳播,這個傳播過程即 DOM 事件流。
三個階段:1、捕獲階段 2、當前目標階段 3、冒泡階段。
注意
1、js 程式碼中只能執行捕獲或者冒泡其中的一個階段。
2、傳統方式(如 onclick ) 和 attachEvent 只能得到冒泡階段。
3、addEventListener 的第三個引數如果是 true,表示在事件捕獲階段呼叫事件處理函式;如果是 false(預設為 false),表示在事件冒泡階段呼叫事件處理程式。
事件物件
eventTarget.onclick = function( event ){ }
1、event 就是一個事件物件,它寫到偵聽函式的小括號裡當做形參來看。
2、事件物件只有有了事件才會存在,它是系統自動建立的,不需要傳遞實參。
3、事件物件是事件一系列相關資料的集合。比如滑鼠觸發事件的座標,使用者按下鍵盤上的哪個鍵。
事件物件常見的屬性方法
事件物件的屬性 |
說明 |
e.target | 返回觸發事件的物件 標準 |
e.srcElement | 返回觸發事件的物件 非標準,ie6-8使用 |
e.type | 返回事件的型別,比如click、mouseover,不帶on |
e.cancelBubble | 該屬性阻止事件冒泡,非標準,ie6-8使用 |
e.returnValue | 該屬性阻止預設事件(預設行為),非標準,ie6-8使用,比如不讓連結跳轉 |
事件物件的方法 | 說明 |
e.preventDefault() | 該方法阻止預設事件(預設行為),標準,比如不讓連結跳轉 |
e.stopPropagation() | 阻止冒泡,標準 |