Javascript事件實例詳解

更新時間：2013年11月06日 15:00:21 作者：

本文實例當(dāng)你單擊頁面上的任何位置都會彈出“a”,正是運用了document的特性

document是位于html標(biāo)簽之上的，可以說是權(quán)力最大的。下面的實例當(dāng)你單擊頁面上的任何位置都會彈出“a”,正是運用了document的特性。

 <script>        
     document.onclick=function(){
         alert('a');
     };
 </script>
 

獲取鼠標(biāo)位置clientX,clientY---注意這里僅僅只是可視區(qū)的鼠標(biāo)位置

復(fù)制代碼代碼如下:

 <script>
    document.onclick=function(ev){
        if(ev)
        {
            alert(ev.clientX+','+ev.clientY);
        }
        else{
            alert(event.clientX+','+event.clentY);
        };
    };
</script>
 

或者

復(fù)制代碼代碼如下:

 <script>
    document.onclick=function(ev){
    /*    if(ev)
        {
            alert(ev.clientX+','+ev.clientY);
        }
        else{
            alert(event.clientX+','+event.clentY);
        };
    };*/
    var oEvent=ev||event;
    alert(oEvent.clientX+','+oEvent.clientY);
    };
</script>
 

事件冒泡---一層一層疊加的元素在一起，形成事件冒泡，比如下面的例子：document的最大范圍影響了div的響應(yīng)。

復(fù)制代碼代碼如下:

 <script>
    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';
            oEvent.cancelBubble=true;//清除冒泡
        };
        document.onclick=function(){
            odiv.style.display='none';
        };
    };
</script>
</head>
<body>
<input type="button" value="顯示" id="btn1"/>
<div id="div1" style="width:100px;height:150px;background:#ccc;"></div>
</body>
 

鼠標(biāo)移動---在可視區(qū)有效

復(fù)制代碼代碼如下:

 <title>鼠標(biāo)移動</title>
<script>
    window.onmousemove=function(ev){
        var oEvent=ev||event;
        var odiv=document.getElementById('div1');
        odiv.style.left=oEvent.clientX+'px';
        odiv.style.top=oEvent.clientY+'px';
    };
</script>
</head>
<body>
<div id="div1" style="width:50px;height:50px;background:blue;position:absolute;"></div>
</body>
 

鍵盤改變位置和方向---通過keycode獲取鍵盤的鍵值來執(zhí)行相應(yīng)的操作。

復(fù)制代碼代碼如下:

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
#div1 {width:100px; height:100px; background:#CCC; position:absolute;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標(biāo)題文檔</title>
<script>
document.onkeydown=function (ev)
{
    var oEvent=ev||event;
    var oDiv=document.getElementById('div1');

    //←        37
    //右        39

    if(oEvent.keyCode==37)
    {
        oDiv.style.left=oDiv.offsetLeft-10+'px';
    }
    else if(oEvent.keyCode==39)
    {
        oDiv.style.left=oDiv.offsetLeft+10+'px';
    }
};
</script>
</head>
<body>
<div id="div1"></div>
</body>
</html>
 

鼠標(biāo)跟隨小尾巴

復(fù)制代碼代碼如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
div {width:10px; height:10px; background:red; position:absolute;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標(biāo)題文檔</title>
<script>
window.onload=function ()
{
    var aDiv=document.getElementsByTagName('div');
    var i=0;

    document.onmousemove=function (ev)
    {
        var oEvent=ev||event;

        for(i=aDiv.length-1;i>0;i--)
        {
            aDiv[i].style.left=aDiv[i-1].style.left;
            aDiv[i].style.top=aDiv[i-1].style.top;
        }

        aDiv[0].style.left=oEvent.clientX+'px';
        aDiv[0].style.top=oEvent.clientY+'px';
    };
};
</script>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>

keycode

復(fù)制代碼代碼如下:

 <script>
document.onkeydown=function (ev)
{
    var oEvent=ev||event;

    alert(oEvent.keyCode);
};
</script>
 

ctrlKey---可以通過ctrl+enter組合鍵來提交內(nèi)容

復(fù)制代碼代碼如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標(biāo)題文檔</title>
<script>
window.onload=function ()
{
    var oBtn=document.getElementById('btn1');
    var oTxt1=document.getElementById('txt1');
    var oTxt2=document.getElementById('txt2');

    oBtn.onclick=function ()
    {
        oTxt1.value+=oTxt2.value+'\n';
        oTxt2.value='';
    };

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

        if(oEvent.ctrlKey && oEvent.keyCode==13)
        {
            oTxt1.value+=oTxt2.value+'\n';
            oTxt2.value='';
        }
    };
};
</script>
</head>
<body>
<textarea id="txt1" rows="10" cols="40"></textarea><br />
<input id="txt2" type="text" />
<input id="btn1" type="button" value="留言" />
</body>
</html>