js事件

事件：
             页面上的一个动作，一般情况是客户在页面上的一个操作，
             比如:单击按钮，让输入框获得焦点，失去焦点，表单提交

             另外，也可以浏览器的一个动作

获得焦点 ----- onfocus
失去焦点 ----- onblur
按钮单击 ----- onclick
表单提交 ----- onsubmit

页面加载 ----- onload

鼠标移入事件 ---- onmouseover

鼠标移出事件 ---- onmouseout

改变事件----onchange

使用：

格式1：A、标签中使用属性 onxxx = "函数"
                      B、JS编写函数实现
                格式2：A、页面加载完，获取对象

                       B、对象.onxxx = function(){}

window.onload = function(){
                var t1 = document.getElementById("t1");
                t1.onfocus = function(){
                    //alert(t1.value);//这种格式可能有安全隐患，后面会接触，不建议使用
                    //this 代表 t1
                    alert(this.value);
                }

            }

表单校验：

window.onload = function(){
                var un = document.getElementById("username");
                var unmsg = document.getElementById("unmsg");
                //添加获得焦点事件
                un.onfocus = function(){
                    //给出提示,提示显示在span 中
                    unmsg.innerHTML = "账号必填!";
                }
                //添加失去焦点事件
                un.onblur = function(){
                    //获取到当前录入的数据，然后校验，并给出提示
                    if(this.value == ""){
                        unmsg.innerHTML = "<font color='red'>账号不能为空!</font>";
                    } else {
                        unmsg.innerHTML = "账号合法";
                    }
                }
                
                var pd = document.getElementById("password");
                var pdmsg = document.getElementById("pdmsg");
                pd.onfocus = function(){
                    pdmsg.innerHTML = "密码必填";
                }
                pd.onblur = function(){
                    if(this.value == ""){
                        pdmsg.innerHTML = "<font color='red'>密码不能为空！</font>"
                    } else {
                        pdmsg.innerHTML = "密码可用";

                    }

省市联动：

window.onload = function(){
            var province = document.getElementById("province");
            province.onchange = function(){
                //取出 当前选项的 value 值，获取对应的市
                var index = this.value;
                //获取市的数组
                var cs = cities[index];
                //获取第二个下拉列表
                var citySelect = document.getElementById("city");
                //初始化 citySelect 中的内容
                citySelect.innerHTML = "<option>----请您选择一个市----</option>";
                for(var i = 0 ; i <cs.length; i++){
                    //citySelect.innerHTML = "<option>" + cs[i] + "</option>";
                    //citySelect.innerHTML += "<option>" + cs[i] + "</option>";
                    //使用面向对象的思想进行技术替换
                    //1、组织一个 option 标签对象
                    var opt = document.createElement("option");
                    //2、将 option 的文本创建成对象
                    var txt = document.createTextNode(cs[i]);
                    //将内容设置进 option 标签

                    opt.appendChild(txt);

                      opt.setAttribute("type","valud")

                    //将 option 设置进第二个 select
                    citySelect.appendChild(opt);
                }
            }
        }

                }
                

            }