js事件委托

js事件委托

事件委托是什么？

事件委托 本质上是利用了浏览器事件冒泡的机制。因为事件在冒泡过程中会上传到父节点，并且父节点可以通过事件对象获取到 目标节点，因此可以把子节点的监听函数定义在父节点上，由父节点的监听函数统一处理多个子元素的事件，这种方式称为事件代理。

为什么要使用事件委托

使用事件代理我们可以不必要为每一个子元素都绑定一个监听事件，这样减少了内存上的消耗。并且使用事件代理我们还可以实现事件的动态绑定，比如说新增了一个子节点，我们并不需要单独地为它添加一个监听事件，它所发生的事件会交给父元素中的监听函数来处理。

	//HTML
	<ul id="ulEvent">
		<li>事件1</li>
		<li>事件2</li>
		<li>事件3</li>
		<li>事件4</li>
		<li>事件5</li>
	</ul>

	//js
	var ulEvent = document.getElementById("ulEvent")
			console.log(ulEvent)
			ulEvent.onclick = function(e) {
				var e = e || window.event
				//获取目标节点
				var target = e.target || e.srcElement
				//判断当前点击的节点是否是目标节点
				if (target.nodeName.toLowerCase() === 'li') {
					//获取所有子节点
					var li = this.querySelectorAll('li')
					//将当前点击的节点与所有子节点做对比 获取当前点击的子节点的下标
					var index = Array.prototype.indexOf.call(li, target)
					console.log(index)
				}
			}