事件委托优缺点和实现function fDelegate(parentSelector,targetSelector,event,callback){
var parent = document.querySelector(parentSelector);
parent.addEventListener(event,fEventHandler,false);
function fEventHandler(e){
var target = e.target,
//currentTarget = e.currentTarget;//parent代替
while(target != parent){
if(target.matches(targetSelector)){
blur事件callback.apply(target,Array.prototype.slice.call(arguments));
break;
}
target = target.parentNode;
}
}
}
if (!Element.prototype.matches) {
Element.prototype.matches =
Element.prototype.matchesSelector ||
MatchesSelector ||
Element.prototype.msMatchesSelector ||
Element.prototype.oMatchesSelector ||
Element.prototype.webkitMatchesSelector ||
function(s) {
var matches = (this.document || this.ownerDocument).querySelectorAll(s),
i = matches.length;
while (--i >= 0 && matches.item(i) !== this) {}
return i > -1;
};
}
调⽤:
fDelegate('#list', 'li', 'click', function () { console.log(this); });
事件委托优点：
1.减少内存消耗，不必为⼤量元素绑定事件
2.为动态添加的元素绑定事件
事件委托的缺点:
1.部分事件如 focus、blur 等⽆冒泡机制，所以⽆法委托。
2.事件委托有对⼦元素的查过程，委托层级过深，可能会有性能问题
3.频繁触发的事件如 mousemove、mouseout、mouseover等，不适合事件委托

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。