Atitit事件代理機制原理 基于css class的事件代理

Atitit事件代理機制原理 基于css class的事件代理

​​1.1. 在javasript中delegate這個詞經常出現，看字面的意思，代理、委托1​​

​​1.2. 事件代理1​​

​​1.3. 代理标準化規範1​​

​​1.3.1. jQuery和Dojo中delegate函數2​​

​​1.3.2. 優點2​​

1.1. 在javasript中delegate這個詞經常出現，看字面的意思，代理、委托

如果我們不想或不能夠直接操縱目标對象，我們可以利用delegate建立一個代理對象來調用目标對象的方法，進而達到操縱目标對象的目的。代理對象要擁有目标對象的引用。這就是事件代理(也就是說不會直接去操縱對象)

注冊事件：：綁定    cls:cls_left >>fun

執行事件，周遊obj class name,for exe cls fun..

1.2. 事件代理

首先介紹一下JavaScript的事件代理。事件代理在JS世界中一個非常有用也很有趣的功能。當我們需要對很多元素添加事件的時候，可以通過将事件添加到它們的父節點而将事件委托給父節點來觸發處理函數。這主要得益于浏覽器的事件冒泡機制

1.3. 代理标準化規範

// 擷取父節點，并為它添加一個click事件

document.getElementById("parent-list").addEventListener("click",function(e) {

  // 檢查事件源e.targe是否為Li

  if(e.target && e.target.nodeName.toUpperCase == "LI") {

    // 真正的處理過程在這裡

    console.log("List item ",e.target.id.replace("post-")," was clicked!");

  }

});

1.3.1. jQuery和Dojo中delegate函數

下面看一下Dojo和jQuery中提供的事件代理接口的使用方法。

首先是jQuery：

$("#link-list").delegate("a", "click", function(){

  // "$(this)" is the node that was clicked

  console.log("you clicked a link!",$(this));

jQuery的delegate的方法需要三個參數，一個選擇器，一個時間名稱，和事件處理函數。

1.3.2. 優點

通過上面的介紹，大家應該能夠體會到使用事件委托對于web應用程式帶來的幾個優點：

1.管理的函數變少了。不需要為每個元素都添加監聽函數。對于同一個父節點下面類似的子元素，可以通過委托給父元素的監聽函數來處理事件。

2.可以友善地動态添加和修改元素，不需要因為元素的改動而修改事件綁定。

3.JavaScript和DOM節點之間的關聯變少了，這樣也就減少了因循環引用而帶來的記憶體洩漏發生的機率。

作者:: 綽号:老哇的爪子claw of Eagle 偶像破壞者Iconoclast image-smasher