原生js中的事件委托

事件委托：利用事件冒泡的原理，把本应该添加给某元素的事件委托给父级

不用事件委托获取ul中的li

<ul>
		<li>1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
	</ul>
	<script type="text/javascript">
		var oLis=document.querySelectorAll('li')
		for (var i = 0; i < oLis.length; i++) {
			oLis[i].onclick=function(){
				console.log(this)
			}
		}
	</script>

利用事件委托获取ul中的li

<ul>
		<li>1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
	</ul>
	<script type="text/javascript">
		var oUl=document.querySelector('ul')
		oUl.onclick=function(e){
			var evt=e||window.event
			console.log(evt.target)
		}
	</script>

可以看出利用target就可获取到，比不用事件冒泡的方法要简单得多

事件冒泡还可给未来元素添加事件，效率更高
比如在ul中添加li，点击li也可得到li
只需在js代码中加入

var oli=document.createElement('li')
		oUl.appendChild(oli)