我想知道的jQuery」代表或（爲代表）是如何工作的

有時我用on委託事件，我想知道的jQuery」代表或（爲代表）是如何工作的

dom.addEventListener("click",function(e){ 
    e.target for hander. 
} 
instead: 
dom.on("click",'a'，function(){ 
    $(this).handler.. 
}

所以，我想我可以這樣寫代碼：

function delegate(dom,event,selector,handler){ 
    target = event.target; 
    while selector.dom.not_match event.target 
     target = target.parentNode 
     recheck until match the selector and do handler; 
    end 
}

我已經寫了這個前：

function delegate(dom,event,selector,handler){ 
    dom.addEvent event function(){ 
     target_arr = dom.find(selector); 
     if(event.target in_array target_arr){ 
     do handler 
     }else{ 
     target = target.parentNode until dom. 
     recheck in target_arr; 
     } 
    } 

}

有人知道如何在「代理」或jQuery的工作方法「開」的代表？請給我看代碼簡單描述'代表'..非常感謝。

來源

2012-12-21 igaves

您可以從jqeury中獲取開發代碼並從代碼中學習。 – user1600124

看看jQuery docs for on()，他們很好地解釋了這個概念。

另外，你可以看看source code！

的經驗教訓：

delegate僅僅是on的包裝使用不同的參數順序
on確實只是一些參數正常化和處理one，但代表再到jQuery.event.add(this, types, fn, data, selector);
event.add確實做了很多驗證，處理多種類型和特殊情況，推動$.data("events")上的參數，並調用elem.addEventListener(type, jQuery.event.dispatch, false)
event.dispatch然後再次從$.data("events")查詢句柄，並從本機事件生成jqEvent。然後它開始搜索委託事件 - the code for that非常簡單 - 然後將它們推到handlerQueue上，之後直接附加到元素上的常規處理程序。最後，它只是runs the handlerQueue，從委託處理程序開始。

來源

2012-12-21 06:56:42 Bergi

得到的重點，我不明白爲什麼jquery.event.add做那樣，所以爲什麼jquery做到這一點？如此複雜的我想象.. – igaves

仍然寫一個解釋......你可以跳過大部分部分。如果您有興趣查找委託事件元素，請查看[line 350 to 380]（https://github.com/jquery/jquery/blob/master/src/event.js#L350） – Bergi

非常感謝，我創建了，jquery使用匹配dom和傳播發現too.maby我認爲與jq在同一行，使用parentNode檢查當前dom是給出的選擇器中的委託。 – igaves

-3

<!DOCTYPE html> 
<html> 
<head> 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"> 
</script> 
<script> 
$(document).ready(function(){ 
    $("div").delegate("p","click",function(){ 
    $("p").css("background-color","pink"); 
    }); 
}); 
</script> 
</head> 
<body> 

<div style="background-color:yellow"> 
<p>This is a paragraph inside a div element.</p> 
</div> 
<p>This is a paragraph.</p> 

</body> 
</html>

來源

2012-12-21 06:24:49 Azzy

單擊一個段落添加另一個段落。請注意.delegate（）將一個單擊事件處理程序附加到所有段落 - 甚至是新的段落。

  <!DOCTYPE html> 
      <html> 
      <head> 
       <style> 
       p { background:yellow; font-weight:bold; cursor:pointer; 
        padding:5px; } 
       p.over { background: #ccc; } 
       span { color:red; } 
       </style> 
       <script src="http://code.jquery.com/jquery-latest.js"></script> 
      </head> 
      <body> 
       <p>Click me!</p> 

       <span></span> 
      <script> 
       $("body").delegate("p", "click", function(){ 
        $(this).after("<p>Another paragraph!</p>"); 
       }); 
      </script> 

      </body> 
      </html>

另一示例加入

   <!DOCTYPE html> 
      <html> 
      <head> 
       <style> 
       p { color:red; } 
       span { color:blue; } 
       </style> 
       <script src="http://code.jquery.com/jquery-latest.js"></script> 
      </head> 
      <body> 
       <p>Has an attached custom event.</p> 
       <button>Trigger custom event</button> 
       <span style="display:none;"></span> 
      <script> 

       $("body").delegate("p", "myCustomEvent", function(e, myName, myValue){ 
        $(this).text("Hi there!"); 
        $("span").stop().css("opacity", 1) 
          .text("myName = " + myName) 
          .fadeIn(30).fadeOut(1000); 
       }); 
       $("button").click(function() { 
        $("p").trigger("myCustomEvent"); 
       }); 

      </script> 

      </body> 
      </html>

爲版本方法工作：1.4.2

.delegate（選擇器，事件類型，處理程序（eventObject）傳遞）

selector-甲選擇器篩選觸發事件的元素。

eventType - 包含一個或多個以空格分隔的JavaScript事件類型（例如「click」或「keydown」）或自定義事件名稱的字符串。

handler（eventObject） - 觸發事件時執行的函數。

爲版本添加：1.4.2

委託（選擇器，事件類型，EVENTDATA，處理程序（eventObject）傳遞）

selector-的選擇器，以過濾觸發事件中的元素。

eventType - 包含一個或多個以空格分隔的JavaScript事件類型（例如「click」或「keydown」）或自定義事件名稱的字符串。 eventData將傳遞給事件處理程序的數據的映射。

handler（eventObject） - 觸發事件時執行的函數。

爲版本添加：1.4.3

委託（選擇器，事件）

selector-的選擇器，以過濾觸發事件中的元素。

events-要執行的一個或多個事件類型和函數的映射。

來源

2012-12-21 06:32:47

這只是jQuery文檔的副本。 – Barmar

igaves你必須通過jquery.com它會解決你的問題 –

隨着jQuery 1.4.2的推出，引入了一種名爲delegate()的新方法。此方法將處理程序附加到選定/指定元素的一個或多個事件。我們舉個例子吧。我已經創建了一個表並使用委託方法，我將把click事件處理程序附加到每個td元素。

<table border="1" width="200px" cellspacing="5" cellpadding="5"> 
    <tr> 
     <td>Item 1</td> 
     <td>Item 2</td> 
    </tr> 
    <tr> 
     <td>Item 3</td> 
     <td>Item 4</td> 
    </tr> 
</table>

jQuery delegate()方法代碼。

$(document).ready(function(){ 
    $("table").delegate("td","click",function(){ 
     alert('I am' + $(this).text()); 
    }); 
});

它需要3個參數。

選擇
事件類型
事件處理程序

你一定會說，這是與bind()方法非常可能的。以下代碼將用於此目的。

$(document).ready(function(){   
    $("table td").bind("click",function(){ 
     alert('I am' + $(this).text()); 
    }); 
});

然後delegate()什麼新的方法？

bind（）方法會將事件添加到調用時位於頁面上的元素。例如，當調用bind（）時，頁面上只有4個td。稍後，當你動態地在表中增加更多的td時，bind（）將不會將單擊事件處理程序附加到那些td。讓我們擴展我們的演示，並在頁面上放置一個按鈕，以便動態添加td。

<input type="button" value="Add TD" id="btnAdd" /> 

$("#btnAdd").click(function(){ 
    $("table").append("<tr><td>Item 5</td><td>Item 6</td></tr>"); 
});

現在，當您運行此頁面時，您將無法找到新添加的td的點擊事件。

但與delegate()，你會發現新添加的TD的點擊事件。 delegate（）方法添加頁面上的事件，並偵聽新元素並向它們添加事件。 :)

來源

2012-12-21 06:36:50

當你這樣做：

$(selector1).on(event, selector2, function);

jQuery的綁定一個處理程序，以在符合selector1的DOM元素的事件。當此處理程序運行時，它將DOM層次結構從最具體的元素轉到與selector1匹配的元素，並檢查是否有任何元素匹配selector2。如果它找到匹配項，它會調用function以及適當的執行上下文。

這就是on()能夠如何處理創建委託後動態添加的DOM元素上的事件。

來源

2012-12-21 06:59:50 Barmar

我想知道的jQuery」代表或（爲代表）是如何工作的

回答

相關問題