简单的事件委托

<div style="width: 500px;height: 300px;border: 2px solid tomato;border-radius: 5px;margin: 100px auto;padding: 20px;">
		<ul id="oul" style="margin: 0;padding: 0;width: calc(100% - 20px);height: calc(100% - 20px);border: 2px solid gray;border-radius: 5px;padding: 10px;">
			<li style="width: 100%;height: 30px;background: #999;list-style: none;border-radius: 5px;color: #fff;text-align: center;line-height: 30px;margin-bottom: 5px;">item_1</li>
			<li style="width: 100%;height: 30px;background: #999;list-style: none;border-radius: 5px;color: #fff;text-align: center;line-height: 30px;margin-bottom: 5px;">item_2</li>
			<li style="width: 100%;height: 30px;background: #999;list-style: none;border-radius: 5px;color: #fff;text-align: center;line-height: 30px;margin-bottom: 5px;">item_3</li>
			<li style="width: 100%;height: 30px;background: #999;list-style: none;border-radius: 5px;color: #fff;text-align: center;line-height: 30px;margin-bottom: 5px;">item_4</li>
			<li style="width: 100%;height: 30px;background: #999;list-style: none;border-radius: 5px;color: #fff;text-align: center;line-height: 30px;margin-bottom: 5px;">item_5</li>
			<li style="width: 100%;height: 30px;background: #999;list-style: none;border-radius: 5px;color: #fff;text-align: center;line-height: 30px;margin-bottom: 5px;">item_6</li>
			<li style="width: 100%;height: 30px;background: #999;list-style: none;border-radius: 5px;color: #fff;text-align: center;line-height: 30px;margin-bottom: 5px;">item_7</li>
			<li style="width: 100%;height: 30px;background: #999;list-style: none;border-radius: 5px;color: #fff;text-align: center;line-height: 30px;margin-bottom: 5px;">item_8</li>
		</ul>
	</div>

js

<script type="text/javascript">
    var oul = document.getElementById('oul');//不使用事件委托方式
    var this_li = oul.getElementsByTagName('li');
    for (var i = 0; i<this_li.length; i++) {
        this_li[i].onclick = function (ev) {
            console.log(this.innerHTML);
        }
    }

    var oul = document.getElementById('oul');//使用事件委托方式
    oul.onclick = function (ev) {
        var ev = ev	|| window.event;
        var target = ev.target || evsrcElement;
        if(target.nodeName.toLowerCase() == 'li'){//nodeName的意思获得DOM元素的节点名称 //toLowerCase()的方法用以是，把获取到的节点名称转换为小写
            console.log(target.innerHTML)
        }
    }
</script>