可以通过以下代码了解JS里的onclick事件：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style>
#divclass
{
cursor:pointer;
}
#uiclass
{ }
#uiclass li
{
display:inline-block;
}
</style>
<script type="text/javascript">
window.onload = function ()
{
document.getElementById("txt").onchange = function ()
{
//alert("我的值改变啦~~~");
//事件的方法里面的this：谁调用的方法，方法里的this就是谁
alert(this.value);
};
//通过文本框调用onchange 那么 onchange里面的this就是文本框
// document.getElementById("txt").onchange();
document.getElementById("selNation").onchange = function ()
{
//下拉框的this.value可以获取到选中的option的value值
//var curoptionIndex = this.selectedIndex;
//alert(this.childNodes.length);//dom元素的childnodes中包含了所有类型的子节点（html元素节点、文本节点）
//alert(this.children.length);//dom元素的children里只包含html元素节点
//alert(this.selectedIndex);
//alert(this.value+","+this.innerHTML); var curOptionIndex = this.selectedIndex;
var opts = this.children;
var selectOpt = opts[curOptionIndex];
alert(selectOpt.innerHTML);
}; document.getElementById("txtName").onfocus = focus;
document.getElementById("txtName").onblur = blur;
document.getElementById("txtPwd").onfocus = focus; var li = document.getElementsByTagName("li");
for (var i = 0; i < li.length; i++) {
li[i].onclick = doClick;
} }; function doClick()
{
this.style.backgroundColor = "white";
//选取当前选中li对象的下一个兄弟li对象
var nextObj = this.nextElementSibling;
//循环判断是否存在下一个li对象
while (nextObj)
{
//修改下一个背景颜色
nextObj.style.backgroundColor = "red";
//再把 下一个的下一个对象找出 如果没有了就返回空
nextObj = nextObj.nextElementSibling;
} //找出当前选中的li的前一个li，并设置前一个li的背景色
if (isNaN(this.previousElementSibling))
{
var preObj = this.previousElementSibling;
preObj.style.backgroundColor = "blue";
preObj = preObj.previousElementSibling;
}
}
function focus()
{
document.getElementById("msgBox").innerHTML = this.value;
alert(this.value);
} function blur()
{
alert("我走了~~~");
}
//为下拉框 绑定onchange事件 </script>
</head>
<body>
<div id="divBox" style="margin:100px auto;">
<input type="text" value="1" id="txt"/>
<select id="selNation">
<option id="1">中国</option>
<option id="2">美国</option>
<option id="3">韩国</option>
</select>
<input type="text" id="txtName" value="my i love you~~~~~"/>
<input type="text" id="txtPwd" value="me too~~~" />
</div>
<div id="msgBox"></div> <div id="divclass">
<ul id="uiclass">
<li>aaaaaaaa</li>
<li>bbbbbbbb</li>
<li>cccccccc</li>
<li>dddddddd</li>
</ul>
</div>
</body>
</html>