JS事件總結

2022-01-11 07:27:19 字數 2240 閱讀 4796

一、html事件處理程式

1.dom0級事件處理程式

實際上可以在事件處理程式中通過this訪問元素的任何屬性和方法。

也可以刪除通過dom0級方法指定的事件處理程式

btn.onclick = null;  // 刪除事件處理程式

dom0級只支援乙個**函式

2.dom2級事件處理程式

dom2級事件定義了兩個方法,用於處理指定和刪除事件處理程式的操作:addeventlistener()和removeeventlistener()。所有dom節點都包含

這兩個方法,並且它們都接受3個引數:要處理的事件名、事件處理函式和乙個布林值。布林值為true表示在捕獲階段呼叫事件處理程式,反之在

冒泡階段呼叫事件處理程式。

使用dom2級處理方法新增事件的主要好處是可以新增多個事件處理程式,如上所示。

這兩個事件處理程式會按照新增他們的順序觸發,因此先顯示元素id,然後顯示 hello wolrd。

通過addeventlistener()新增的事件只能通過removeeventlistener()來移除,移除時新增的引數與新增處理程式時使用的引數相同。

這也意味著通過addeventlistener()新增的匿名函式將無法移除。

var btn = document.getelementbyid("mybtn");

var handler = function

() btn.addeventlistener("click",handler,false

); btn.removeeventlistener("click",handler,false

); btn.addeventlistener("click",function

());

只會彈出hello world

ie實現了dom中類似的兩個方法:attachevent()和detachevent()。都會被新增到冒泡階段

3.跨瀏覽器事件處理

var eventutil = 

else

if(element.attachevent) else

},removehandler:

function

(element, type, handler)

else

if(element.detachevent) else

}}

eventutil增強:

var eventutil = 

else

if(element.attachevent) else

},removehandler:

function

(element, type, handler)

else

if(element.detachevent) else

},gettarget:

function

(event) ,

getevent:

function (event) ,

preventdefault:

function(event)

else

},stoppropagation:

function(event)

else

}}

4.焦點事件

焦點事件會在頁面元素獲得或失去焦點時觸發。利用這些事件並與document.hasfocus()方法及document.activeelement屬性配合,

可以知曉使用者在頁面上的行蹤。

docuement.documentelement (標準模式)           document.body(混雜模式)

5.鍵盤與文字事件

keydown:當使用者按下鍵盤上的任意鍵時觸發,如果按住不放的話,會重複觸發此事件。

keypress:當使用者按下鍵盤上的字元鍵時觸發,如果按住不放的話,會重複觸發此事件。按下esc鍵也會觸發該事件。

keyup:當使用者釋放鍵盤上的鍵時觸發。

6.事件委託優化

通過把事件處理程式指定給較高層次的元素,同樣能夠處理該區域中的事件

var body =document.body;

eventutil.addhandler(body, "click", function

() })

JS事件監聽總結

定義 事件型別 是乙個用來說明發生什麼型別事件的字串 事件處理程式或事件監聽程式是處理或響應事件函式 當物件上註冊的事件處理程式被呼叫時,我們會說瀏覽器 觸發 和 派生 了事件 事件傳播 是瀏覽器決定哪個物件觸發其事件處理程式的過程 winow事件 window.load window.unload...

js總結 (7)事件

原始的 相容性好 li.onclick fn 乙個事件繫結多個函式的方法 li.addeventlistener click fn,false 注意這裡要加引號,不要on 1.冒泡 碰到父子元素結構的時候,當我們給他設定事件的時候,最後的布林值設false時 就會發生 冒泡 事件,從逐往上面冒。阻止...

JS事件個人小總結

事件的概念 事件型別 在下方總結的各種事件就是事件型別 事件源 觸發這個事件的元素就叫事件源 事件 就是瀏覽器,使用addeventlistener的方法新增事件 關於事件 的更多介紹請看 事件處理程式 函式 當你觸發事件以後要執行的 塊就是事件處理程式。滑鼠事件 鍵盤事件 input事件 全域性事...