Js事件--Event

焦点事件

PS:注意不是所有元素都能接收到焦点，能够响应用户操作的元素才有焦点(例如输入框,链接a,表单元素)

• 获取焦点事件onfocus \失去焦点事件onblur(如：提示文字)
• obj.focus();给指定的元素设置焦点
• obj.blur(); 取消指定元素的焦点
• obj.select();指定的元素里面的文本内容

    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";
    }