焦點事件

PS:注意不是所有元素都能接收到焦點，能夠響應用戶操作的元素才有焦點(例如輸入框,鏈接a,表單元素)

• 獲取焦點事件onfocus \失去焦點事件onblur(如：提示文字)
• obj.focus();給指定的元素設置焦點
• obj.blur(); 取消指定元素的焦點
• obj.select();指定的元素里面的文本內容

<input type="text" id="text1" value="請輸入內容">
<input type="button" value = "全選" id="btn">

    var oText = document.getElementById('text1');
    var oBtn = document.getElementById('btn');

    //onfocus：當元素獲取到焦點的時候觸發
    oText.onfocus = function(){
        if(value='請輸入內容'){
            this.value = '';
        }
    }

    //onblur：當元素失去焦點的時候觸發
    oText.onblur = function(){
        if(this.value == ''){
            this.value = '請輸入內容';
        }
    }

    oText.focus();

    oBtn.onclick = function(){
        oText.select();
    }

Event對象

• 用來獲取事件的詳細信息:鼠標位置，鍵盤按鍵
• Event對象下的兼容ev =ev 或者window.event
• Event對象下獲取鼠標位置clientX,clientY(例如方塊隨鼠標移動)
  event事件對象。當一個事件發生的時候，和這個當前這個對象發生的這個事件有關的一些詳細的信息都會臨時保存到一個指定的地方。這個地方就是event對象。(比如飛機的黑匣子)
• Event對象必須在一個事件調用的函數里面使用才有內容
• 事件函數:事件調用的函數。一個函數不是事件函數，不是定義的時候決定，而是取決于這個函數被調用的時候.
  比如:

function fn1(e)
{
   console.log(e);
}
fn1(e);  //不是事件調用的函數,因此這時候e沒有內容,直接報錯誤
document.onclick = fn1;  

循環出來屬性和值

function click(e){
   for(var i in e)
   {
       console.log(e[i]);
   }
}
document.onclick = click;

clientX\clientY

當一個事件發生的時候，鼠標到頁面可視區的距離

function fn1(e)
{
  alert(e.clientX);   
}
document.onclick = fn1;  //彈出當前鼠標到可視區左邊的距離

一個小例子DIV跟隨鼠標移動

var a = document.getElementsByClassName("box")[0];
    document.onmousemove = function(e){
        var scrollTop = document.body.scrollTop|| document.documentElement.scrollTop;
        a.style["left"] = (e.clientX-50)+"px";//50是DIV一半的寬度，這樣鼠標在DIV的中心
        a.style["top"] = (e.clientY-25+scrollTop)+"px";
    }