什么是事件委托
什么是事件委托:通俗的讲,事件就是onclick,onmouseover,onmouseout,等就是事件,委托呢,就是让别人来做,这个事件本来是加在某些元素上的,然而你却加到别人身上来做,完成这个事件。
事件委托的原理
利用冒泡的原理,把事件加到父级上,触发执行效果。
为什么要使用事件委托
<ul class="list">
<li class="item"> Item 1 </li>
<li class="item"> Item 2 </li>
<li class="item"> Item 3 </li>
<li class="item"> Item 4 </li>
<li class="item"> Item 5 </li>
<li class="item"> Item 6 </li>
</ul>
var list = document.getElementById('list');
for (var i = list.length - 1; i >= 0; i--) {
(function(index){
list[index].addEventListener('click', function(ev){
ev.preventDefault();
console.log(this.innerText);
})
})(i)
}
- 效率太低下,需要给每一个li都绑定一个事件,如果有100个li,那么会消耗大量的时间和内存。
- 对动态的元素不友好:每个新添加的元素都需要独立绑定一次事件,又带来新的效率问题。
list.addEventListener('click', function(ev){
ev.preventDefault();
var target = ev.target;
if (target.tagName.toLowercase() == 'li') {
console.log(target.innerText);
}
})
怎么使用事件委托?
- 在原生的js中,事件委托可以写成上述那样,每次执行的时候都判断该元素是否是目标元素。
- 使用jquery的on函数:$(element).on(type, selector, data, func)
- 给元素绑定相应的事件:$(element).on(type, func)
- 给元素中的子元素绑定事件,委托至父元素,让父元素执行:$(element).on(type, selector, func)
- 首先是第一个需求,给元素绑定相应的事件:
function bindEvent(el, type, func){
if (el.addEventListener) {
el.addEventListener(type, func, false);
}else if (el.attachEvent) {
el.attachEvent(type, func);
}else{
el['on'+type] = func;
}
}
function delegateEvent(el, type, selector, func){
var agent = function(ev){
var target = ev.target || ev.srcElement;
var targets = el.querySelectorAll(selector);
var matchTarget = null;
for (var i = 0; i < targets.length; i++) {
if (target === targets || targets.contains(target)) {
matchTarget = target;
break;
}
}
matchTarget && func.call(matchTarget, ev);
}
bindEvent(el, type, agent);
}
Element.prototype._on = function(type, selector, func){
if (selector && func == undefined) {
func = selector;
selector = null;
bindEvent(this, type, func);
console.log('on');
}else if (selector == undefined && func == undefined) {
bindEvent(this, type, function(ev){ev.preventDetault()})
console.log('null');
} else{
delegateEvent.apply(this, arguments)
console.log('delegate');
}
}
结语
(function(window,undefined){
function bindEvent(el, type, func){
if (el.addEventListener) {
el.addEventListener(type, func, false);
}else if (el.attachEvent) {
el.attachEvent(type, func);
}else{
el['on'+type] = func;
}
}
function delegateEvent(type, selector, func){
var agent = function(ev){
var target = ev.target || ev.srcElement;
var targets = this.querySelectorAll(selector);
// console.log(targets);
var matchTarget = null;
for (var i = 0; i < targets.length; i++) {
if (target === targets || targets.contains(target)) {
matchTarget = target;
break;
}
}
matchTarget && func.call(matchTarget, ev);
}
bindEvent(this, type, agent);
}
Element.prototype._on = function(type, selector, func){
if (selector && func == undefined) {
func = selector;
selector = null;
bindEvent(this, type, func);
console.log('on');
}else if (selector == undefined && func == undefined) {
bindEvent(this, type, function(ev){ev.preventDetault()})
console.log('null');
} else{
delegateEvent.apply(this, arguments)
console.log('delegate');
}
}
})(window);
更多免费技术资料可关注:annalin1203