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>