事件繫結和事件委託區別

2022-09-14 12:15:09 字數 1158 閱讀 2428

靜態繫結,也是最直接的事件繫結【通過事件屬性,直接顯示的給元素繫結事件,例如

、、、、、、、

該方式缺點:當頁面多元素都要新增事件時,定義繁瑣。函式名稱定義改變,一次要修改兩個地方。

動態繫結:

關於事件監聽的適配:因為ie 有自己的事件監聽 【attachevent()detachevent() 分別用於事件監聽

obtn.attachevent('onclick',funcname1); //ie 新增 監聽

obtn.detachevent('onclick',funcname1); ////ie 移除 監聽

所以新增監聽之前可以先判斷一下 dom元素是否存在屬性 attachevent ,有就走 使用 attachevent()新增監聽邏輯,沒有就 addeventlistener()

要了解實現委託,就必須先了解事件捕獲和事件冒泡,別人網上有很多總結 【可以看看這篇,**並茂,比較好理解】

事件委託應用場景: 如果一類元素數量多且都需要加上js事件時,通過迴圈乙個乙個的為每個元素單獨新增js事件顯然造成記憶體的浪費。這樣的場景就適合用事件委託。

事件委託本質時事件冒泡的應用。

大致流程:為父元素新增事件,點選子元素是由於事件冒泡,新增的會傳遞的會向上傳遞到父元素,父元素捕獲到事件就進行 源頭判斷【 ev.target 】

在進行相應處理就好了。

ex:

<

ul id

="parent"

>

<

li>c1

li>

<

li>c2

li>

<

li>c3

li>

ul>

<

script

>

(function

() }

})();

script

>

事件委託優點:

減少冗餘重複**的書寫,對於同乙個父節點下面類似的子元素,可以通過委託給父元素的監聽函式來處理每個子節點的事件。

不會因為元素的變動而改變事件的繫結

對dom元素的引用少了,有效避免記憶體洩露問題。

事件繫結與事件委託

事件繫結 為什麼要用到事件繫結?我的理解是同乙個物件無法新增多個事件?如果新增多個事件的話按照執行順序來說下邊的事件會把上面的替換 就像以下 var odiv document.getelementbyid div1 odiv.onclick function odiv.onclick functi...

jQuery事件繫結與事件委託

在jquery類庫中,事件繫結與事件委託的用法受到了廣泛的關注。不僅如此,這還成了當今前端攻城獅的 熱門面試題目。十次面試有七八次會問到這個問題,因此,了解掌握事件的繫結和委託,還是比較重要的。冒泡 眾所周知,html的dom結構自外而內,層層包裹。如 div p span a,這樣式的,當我們的事...

事件和委託 委託和事件區別 不斷更新

01 簡單的委託 那委託需要承載哪些資訊呢?首先,它儲存了方法名,還有引數列表 方法簽名 以及返回的型別。比如 delegate string 返回型別 processdelegate int i 這就是乙個委託的定義。藍色部分是宣告委託的關鍵字,紅色部分是返回的型別,而黑色部分是委託的型別名,和乙...