w3c事件

#box{width: 150px;height: 150px;background-color: purple;}
<button id="btn-z">隐藏</button>
<button id="btn-x">显示</button>
<button id="btn-q">切换</button>
<div id="box"></div>

var o=document.getElementById('box');
	//添加隐藏事件
	document.getElementById('btn-z').addEventListener('click',function(){
		o.style.display='none';
	},false);

	//添加显示事件
	document.getElementById('btn-x').addEventListener('click',function(){
		o.style.display='block';
	},false);

	//添加切换事件
	document.getElementById('btn-q').addEventListener('click',function(){
		var dis=window.getComputedStyle(o,null).display;
		if (dis=='block') {
			o.style.display='none';
		}else{
			o.style.display='block';
		}
	},false);

	//鼠标进入事件
	o.addEventListener('mouseenter',function(){
		o.style.color='yellow';
	},false);

	//鼠标离开事件
	o.addEventListener('mouseleave',function(){
		o.style.color='#333';
	},false);