一、获取鼠标的位置
<!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 在火狐下事件处理函数可以有参数
//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>
二、跟随鼠标的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);//按下一个按键弹出它的键码
}
</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>
五、只能输入数字的输入框
<!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的数字 输入其他的输入不进去 。退格的键值是8，所以不是退格和数字的都不响应
if(oEvent.keyCode!=8&&(oEvent.keyCode<48||oEvent.keyCode>57))//只能输入编码48-57的数字 输入其他的输入不进去 所以数字输错了也不能删除
{
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');点右键弹出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)//*************点击右键显示菜单
{
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()//*****************点击屏幕菜单消失
{
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>
网友评论