例子一 ：点击每一个li，显示对应li中数据

<ul id="uls">
	<li>111</li>
	<li>222</li>
	<li>333</li>
	<li>444</li>
</ul>

//jq写法
$("ul li").each(function(){
	$(this).click(function(){		
		console.log($(this).html());
	})
})
//js原始写法
var list=document.getElementById("uls");
var li=list.getElementsByTagName('li');
for(var i=0;i<li.length;i++){
	li[i].onclick=function(){
		console.log(this.innerHTML);
	}
}
//事件委托方式
var list=document.getElementById("uls");
var li=list.getElementsByTagName('li');
list.onclick=function(e){
	var e=e || window.event; //默认事件，兼容ie
	e.target=e.target || e.srcELement; //e.target 当前触发的节点
	if(e.target.nodeName.toLowerCase()=="li") {
		console.log(e.target.innerHTML);
		// console.log(e.target.childNodes[0].nodeValue);
	}
}

例子二 ：按钮点击显示/隐藏，当点击其他空白位置的时候，详细内容隐藏

<div >
	<span id="btn" style="border:1px solid red">查看详情</span>
	<p id="info" style="display:none;">信息内容展示</p>
</div>

var info=document.getElementById('info');
document.body.onclick=function(e){
	var e=e || window.event;
	e.target=e.target || e.srcELement;
	if(e.target.id=='btn'){
		if(info.style.display=='none' || info.style.display==''){
			info.style.display='block';
		}else{
			info.style.display='none';
		}
	}else{
		info.style.display='none';
	}
}