提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

Javascript事件实例详解

JavaScript实例事件 详解
2023-06-13 09:15:11 时间
document是位于html标签之上的，可以说是权力最大的。下面的实例当你单击页面上的任何位置都会弹出“a”,正是运用了document的特性。
复制代码代码如下:

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

获取鼠标位置clientX,clientY---注意这里仅仅只是可视区的鼠标位置
复制代码代码如下:

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

或者
复制代码代码如下:
 <script>
   document.onclick=function(ev){
   /*   if(ev)
       {
           alert(ev.clientX+","+ev.clientY);
       }
       else{
           alert(event.clientX+","+event.clentY);
       };
   };*/
   varoEvent=ev||event;
   alert(oEvent.clientX+","+oEvent.clientY);
   };
</script>
 
事件冒泡---一层一层叠加的元素在一起，形成事件冒泡，比如下面的例子：document的最大范围影响了div的响应。
复制代码代码如下:
 <script>
   window.onload=function(){
       varobtn=document.getElementById("btn1");
       varodiv=document.getElementById("div1");
       obtn.onclick=function(ev){
           varoEvent=ev||event;
           odiv.style.display="block";
           oEvent.cancelBubble=true;//清除冒泡
       };
       document.onclick=function(){
           odiv.style.display="none";
       };
   };
</script>
</head>
<body>
<inputtype="button"value="显示"id="btn1"/>
<divid="div1"style="width:100px;height:150px;background:#ccc;"></div>
</body>
 
鼠标移动---在可视区有效
复制代码代码如下:
 <title>鼠标移动</title>
<script>
   window.onmousemove=function(ev){
       varoEvent=ev||event;
       varodiv=document.getElementById("div1");
       odiv.style.left=oEvent.clientX+"px";
       odiv.style.top=oEvent.clientY+"px";
   };
</script>
</head>
<body>
<divid="div1"style="width:50px;height:50px;background:blue;position:absolute;"></div>
</body>
 
 键盘改变位置和方向---通过keycode获取键盘的键值来执行相应的操作。
复制代码代码如下:
 <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
#div1{width:100px;height:100px;background:#CCC;position:absolute;}
</style>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>无标题文档</title>
<script>
document.onkeydown=function(ev)
{
   varoEvent=ev||event;
   varoDiv=document.getElementById("div1");

   //←       37
   //右       39

   if(oEvent.keyCode==37)
   {
       oDiv.style.left=oDiv.offsetLeft-10+"px";
   }
   elseif(oEvent.keyCode==39)
   {
       oDiv.style.left=oDiv.offsetLeft+10+"px";
   }
};
</script>
</head>
<body>
<divid="div1"></div>
</body>
</html>
 
鼠标跟随小尾巴
复制代码代码如下:
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
div{width:10px;height:10px;background:red;position:absolute;}
</style>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>无标题文档</title>
<script>
window.onload=function()
{
   varaDiv=document.getElementsByTagName("div");
   vari=0;

   document.onmousemove=function(ev)
   {
       varoEvent=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
复制代码代码如下:
 <script>
document.onkeydown=function(ev)
{
   varoEvent=ev||event;

   alert(oEvent.keyCode);
};
</script>
 
 ctrlKey---可以通过ctrl+enter组合键来提交内容
复制代码代码如下:
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>无标题文档</title>
<script>
window.onload=function()
{
   varoBtn=document.getElementById("btn1");
   varoTxt1=document.getElementById("txt1");
   varoTxt2=document.getElementById("txt2");

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

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

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

相关文章