詳解js的事件代理（委托）
更新時間：2016年12月22日 09:22:43 作者：caihg
JavaScript事件代理（委托）一般用于以下情況：1. 事件注冊在祖先級元素上，代理其子級元素?？梢詼p少事件注冊數量，節(jié)約內存開銷，提高性能。2. 對js動態(tài)添加的子元素可自動綁定事件。本文主要介紹用原生 js 實現該功能。下面跟著小編一起來看下吧
JavaScript事件代理（委托）一般用于以下情況：
1. 事件注冊在祖先級元素上，代理其子級元素?？梢詼p少事件注冊數量，節(jié)約內存開銷，提高性能。
2. 對js動態(tài)添加的子元素可自動綁定事件。
之前一直用各種js庫的事件代理，如 jQuery，非常方便實用。今天嘗試用原生 js 實現該功能。
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 () { // 參數：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);
測試一下：
<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); //點擊 paragraph1 元素，輸出其id為 "paragraph1"
});
模仿 jQuery 的風格，優(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 () { //參數：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);
});
以上就是本文的全部內容，希望本文的內容對大家的學習或者工作能帶來一定的幫助，同時也希望多多支持腳本之家！
相關文章
JavaScript+html5 canvas實現圖片破碎重組動畫特效
這篇文章主要介紹了JavaScript+html5 canvas實現破碎重組的視頻特效，感興趣的小伙伴們可以參考一下2016-02-02
這篇文章主要為大家詳細介紹了JavaScript中實現檢測用戶是否在線的6種常用方法,文中的示例代碼講解詳細,感興趣的可以跟隨小編一起學習一下2023-08-08
這篇文章主要介紹了JS實現可編輯的后臺管理菜單功能,涉及javascript針對頁面元素的遍歷及動態(tài)修改相關操作技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2016-09-09
在刪除時為了提醒用戶刪除數據的不可恢復一般都會有提示處理的，通常會使用js做到這一點，下面有個不錯的示例，感興趣的朋友可以參考下2013-11-11
獲取當前網頁document.url location.href區(qū)別總結
請教:document.URL和window.location.href區(qū)別2008-05-05
這篇文章主要介紹了javascript與Python快速排序實例對比,實例講述了javascript與Python實現快速排序的簡單實現技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-08-08
這篇文章主要介紹了百度移動版的url編碼解碼的具體實現,需要的朋友可以參考下2014-04-04
JS把字符串格式的時間轉換成幾秒前、幾分鐘前、幾小時前、幾天前等格式
最近在做項目的時候，需要把后臺返回的時間轉換成幾秒前、幾分鐘前、幾小時前、幾天前等的格式，接下來通過本文給大家分享JS把字符串格式的時間轉換成幾秒前、幾分鐘前、幾小時前、幾天前等格式 ,需要的朋友可以參考下2019-07-07
這篇文章主要介紹了JavaScript實現可拖拽的拖動層Div的方法,拖拽頁面中的div塊可實現div塊按照拖動軌跡移動的效果,涉及javascript鼠標事件、頁面元素樣式結合事件函數動態(tài)操作的相關技巧,需要的朋友可以參考下2015-08-08
TensorFlow.js 微信小程序插件開始支持模型緩存的方法
這篇文章主要介紹了TensorFlow.js 微信小程序插件開始支持模型緩存的方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-02-02