javaScript事件委托

什么是事件委托

事件委托也叫事件代理，通俗易懂的说就是大家都会做的同一件事，找一个专门的人来做。例如生活中的菜鸟驿站就是事件委托的角色。

事件委托给程序的好处

1. 可以减少不必要的DOM操作，这对浏览器的性能有极大的好处。
2. 不用考虑未知的节点。

代码

	<ul id="nav">
		<li ></li>
		<li ></li>
		<li ></li>
		<li ></li>
	</ul>
	<script>
		//通常我要想给上面的li节点绑定点击事件是这样的:
		var lis = document.querySelectorAll('#nav li'));
		for(var li of Array.from(lis)){
			lis.onclick = function(){
				
			}
		}
		//上面是我们通常的做法，其实存在着许多的问题：
		//第一我们给没一个li都绑定了点击事件，每次绑定都导致页面的重新渲染，这对性能是不友好的。
		//第二如果在我们绑定了事件之后ul#id同过js动态生成了新的li节点，那么新的li是没有点击事件的，这个就是第二的问题所在。
		
		//ps:下面是通过事件委托的形式
		var querySelector = document.querySelector.bind(document);
		function event (el,eventnName,fnc){
			querySelector(el).addEventListener(eventnName,function(e){
				var _this = e.target;
				var brother = [];
				var childNodes = this.childNodes = Array.from(this.childNodes);

				arguments = Array.from(arguments);
				for(var el of childNodes){
					(el.nodeType == 1 ) && (el.isSameNode(_this) ? false : brother.push(el);)
				}

				if(typeof fnc == 'function'){
					fnc.apply(_this,[this,brother].concat(arguments));
				}
			})
		}
		event('#nav','click',function(el,brother,e){
			// console.log(this);
			// console.log(el);
			console.log(brother);
			// console.log(e);
		});
	</script>