获得失去焦点事件和onchange事件

-onfocus 获得焦点时触发
-onblur 失去焦点时触发
css样式

 <style>
        .box{
            padding:50px;
        }
        .left,.tip{
            float:left;
        }
        .left{
            margin-right:10px;
        }
        .tip{display:none;font-size:14px;}

    </style>

js样式

 <!--需求-->
    <!--刚进来希望什么都没有，当我们激活的时候，他旁边会出现一句话，请输入手机号-->
    <!---->
    <script>
        window.onload=function(){
            //获取文本框和提示框
            var phone=document.getElementById("phone"),
                tip=document.getElementById("tip");
            //给文本框绑定激活事件；
            phone.onfocus=function(){      //因为onfocus只能用于input标签type为text，password，textares标签
                //让tip显示出来
                tip.style.display='block';
            }
            // 给文本框绑定失去焦点事件
            phone.onblur=function(){
                //获取文本框的值，value用于获取表单元素的值
                var phoneVal = this.value;
                // console.log(phoneVal);
                // 判断手机号码是否是11位的数字,isNaN是检测一个值是不是非数字
                if(phoneVal.length==11 && isNaN(phoneVal)==false){
                    // console.log("ok");
                    //如果输入正确，显示正确图标，负责显示错误图标
                    tip.innerHTML='<img src="img/right.png">'

                }else{
                    // console.log("error")
                    tip.innerHTML='<img src="img/error.png">'
                }
            }

        };
    </script>

html内容

 <div class="box">
        <div class="left">
            <input type="text" id="phone" placeholder="请输入手机号码">
        </div>
        <div class="tip" id="tip">
            <!--开始希望这句话，是不显示的，等我激活输入框的时候，在显示出来-->
            请输入有效的电话号码
        </div>
    </div>

onchange 域的内容发生改变时触发

<script>
        // onchange == >一般作用于select或checkbox或radio
        // 页面加载
        window.onload=init;
        //初始化函数
        function init(){
            //获取下拉菜单
            var menu=document.getElementById("menu");
            //给菜单绑定change事件
            menu.onchange=function(){
                // console.log("abc")
                // 获取当前选中的值
                var bgColor=this.value;//这是获取值的一种方法

                // console.log(value);
                
                //menu.options 是menu中所有的option 取出来的是一个数组
                //menu.options[menu.selectedIndex] 获取的是当前选中的索引
                
                // var bgcolor = menu.options[menu.selectedIndex].value; 这也是获取值的一种方法
                // console.log(bgcolor)
                //拿到value后要判断是否有值，因为请选择是没有值的
                
                if(bgColor!=""){
                    return document.body.style.background=bgColor;
                }else{
                    return document.body.style.background="#fff";
                }
            }
        };

    </script>

<div class="box">
        请选择您喜欢的颜色
        <select name="" id="menu">
            <option value="请选择"></option>
            <option value="#999">红色</option>
            <option value="#789">黄色</option>
            <option value="#666">蓝色</option>
            <option value="#333">灰色</option>
        </select>
    </div>