JS里的onclick事件

可以通过以下代码了解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>