JS中的事件機制

2022-07-31 06:03:16 字數 1678 閱讀 7719

1、事件的觸發和傳播

事件被使用者輸入系統觸發,並按照dom依次向上傳播。這是兩種行為,瀏覽器提供了兩種方式來控制,即preventdefault(取消事件觸發)、stoppropagation(取消事件傳播)。所以jquery對兩種行為的控制是分開的,具體如下圖。

2、自定義事件

js中事件分兩種型別,瀏覽器定義的基本事件型別,譬如click,blur,change,mouseover等,還支援使用者自定義事件型別。

事件可以使用者自定義,自定義事件通過繫結自定義事件到dom元素和觸發dom上的自定義事件兩部,jquery的做法如下:

使用bind繫結自定義事件名,並附加上處理函式,提供頁面入口,供使用者觸發,而後系統使用trigger觸發事件。

3、jquery的.bind()事件處理方法,現今bind方法已棄用,鼓勵使用on()

bind方法提供了幾種基本能力

1、在某乙個元素上繫結乙個或多個事件,並提供各自的處理函式

2、支援傳入事件資料和事件物件

3、對雙擊事件的處理,需要依賴於使用者的作業系統和瀏覽器,使用者可以配置雙擊間隔頻率,瀏覽器的識別不一

為元素繫結多個事件,並提供各自的事件處理函式,this為元素物件

支援事件和事件資料的傳入,使用者傳入的資料,預設掛載在event.data屬性上,事件的處理函式,預設接收乙個事件物件作為引數。bind物件可以接收三個引數,接收三個引數時,第乙個是事件型別,第二個是事件資料,第三方是資料處理函式。由於是事件處理函式,處理事件,事件資料要被事件函式在閉包裡使用,所以資料資料的傳遞最好使用三個引數的bind方法,如果閉包中直接使用外部資料,他使用的是資料變更後的,最後資料,不能使用變更過程中的資料。通過bind第二個引數引數,他使用的是變數的資料副本,這樣變數怎麼賦值都不影響他當時接收的值。如下:

以上兩個彈出的message均為not in the face 

各自使用,變數變化過程中的資料。

4、jqquery提供的事件方法,都有兩種觸發方法,一種是繫結的html標籤自動觸發,也可以通過呼叫trigger方法手動去觸發。

一般帶引數的事件方法是繫結方法,不帶引數的方法是觸發方法,觸發也可以通過trigger事件觸發,即 $('#tdata').trigger('contextmenu');

5、jquery使用on()代替bind()向dom元素之上繫結事件,off()和on()對應,用於解綁繫結到dom元素上的事件。

js中的事件機制及事件

1.事件 js和html之間的互動是通過事件來實現的。事件描述的是文件或瀏覽器特定的互動瞬間。2.事件流 描述的是從頁面中接收事件的順序。包括 ie事件冒泡流和netscape事件捕獲流。事件冒泡流是指從最具體節點出發依次往上走到較不具體的節點。事件捕獲流是指從較不太確定的節點出發到最具體的節點。d...

js的事件機制

js的事件機制 解釋 當我們的行為動作滿足了一定的條件後,會觸發某事務的執行。內容 1.單雙擊事件 單擊 onclick 當滑鼠單擊時候會觸發 雙擊 ondbclick 當滑鼠雙擊時候會觸發 2.滑鼠事件 onmouserover 當滑鼠懸停在某個html元素上的時候觸發 onmousermove ...

js事件的機制

1 html事件處理程式 按鈕1 2 dom0級事件處理程式 按鈕2 document.getelementbyid btn2 onclick function document.getelementbyid btn2 onclick null 取消事件 3 dom2級事件處理程式 優點支援多個事件...