詳解js的事件代理（委托）
更新時(shí)間：2016年12月22日 09:22:43 作者：caihg
JavaScript事件代理（委托）一般用于以下情況：1. 事件注冊(cè)在祖先級(jí)元素上，代理其子級(jí)元素?？梢詼p少事件注冊(cè)數(shù)量，節(jié)約內(nèi)存開銷，提高性能。2. 對(duì)js動(dòng)態(tài)添加的子元素可自動(dòng)綁定事件。本文主要介紹用原生 js 實(shí)現(xiàn)該功能。下面跟著小編一起來(lái)看下吧
JavaScript事件代理（委托）一般用于以下情況：
1. 事件注冊(cè)在祖先級(jí)元素上，代理其子級(jí)元素?？梢詼p少事件注冊(cè)數(shù)量，節(jié)約內(nèi)存開銷，提高性能。
2. 對(duì)js動(dòng)態(tài)添加的子元素可自動(dòng)綁定事件。
之前一直用各種js庫(kù)的事件代理，如 jQuery，非常方便實(shí)用。今天嘗試用原生 js 實(shí)現(xiàn)該功能。
var addEvent = (function () {
if (document.addEventListener) {
return function (element, type, handler) {
element.addEventListener(type, handler, false);
};
} else if (document.attachEvent) {
return function (element, type, handler) {
element.attachEvent('on' + type, function () {
handler.apply(element, arguments);
});
};
} else {
return function (element, type, handler) {
element['on' + type] = function () {
return handler.apply(element, arguments);
};
};
}
})(),
getClassElements = function (parentElement, classname) {
var all, element, classArr = [], classElements = [];
if (parentElement.getElementsByClassName) {
return parentElement.getElementsByClassName(classname);
} else {
all = parentElement.getElementsByTagName('*');
for (var i = 0, len = all.length; i < len; i++) {
element = all[i];
classArr = element && element.className && element.className.split(' ');
if (classArr) {
for (var j = 0; j < classArr.length; j++) {
if (classArr[j] === classname) {
classElements.push(element);
}
}
}
}
return classElements;
}
},
delegate = function () { // 參數(shù)：element, type, [selector,] handler
var args = arguments,
element = args[0],
type = args[1],
handler;
if (args.length === 3) {
handler = args[2];
return addEvent(element, type, handler);
}
if (args.length === 4) {
selector = args[2];
handler = args[3];
return addEvent(element, type, function (event) {
var event = event || window.event,
target = event.target || event.srcElement,
quickExpr = /^(?:[a-zA-Z]*#([\w-]+)|(\w+)|[a-zA-Z]*\.([\w-]+))$/,
match,
idElement,
elements,
tagName,
count = 0,
len;
if (typeof selector === 'string') {
match = quickExpr.exec(selector);
if (match) {
// #ID selector
if (match[1]) {
idElement = document.getElementById(match[1]);
tagName = match[0].slice(0, match[0].indexOf('#'));
// tag selector
} else if (match[2]) {
elements = element.getElementsByTagName(selector);
// .class selector
} else if (match[3]) {
elements = getClassElements(element, match[3]);
tagName = match[0].slice(0, match[0].indexOf('.'));
}
}
if (idElement) {
if ( tagName ? tagName === idElement.nodeName.toLowerCase() && target === idElement : target === idElement ) {
return handler.apply(idElement, arguments);
}
} else if (elements) {
for (len = elements.length; count < len; count++) {
if ( tagName ? tagName === elements[count].nodeName.toLowerCase() && target === elements[count] : target === elements[count] ) {
return handler.apply(elements[count], arguments);
}
}
}
}
});
}
};
主要是用 apply 改變 this 的指向
handler.apply(idElement, arguments); handler.apply(elements[count], arguments);
測(cè)試一下：
<style>
#outer {padding: 50px; background-color: lightpink;}
#inner {padding: 30px; background-color: aliceblue;}
#paragraph1, #paragraph3 {background-color: cadetblue}
</style>
<div id="outer">outer <div id="inner">inner <p id="paragraph1" class="parag1">paragraph1</p> <p id="paragraph2" class="parag">paragraph2</p> <span>span</span> <p id="paragraph3" class="parag">paragraph3</p> </div> </div>
var outer = document.getElementById('outer');
delegate(outer, 'click', function () {
console.log(this.id); // outer
});
delegate(outer, 'click', 'p', function () {
console.log(this.id); //點(diǎn)擊 paragraph1 元素，輸出其id為 "paragraph1"
});
模仿 jQuery 的風(fēng)格，優(yōu)化代碼：
(function () {
var $ = function (element) {
return new _$(element);
};
var _$ = function (element) {
this.element = element && element.nodeType === 1 ? element : document;
};
_$.prototype = {
constructor: _$,
addEvent: function (type, handler, useCapture) {
var element = this.element;
if (document.addEventListener) {
element.addEventListener(type, handler, (useCapture ? useCapture : false));
} else if (document.attachEvent) {
element.attachEvent('on' + type, function () {
handler.apply(element, arguments);
});
} else {
element['on' + type] = function () {
return handler.apply(element, arguments);
};
}
return this;
},
getClassElements: function (classname) {
var element = this.element, all, ele, classArr = [], classElements = [];
if (element.getElementsByClassName) {
return element.getElementsByClassName(classname);
} else {
all = element.getElementsByTagName('*');
for (var i = 0, len = all.length; i < len; i++) {
ele = all[i];
classArr = ele && ele.className && ele.className.split(' ');
if (classArr) {
for (var j = 0; j < classArr.length; j++) {
if (classArr[j] === classname) {
classElements.push(ele);
}
}
}
}
return classElements;
}
},
delegate: function () { //參數(shù)：type, [selector,] handler
var self = this,
element = this.element,
type = arguments[0],
handler;
if (arguments.length === 2) {
handler = arguments[1];
return self.addEvent(type, handler);
} else if (arguments.length === 3) {
selector = arguments[1];
handler = arguments[2];
return self.addEvent(type, function (event) {
var event = event || window.event,
target = event.target || event.srcElement,
quickExpr = /^(?:[a-zA-Z]*#([\w-]+)|(\w+)|[a-zA-Z]*\.([\w-]+))$/,
match,
idElement,
elements,
tagName,
count = 0,
len;
if (typeof selector === 'string') {
match = quickExpr.exec(selector);
if (match) {
// #ID selector
if (match[1]) {
idElement = document.getElementById(match[1]);
tagName = match[0].slice(0, match[0].indexOf('#'));
// tag selector
} else if (match[2]) {
elements = element.getElementsByTagName(selector);
// .class selector
} else if (match[3]) {
elements = self.getClassElements(match[3]);
tagName = match[0].slice(0, match[0].indexOf('.'));
}
}
if (idElement) {
if ( tagName ? tagName === idElement.nodeName.toLowerCase() && target === idElement ? target === idElement ) {
return handler.apply(idElement, arguments);
}
} else if (elements) {
for (len = elements.length; count < len; count++) {
if ( tagName ? tagName === elements[count].nodeName.toLowerCase() && target === elements[count] : target === elements[count] ) {
return handler.apply(elements[count], arguments);
}
}
}
}
});
}
}
};
window.$ = $;
return $;
}());
使用如下：
var outer = document.getElementById('outer');
$(outer).delegate('click', '.parag', function (event) {
console.log(this.id);
});
以上就是本文的全部?jī)?nèi)容，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，同時(shí)也希望多多支持腳本之家！
相關(guān)文章
JavaScript+html5 canvas實(shí)現(xiàn)圖片破碎重組動(dòng)畫特效
這篇文章主要介紹了JavaScript+html5 canvas實(shí)現(xiàn)破碎重組的視頻特效，感興趣的小伙伴們可以參考一下2016-02-02
JavaScript檢測(cè)用戶是否在線的6種方法總結(jié)
這篇文章主要為大家詳細(xì)介紹了JavaScript中實(shí)現(xiàn)檢測(cè)用戶是否在線的6種常用方法,文中的示例代碼講解詳細(xì),感興趣的可以跟隨小編一起學(xué)習(xí)一下2023-08-08
JS實(shí)現(xiàn)可編輯的后臺(tái)管理菜單功能【附demo源碼下載】
這篇文章主要介紹了JS實(shí)現(xiàn)可編輯的后臺(tái)管理菜單功能,涉及javascript針對(duì)頁(yè)面元素的遍歷及動(dòng)態(tài)修改相關(guān)操作技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2016-09-09
在刪除時(shí)為了提醒用戶刪除數(shù)據(jù)的不可恢復(fù)一般都會(huì)有提示處理的，通常會(huì)使用js做到這一點(diǎn)，下面有個(gè)不錯(cuò)的示例，感興趣的朋友可以參考下2013-11-11
獲取當(dāng)前網(wǎng)頁(yè)document.url location.href區(qū)別總結(jié)
請(qǐng)教:document.URL和window.location.href區(qū)別2008-05-05
javascript與Python快速排序?qū)嵗龑?duì)比
這篇文章主要介紹了javascript與Python快速排序?qū)嵗龑?duì)比,實(shí)例講述了javascript與Python實(shí)現(xiàn)快速排序的簡(jiǎn)單實(shí)現(xiàn)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-08-08
這篇文章主要介紹了百度移動(dòng)版的url編碼解碼的具體實(shí)現(xiàn),需要的朋友可以參考下2014-04-04
JS把字符串格式的時(shí)間轉(zhuǎn)換成幾秒前、幾分鐘前、幾小時(shí)前、幾天前等格式
最近在做項(xiàng)目的時(shí)候，需要把后臺(tái)返回的時(shí)間轉(zhuǎn)換成幾秒前、幾分鐘前、幾小時(shí)前、幾天前等的格式，接下來(lái)通過(guò)本文給大家分享JS把字符串格式的時(shí)間轉(zhuǎn)換成幾秒前、幾分鐘前、幾小時(shí)前、幾天前等格式 ,需要的朋友可以參考下2019-07-07
JavaScript實(shí)現(xiàn)可拖拽的拖動(dòng)層Div實(shí)例
這篇文章主要介紹了JavaScript實(shí)現(xiàn)可拖拽的拖動(dòng)層Div的方法,拖拽頁(yè)面中的div塊可實(shí)現(xiàn)div塊按照拖動(dòng)軌跡移動(dòng)的效果,涉及javascript鼠標(biāo)事件、頁(yè)面元素樣式結(jié)合事件函數(shù)動(dòng)態(tài)操作的相關(guān)技巧,需要的朋友可以參考下2015-08-08
TensorFlow.js 微信小程序插件開始支持模型緩存的方法
這篇文章主要介紹了TensorFlow.js 微信小程序插件開始支持模型緩存的方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-02-02