获得、失去焦点与焦点事件、其他事件、元素到窗口和到文档的距离

一、获得焦点与焦点事件

.focus ( ) ; // 获得焦点
.-+onfocus   // 获得焦点事件

oBtn.onclick = function () 
{
    oTxt.focus ();              // 点击时候获得焦点
}
oTxt.onfocus = function ()    //焦点事件
{
alter ( "我获得焦点" )；  // 获得焦点后，弹出
}

二、失去焦点与失去焦点事件后各种事件

.blur ();    // 失去焦点
.onblur;    // 失去焦点事件
onchange;   // 失去焦点时，如果和得到焦点时的内容不一样就触发改变事件

 oBtn.onclick = function () 
{
    oTxt.blur ();              // 点击时候失去焦点
}
oTxt.onblur = function ()    //失去焦点事件
{
	alter ( "我获得焦点" )；  // 失去焦点后，弹出
}
oTxt.onchange = function ()   //当失去焦点时，文本框里面的内容和还拥有焦点时候的内  容不一样的时候就触发。
{
	alter ( “我失去焦点了” )；
}

radio（圆圈按钮）、checkbox（正方体按钮）、select（下拉）的改变事件
自己改变自己的时候，才会触发改变事件
如radius : 当你点击radio1 时候会触发改变事件，当你点击radio2时候，虽然radio1也发生了改变，但是不触发改变事件。

   	<input type="radio" name='qq' id='rad1' />
    <input type="radio" name='qq' id='rad2' />
    <script>
        var oRad = document.getElementById('rad1');
        oRad.onchange = function()
        {
				console.log('change');    
	     };
    </scrpt>

checkbox也像上面一样。

//改变option  时候触发
 <select id="sel" name="sel">
     <option value="">1<option>
     <option value="">2<option>
     <option value="">3<option>
     <option value="">4<option>
     <option value="">5<option>
 </select>
 var oSelect = document.getElementById('sel');
 oSelect.onchange = function()
 {
     console.log('change');
 };

三、.onresize 窗口大小改变时候触发

.onscroll 滑动滚动条时候触发

四、元素到窗口和到文档的距离

如图：

先求元素到文档的距离：

function offsettop( obj )
{
    var top=0;
    var left=0;
    while ( obj != document.body )         //如果obj不是文档的直接下属元素，意思就是obj是盒子内的盒子，不是最外面的盒子
   {
        top += obj.offsetTop;    //盒子到他父级盒子的距离加上父级盒子到他的父级的距离，以此类推
        left += obj.offsetLeft;
        obj = obj.parentNode
   }
   return
   {
         top : top;
         left : left;
    }
}

offsettop(oBox).top;   //求到文档的高度

到浏览器窗口的距离
意思就是求到文档的距离再减去滚动高度就是结果

   function windowtop( obj )
     {
     	  // 滚动高度
          var  scrolltop=document.body.scrollTop || document.documentElement.scrollTop;
          var  scrollleft=document.body.scroll || document.documentElement.scrollLeft;
          return 
          {
                top : offsettop(oBox).top - scrolltop;
                left : offsetleft(oBox).left-scrollleft;
            }
      }
// windowtop( oBox ).top;