jQuery中delegate()方法的用法詳解
delegate() 方法為指定的元素(屬于被選元素的子元素)添加一個或多個事件處理程序，并規(guī)定當(dāng)這些事件發(fā)生時運行的函數(shù)。下面我們具體來了解一下。
語法結(jié)構(gòu):
代碼如下:
$(selector).delegate(childofselector,type,data,function)
參數(shù)說明：
childSelector 必需。規(guī)定要附加事件處理程序的一個或多個子元素。
event 必需。規(guī)定附加到元素的一個或多個事件。
由空格分隔多個事件值。必須是有效的事件。
data 可選。規(guī)定傳遞到函數(shù)的額外數(shù)據(jù)。
function 必需。規(guī)定當(dāng)事件發(fā)生時運行的函數(shù)。
delegate 的函數(shù)是被某一類型的共同父元素調(diào)用，
代碼如下：
listNode.delegate('.condition-remove','click',function(e){
e.preventDefault();
$(this).parents('.search-condition-item').remove();
}
);
完整實例
代碼如下：
function renderSearchConditions(selectionId,conditions){var conditionsTemplate = '<div class="search-conditions-list-section">'+
'<ul class="search-conditions-list"></ul>'+
'</div>',
listNode = $(conditionsTemplate);
listItemTemplate = '<li class="search-condition-item" data-type="{conditonType}"><span>{condition}</span><a class="condition-remove" href="#">x</a></li>';
for(var key in conditions)
{
var condition = conditions[key].keyword,
conditionType = conditions[key].type,
listItemNode = $.substitute(listItemTemplate,{conditionType:conditionType,condition:condition});
listNode.append(listItemNode);
}
$(selectionId).prepend(listNode);
listNode.delegate('.condition-remove','click',function(e){
e.preventDefault();
$(this).parents('.search-condition-item').remove();
}
);
}
1.綁定的事務(wù)中，獲取事務(wù)源，調(diào)用hide辦法，并傳入事務(wù)源對象：
代碼如下：
$(document).delegate("body"， "click"， function(e) {
var ev = e || window.event; // 事務(wù)
//var target = ev.target || ev.srcElement; // 獲得事務(wù)源
hide(ev.target || ev.srcElement， true);
}
);
底本用的$(window)，然則IE8之前的，貌似有bug。
$(document)不好之處，頁面加載完后，會觸發(fā)一次...
2. hide辦法中，斷定該事務(wù)源是否從指定元素中發(fā)出，即事務(wù)源元素是不是指定元素的子元素或者其本身。
代碼如下：
//子元素斷定====
if (!!window.find)HTMLElement.prototype.contains = function(B) {
return this.compareDocumentPosition(B) - 19 > 0
};
function hide(dom， isClick) {
var nn，t，_isClick = !!isClick;
try {
for (var n in objList) {
nn = objList[n];
t = nn.getOption("target")[0];
if (_isClick && (t == dom || t.contains(dom)))return;
if (!_isClick || !nn.box[0].contains(dom)) nn.hide();
}
} catch(e) {
}
}
3.上方的hide辦法中，isClick變量 斷定 是不是點擊事務(wù)觸發(fā)的。以便處理懲罰resize的。resize用settimeout作處理懲罰，降落內(nèi)存消費.
代碼如下：
var reTime = null;
$(window).bind("resize"， function() {
if (reTime) clearTimeout(reTime);
reTime = setTimeout(hide， 50);
}
);
相關(guān)文章
這篇文章主要介紹了jQuery對指定元素中指定字符串進(jìn)行替換的方法,涉及jQuery針對字符串的匹配與替換的操作技巧,非常具有實用價值,需要的朋友可以參考下2015-03-03
jquery學(xué)習(xí)筆記之無new構(gòu)建詳解
大部分人使用 jQuery 的時候都是使用第一種無 new 的構(gòu)造方式，直接 $('') 進(jìn)行構(gòu)造，這也是 jQuery 十分便捷的一個地方。這篇文章主要給大家介紹了關(guān)于jquery學(xué)習(xí)筆記之無new構(gòu)建的相關(guān)資料，需要的朋友們下面來一起看看吧。2017-12-12
文本框只能上人家選擇數(shù)據(jù)進(jìn)去，不能手動輸入，經(jīng)搜索研究發(fā)現(xiàn)個不錯的解決方法，感興趣的朋友可以參考下2013-11-11
這篇文章主要介紹了jquery實現(xiàn)左右滑動菜單效果代碼,涉及jquery鼠標(biāo)事件及頁面元素動態(tài)變換的相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-08-08
本文主要介紹了利用jQuery實現(xiàn)兩個<select>控件的互移操作的方法代碼，具有很好的參考價值，需要的朋友一起來看下吧2016-12-12
這篇文章主要為大家詳細(xì)介紹了jquery插件實現(xiàn)圖片懸浮，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-04-04
jQuery實現(xiàn)select模糊查詢（反射機制）
這篇文章主要為大家詳細(xì)介紹了jQuery實現(xiàn)select帶模糊查詢的條件查詢，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-01-01
這篇文章主要為大家詳細(xì)介紹了jquery自定義表單驗證插件,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-10-10
使用jquery獲取網(wǎng)頁中圖片的高度其實很簡單，目前有兩種不錯的方法可以實現(xiàn)，下面為大家詳細(xì)介紹下，有所疑惑的你可以參考下2013-09-09
jQuery validate(submitHandler函數(shù))驗證通過發(fā)送Ajax(實例詳解)
這篇文章主要介紹了jQuery validate(submitHandler函數(shù))驗證通過發(fā)送Ajax，可以用validate框架驗證元素，本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友參考下吧2022-10-10