<input id="btn1" type="button" value="按 钮" />
<input type="button" value="按 钮" onclick="btn_click()" />
<input type="text" onblur="alert('失去焦点')" />
<select onchange="alert('改变')">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
<input type="text" onkeyup="alert('按键抬起')" />
<img src="1.jpg" onmouseleave="alert('鼠标移上')" />
<script>
var btn1 = document.getElementById("btn1");
btn1.onclick = function(){
alert("点击");
}
function btn_click(){
alert("点击");
}
下拉菜单基本原理：设置下拉选项中点击选项，给予一定宽度、高度并设置超出部分隐藏，
在框内设置下拉选项，给予一定高度、宽度。给予定位；
设置一个鼠标移上事件，将选项的最大高度改为你下拉框的高度；
*{
padding: 0px;
margin: 0px;
}
.nav{
500px;
height: 35px;
border: 1px solid #7FFFD4;
position: absolute;
top: 0px;
left: 0px;
}
.nav-title{
100px;
max-height: 35px;
text-align: center;
line-height: 35px;
float: left;
font-size: 20px;
overflow: hidden;
}
.nav-title:hover{
cursor: pointer;
max-height: 500px;
}
.nav-title ul{
/*list-style: none;*/
text-align: center;
}
.nav-title li{
100px;
height: 35px;
text-align: center;
}
.nav-title li:hover{
cursor: pointer;
}
</style>
</head>
<body>
<div class="nav">
<div class="nav-title">首页</div>
<div class="nav-title">花魂
<ul>
<li>落岩</li>
<li>神迹</li>
<li>幸运</li>
<li>弱火</li>
<li>法波</li>
</ul>
</div>
<div class="nav-title">龙须
<ul>
<li>冲击</li>
<li>必杀</li>
<li>敏捷</li>
<li>弱雷</li>
</ul>
</div>
<div class="nav-title">龙女
<ul>
<li>再生</li>
<li>幸运</li>
<li>剑气</li>
</ul>
</div>
<div class="nav-title">蝴蝶
<ul>
<li>神迹</li>
<li>幸运</li>
</ul>
</div>
</div>
</body>