JavaScript——事件

一、獲取鼠標(biāo)的位置

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>事件詳解</title>
<script type="text/javascript">

  document.onclick=function(ev)
{
  // alert(event.clientX+','+event.clientY);    只能用于IE    event是IE下的寫法

  //火狐下的寫法,不能用于IE    在火狐下事件處理函數(shù)可以有參數(shù)
  //alert(ev.clientX+','+ev.clientY); 

 /*    ********************第一種    兼容方法
  if(ev)
  {
   alert(ev.clientX+','+ev.clientY); 
  }
  else
  {
    alert(event.clientX+','+event.clientY); 
  }

  }
 */

 //**************************第二種  兼容方法
  var oEvent=ev||event;
 alert(oEvent.clientX+','+oEvent.clientY); 
}
</script>

</head>
<body>

</body>
</html>

二、跟隨鼠標(biāo)的div

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>事件詳解</title>
<style type="text/css">
  #div1{width:100px;height:100px;background:red;position:absolute;}
</style>
<script type="text/javascript">
window.onload=function()
{
  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';
  }
}
</script>

</head>
<body>
<div id="div1">
  
</div>
</body>
</html>

三、提交留言

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>事件詳解</title>

<script type="text/javascript">
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';  //    \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>

四、keyCode

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>事件詳解</title>

<script type="text/javascript">
document.onkeydown=function(ev)
{
    var oEvent=ev||event;
    alert(oEvent.keyCode);//按下一個(gè)按鍵彈出它的鍵碼
}
</script>

</head>
<body >

</body>
</html>
提交留言（回車）：
<meta charset="utf-8">
<title>事件詳解</title>

<script type="text/javascript">
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';  //    \n代表換行
    oTxt2.value='';
    }
    oTxt2.onkeydown=function(ev)
    {
        var oEvent=ev||event;
        if(oEvent.keyCode==13)  //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>

五、只能輸入數(shù)字的輸入框

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>事件詳解</title>
<script type="text/javascript">
    window.onload=function()
    {
        var oTxt=document.getElementById('txt1');
        oTxt.onkeydown=function(ev)
        {
            var oEvent=ev||event;
            //alert(oEvent.keyCode);輸出鍵值
            //只能輸入編碼48-57的數(shù)字   輸入其他的輸入不進(jìn)去 。退格的鍵值是8，所以不是退格和數(shù)字的都不響應(yīng)
            if(oEvent.keyCode!=8&&(oEvent.keyCode<48||oEvent.keyCode>57))//只能輸入編碼48-57的數(shù)字   輸入其他的輸入不進(jìn)去   所以數(shù)字輸錯(cuò)了也不能刪除
            {
                return false;
            }
            
        }
    }
</script>
</head>

<body >
<input  id="txt1" type="text"/>
</body>

</html>

六、屏蔽右鍵菜單

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>事件詳解</title>
<script type="text/javascript">
    document.oncontextmenu=function()
    {
     //alert('a');點(diǎn)右鍵彈出a
     return false;
    }

</script>
</head>

<body >

</body>

</html>

六、彈出自定義菜單

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>事件詳解</title>
<style type="text/css">
    body{margin: 0;padding: 0;}
    #ul1{width:100px;background:#ccc;border:1px solid black;position: absolute;list-style:none;display: none;}
</style>
<script type="text/javascript">
    document.oncontextmenu=function(ev)//*************點(diǎn)擊右鍵顯示菜單
    {
        var oEvent=ev||event;
        var oUl=document.getElementById('ul1');
        oUl.style.display='block';

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

        return false;
    }

    document.onclick=function()//*****************點(diǎn)擊屏幕菜單消失
    {
     var oUl=document.getElementById('ul1');
     oUl.style.display='none';
    }
</script>
</head>

<body >
<ul id="ul1">
    <li>首頁</li>
    <li>回到首頁</li>
    <li>注銷</li>
    <Li>加入我們</Li>
</ul>
</body>

</html>
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容