015Day-表单事件、焦点获得失去练习、单选-复选-下拉列表change事件、表单事件、键盘事件、滚动事件、文档事件、文档加载练习、事件委托

一、表单事件-focus-blur

重点：
表单事件：
onfocus：表单元素获得焦点事件。
当表单元素获得焦点的时候被触发。
onblur：表单元素失去焦点事件。
当表单元素失去焦点的时候被触发。
注意：当当前的焦点从一个元素移动到另外一个元素，那么上一个获得焦点的元素会先触发失去焦点事件，然后下一个元素才触发获得焦点事件。

用户名：<input type="text" id="ipt1"><span></span>
<br>
<input type="button" id="btn" value="点我">

<script>
    var ipt1 = document.getElementById("ipt1");
    //获得焦点，输出输入框中的内容
    ipt1.onfocus = function () {
    
        console.log ("input 获得焦点了")
    }
    ipt1.onblur = function () {
    
        console.log ("input 失去焦点了")
    }

    var btn = document.getElementById("btn");
    btn.onfocus = function () {
    
        console.log ("btn 获得焦点了");
    }
    btn.onblur = function () {
    
        console.log ("btn 失去焦点了");
    }
</script>

二、焦点获得失去练习

输入用户名，在input获得焦点的时候，提示用户名的长度[8-12].
输入完毕，失去焦点的时候，判断是否合法。如果合法，显式绿色√
不合法：显式红色的×

用户名：<input type="text"><span></span>

<script>
    (function () {
    
        //获得元素
        var uname = document.querySelector ("input");
        var notice = document.querySelector("span");
        uname.onfocus = function () {
    
            //显示用户名的提示信息
            notice.innerHTML = "用户名的长度[8-12]";
            notice.style.color = "black";
        };

        uname.onblur = function () {
    
            //测试用户名是否合法
            var length = uname.value.length;
            if(length < 8 || length > 12){
    //不合法
                notice.innerHTML = "×";
                notice.style.color = "red";
            }else{
    
                notice.innerHTML = "√";
                notice.style.color = "green";
            }
        }
    }) ();
</script>

三、表单事件-input-change

重点：
input：表单元素输入框的输入内容改变事件。
在输入的过程中，一旦内容发生了增加或者减少，都会触发该事件。
change: 是当表单元素的内容确定发生改变了。触发change事件。
对于输入框来说，确定输入结束，那么触发该事件。
注意：先触发change事件，然后再出发失去焦点事件。
对于输入框来说，输入的过程中，回车键，那么会触发change事件。
并且不触发失去焦点事件。

用户名：<input type="text"><span></span>
<script>
    (function () {
    
        //获得元素
        var uname = document.querySelector ("input");
        var notice = document.querySelector ("span");
        uname.onfocus = function () {
    
            //显示用户名的提示信息
            notice.innerHTML = "用户名的长度[8-12]";
            notice.style.color = "black";
        };

        //输入的过程中，动态的判断输入的内容是否合法
        uname.oninput = function () {
    
            //测试用户名是否合法
            var length = uname.value.length;
            if (length < 8 || length > 12) {
    //不合法
                notice.innerHTML = "×";
                notice.style.color = "red";
            } else {
    
                notice.innerHTML = "√";
                notice.style.color = "green";
            }
        };

        uname.onblur = function(){
    
            console.log ("失去焦点了");
        }

        uname.onchange = function () {
    
            console.log ("change事件触发了");
        }
    }) ();
</script>

四、单选-复选-下拉列表的change事件

单选按钮：鼠标点击：先触发focus事件，然后触发change事件。不需要再失去焦点。
复选按钮：鼠标点击：先触发focus事件，然后触发change事件，如果不停的多次点击。后面只触发
change事件。
下拉列表：当鼠标点击的时候，触发focus事件。然后选择其他的下拉项，触发change事件。

性别
<input type="radio" name="gender">男
<input type="radio" name="gender">女
<br>
<input type="checkbox" name="hobby">跑步<br>
<input type="checkbox" name="hobby">单杠<br>
<input type="checkbox" name="hobby">哑铃<br>

<select id="cities">
    <option value="">北京</option>
    <option value="">上海</option>
    <option value="">天津</option>
    <option value="">重庆</option>
</select>

<script>
    /*var genders = document.getElementsByName("gender");
    genders[0].onfocus = function (e) {
        e = e || window.event;
        console.log (e.type);
        console.log ("男获得焦点");
        console.log (this);
    }
    genders[0].onchange = function (e) {
        e = e || window.event;
        console.log (e.type);
        console.log (this);
    }
    genders[0].onblur = function (e) {
        e = e || window.event;
        console.log (e.type);
        console.log ("男失去焦点");
        console.log (this);
    }*/


    /*var hobbies = document.getElementsByName("hobby");
    hobbies[0].onfocus = function (e) {
        e = e || window.event;
        console.log (e.type);
        console.log (this);
    }
    hobbies[0].onchange = function (e) {
        e = e || window.event;
        console.log (e.type);
        console.log (this);
    }*/

    var sel = document.querySelector("select");
    sel.onfocus = function () {
    
        console.log (