一伟恶、獲取鼠標(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代表?yè)Q行
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代表?yè)Q行
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>首頁(yè)</li>
<li>回到首頁(yè)</li>
<li>注銷</li>
<Li>加入我們</Li>
</ul>
</body>
</html>
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
