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

標籤：執行   nod   瀏覽器   strong   geo   mon   過程   parent   利用   

 

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節點之間的關聯變少了，這樣也就減少了因循環參考而帶來的記憶體流失發生的機率。

 

 

 

 

JavaScript事件代理和委託（Delegation） - majian_1987的專欄 - 部落格頻道 - CSDN.NET.html

 

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

捕鳥王"Bird Catcher 王中之王King of Kings 虔誠者Pious 宗教信仰捍衛者 Defender of the Faith. 卡拉卡拉紅鬥篷 Caracalla red cloak

簡稱：： Emir Attilax Akbar 埃米爾 阿提拉克斯 阿克巴

全名：：Emir Attilax Akbar bin Mahmud bin  attila bin Solomon Al Rapanui 

埃米爾 阿提拉克斯 阿克巴 本 馬哈茂德 本 阿提拉 本 所羅門  阿爾 拉帕努伊   

常用名：艾提拉（艾龍），   EMAIL:[email protected]

轉載請註明來源：attilax的專欄   http://www.cnblogs.com/attilax/

--Atiend

 

 

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