精通JavaScript开发课时20（JS事件基础）学习笔记

一、event对象和事件冒泡

1、什么是event对象
用来获取事件的详细信息：鼠标位置、键盘按键
例如：获取鼠标位置：clientX

window.onload=function ()
{
    document.onclick=function (ev)
    {
        //IE
        //alert(event.clientX+','+event.clientY);

        //FF
        //alert(ev.clientX+','+ev.clientY);

        var oEvent=ev||event;

        alert(oEvent.clientX+','+oEvent.clientY);
    };
};

---

document的本质是html的父节点

---

2、获取event对象(兼容性写法)

var oEvent=ev||event;

3、事件冒泡
事件冒泡经常带来困扰，而不是便利。
例：仿select控件
取消冒泡：oEvent.cancelBubble=true

window.onload=function ()
{
    var oBtn=document.getElementById('btn1');
    var oDiv=document.getElementById('div1');

    oBtn.onclick=function (ev)
    {
        var oEvent=ev||event;//兼容

        oDiv.style.display='block';
        //alert('按钮被点击了');

        oEvent.cancelBubble=true;//取消冒泡
    };

    document.onclick=function ()
    {
        oDiv.style.display='none';
        //alert('document被点击了');
    };
};

二、鼠标事件

1、鼠标位置
例1：跟随鼠标的div

document.onmousemove=function (ev)
{
    var oEvent=ev||event;
    var oDiv=document.getElementById('div1');

    oDiv.style.left=oEvent.clientX+'px';
    oDiv.style.top=oEvent.clientY+'px';
};

消除滚动条的影响

• scrollTop的意义——可视区与页面顶部的距离

document.onmousemove=function (ev)
{
    var oEvent=ev||event;
    var oDiv=document.getElementById('div1');

    var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;

    oDiv.style.left=oEvent.clientX+'px';
    oDiv.style.top=oEvent.clientY+scrollTop+'px';
};

2、获取鼠标在页面的绝对位置
封装函数：

function getPos(ev)
{
    var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
    var scrollLeft=document.documentElement.scrollLeft||document.body.scrollLeft;

    return {x: ev.clientX+scrollLeft, y: ev.clientY+scrollTop};
}

document.onmousemove=function (ev)
{
    var oEvent=ev||event;
    var oDiv=document.getElementById('div1');
    var pos=getPos(oEvent);

    oDiv.style.left=pos.x+'px';
    oDiv.style.top=pos.y+'px';
};

例2：一串跟随鼠标的Div

function getPos(ev)
{
    var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
    var scrollLeft=document.documentElement.scrollLeft||document.body.scrollLeft;

    return {x: ev.clientX+scrollLeft, y: ev.clientY+scrollTop};
}

document.onmousemove=function (ev)
{
    var aDiv=document.getElementsByTagName('div');
    var oEvent=ev||event;

    var pos=getPos(oEvent);

    for(var i=aDiv.length-1;i>0;i--)//倒着循环
    {
        aDiv[i].style.left=aDiv[i-1].offsetLeft+'px';
        aDiv[i].style.top=aDiv[i-1].offsetTop+'px';
    }

    aDiv[0].style.left=pos.x+'px';
    aDiv[0].style.top=pos.y+'px';
};

三、键盘事件

1、keyCode——获取用户按下键盘的哪个按键
例：键盘控制Div移动

document.onkeydown=function (ev)
{
    var oEvent=ev||event;
    var oDiv=document.getElementById('div1');

    if(oEvent.keyCode==37)//按<-键
    {
        oDiv.style.left=oDiv.offsetLeft-10+'px';
    }
    else if(oEvent.keyCode==39)//按->键
    {

        oDiv.style.left=oDiv.offsetLeft+10+'px';
    }
};

2、其他属性

• ctrlKey
• shiftKey
• altKey
  例：提交留言（ctrl+回车）

window.onload=function ()
{
    var oTxt1=document.getElementById('txt1');
    var oTxt2=document.getElementById('txt2');

    oTxt1.onkeydown=function (ev)
    {
        var oEvent=ev||event;

        if(oEvent.keyCode==13 && oEvent.ctrlKey)
        {
            oTxt2.value+=oTxt1.value+'\n';
            oTxt1.value='';
        }
    };
};

PS：

1. 以上代码中div必须为绝对定位
2. 关于offsetLeft和offsetTop可以看http://www.cnblogs.com/jscode/archive/2012/09/03/2669299.html
3. 关于“scrollTop = document.documentElement.scrollTop || document.body.scrollTop;”：chrome不认识document.documentElement.scrollTop，只认识document.body.scrollTop