事件类型以及键盘事件

onload : 当页面(html,图片之类)加载完成后，执行的方法
该方法用于，包裹所有内联js代码

1. 解决js获取html标签时，标签还没有加载的情况
2. 先加载页面，再加载功能。 能够提高用户体验

这里存放 所有内联的js代码
以保证,先加载页面,再加载js功能

 window.onload = function(){
 }

1.onblur： 失去焦点

				<input type="text" id="ipt"/>
          <script>	
           		var ipt = document.getElementById("ipt");
                 ipt.onblur = function(){
                      console.log("我失去了焦点");
                 }
          </script>

2. onfocus: 获得焦点

 			 ipt.onfocus = function(){
                      console.log("我获得了焦点");
                }

3.onselect: 选中文本时触发

    		ipt.onselect = function(){
    	             console.log("我被选中了");
                 }

4. onchange: 在内容发生改变是触发

 		  ipt.onchange = function(){
               console.log("我被改了");
                   }

5.onreset: 重置时触发

	<input type="reset" class="re" value="重置"/>
	<script>
		var  re=document.querySelector("input");
 		re.onreset = function(){
               console.log("我被重置了");
                   }      
    </script>          

6.ondblclick: 双击时触发

                   ipt.ondblclick = function(){
                        console.log("我被双击了");
                   }

7.鼠标的移入移出类 事件 （该名称纯属自定义）

     
    <div class="box" style="width: 100px;height: 100px;border: 1px solid;">
       <div class="box" style="width: 40px;height: 40px;border: 1px solid;">					</div>
       <div class="box" style="width: 40px;height: 40px;border: 1px solid;"></div>
    </div>
   
     
     
    <script>
  	 var box = document.getElementsByClassName("box");
 	 function randomColor(){   //用函数封装一个随机色
                return Math.floor(Math.random()*(250-200)+200);
              }
     box[0].onmouseover = function(){  //   当鼠标移入时
            box[1].style.backgroundColor = "rgb(" +  randomColor() + "," + randomColor() + "," + randomColor() + ")";
                   }
      box[0].onmouseout = function(){     //当鼠标移出时
                    box[2].style.backgroundColor = "rgb(" + randomColor() + "," + randomColor() + "," + randomColor() + ")";
                   }
    </script>
                   

onmousedown : 用户在指定元素身上 按下时触发
除非情景 需要 按下 和抬起各执行一个功能，否则，不使用
因为按下就触发，没有给用户改错的机会

   				box[1].onmousedown = function(){  //当box[1]按下时
                        box[1].style.width = 200 + "px";
                   }
                   
                box[1].onmouseup = function(){ //当box[1]抬起时
                        box[1].style.height = 200 + "px";
                   }

键盘事件：
onkeydown: 用户按下键位的时候触发
onkeyup : 用户抬起键位时
onkeypress: 用户按下该键位 再抬起时触发
event对象： 表示事件源本身
我们在使用的时候，以形参的形式来使用，实参由事件本身传递
使用时，一定符合见名知意： 例如： event ev evt e

		<input type="text" class="ipt" />
		<input type="text" class="ipt" />
		<input type="text" class="ipt" />
       <script>
		var ipt = document.getElementsByClassName("ipt");
		ipt[0].focus();
			ipt[0].onkeypress = function(ev){		
				// keyCode： 键盘编码
			console.log(ev.keyCode);
					if(ev.keyCode == 13){						
						//focus():   这个方法，谁调用，就将焦点赋给谁					
						ipt[1].focus();
					}
			}
			</script>