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