Javascript事件详解1

这一篇文章本来准备上个周日发布的，拖了好长时间，LOL玩多了。明天要开始做网站了，更新的可能会更慢，希望这个学期之前把基础教程学完，还有18课时，大概需要一个月搞定。加油！！！

关于document---document是位于html标签之上的，可以说是权力最大的。下面的实例当你单击页面上的任何位置都会弹出“a”,正是运用了document的特性。

1 <script>        
2     document.onclick=function(){
3         alert('a');
4     };
5 </script>

 

获取鼠标位置clientX,clientY---注意这里仅仅只是可视区的鼠标位置

 1 <script>
 2     document.onclick=function(ev){
 3         if(ev)
 4         {
 5             alert(ev.clientX+','+ev.clientY);
 6         }
 7         else{
 8             alert(event.clientX+','+event.clentY);
 9         };
10     };
11 </script>

或者

 1 <script>
 2     document.onclick=function(ev){
 3     /*    if(ev)
 4         {
 5             alert(ev.clientX+','+ev.clientY);
 6         }
 7         else{
 8             alert(event.clientX+','+event.clentY);
 9         };
10     };*/
11     var oEvent=ev||event;
12     alert(oEvent.clientX+','+oEvent.clientY);
13     };
14 </script>

事件冒泡---一层一层叠加的元素在一起，形成事件冒泡，比如下面的例子：document的最大范围影响了div的响应。

 1 <script>
 2     window.onload=function(){
 3         var obtn=document.getElementById('btn1');
 4         var odiv=document.getElementById('div1');
 5         obtn.onclick=function(ev){
 6             var oEvent=ev||event;
 7             odiv.style.display='block';
 8             oEvent.cancelBubble=true;//清除冒泡
 9         };
10         document.onclick=function(){
11             odiv.style.display='none';
12         };
13     };
14 </script>
15 </head>
16 
17 <body>
18 <input type="button" value="显示" id="btn1"/>
19 <div id="div1" style="width:100px;height:150px;background:#ccc;"></div>
20 </body>

鼠标移动---在可视区有效

 1 <title>鼠标移动</title>
 2 <script>
 3     window.onmousemove=function(ev){
 4         var oEvent=ev||event;
 5         var odiv=document.getElementById('div1');
 6         odiv.style.left=oEvent.clientX+'px';
 7         odiv.style.top=oEvent.clientY+'px';
 8     };
 9 </script>
10 </head>
11 
12 <body>
13 <div id="div1" style="width:50px;height:50px;background:blue;position:absolute;"></div>
14 </body>

 键盘改变位置和方向---通过keycode获取键盘的键值来执行相应的操作。

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <style>
 5 #div1 {width:100px; height:100px; background:#CCC; position:absolute;}
 6 </style>
 7 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 8 <title>无标题文档</title>
 9 <script>
10 document.onkeydown=function (ev)
11 {
12     var oEvent=ev||event;
13     var oDiv=document.getElementById('div1');
14     
15     //←        37
16     //右        39
17     
18     if(oEvent.keyCode==37)
19     {
20         oDiv.style.left=oDiv.offsetLeft-10+'px';
21     }
22     else if(oEvent.keyCode==39)
23     {
24         oDiv.style.left=oDiv.offsetLeft+10+'px';
25     }
26 };
27 </script>
28 </head>
29 
30 <body>
31 <div id="div1"></div>
32 </body>
33 </html>

 

鼠标跟随小尾巴

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <style>
 5 div {width:10px; height:10px; background:red; position:absolute;}
 6 </style>
 7 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 8 <title>无标题文档</title>
 9 <script>
10 window.onload=function ()
11 {
12     var aDiv=document.getElementsByTagName('div');
13     var i=0;
14     
15     document.onmousemove=function (ev)
16     {
17         var oEvent=ev||event;
18         
19         for(i=aDiv.length-1;i>0;i--)
20         {
21             aDiv[i].style.left=aDiv[i-1].style.left;
22             aDiv[i].style.top=aDiv[i-1].style.top;
23         }
24         
25         aDiv[0].style.left=oEvent.clientX+'px';
26         aDiv[0].style.top=oEvent.clientY+'px';
27     };
28 };
29 </script>
30 </head>
31 
32 <body>
33 <div></div>
34 <div></div>
35 <div></div>
36 <div></div>
37 <div></div>
38 <div></div>
39 <div></div>
40 <div></div>
41 <div></div>
42 <div></div>
43 <div></div>
44 <div></div>
45 <div></div>
46 <div></div>
47 <div></div>
48 <div></div>
49 <div></div>
50 <div></div>
51 <div></div>
52 <div></div>
53 <div></div>
54 <div></div>
55 <div></div>
56 <div></div>
57 <div></div>
58 <div></div>
59 <div></div>
60 <div></div>
61 <div></div>
62 <div></div>
63 <div></div>
64 <div></div>
65 <div></div>
66 <div></div>
67 <div></div>
68 <div></div>
69 <div></div>
70 <div></div>
71 <div></div>
72 <div></div>
73 </body>
74 </html>

keycode

1 <script>
2 document.onkeydown=function (ev)
3 {
4     var oEvent=ev||event;
5     
6     alert(oEvent.keyCode);
7 };
8 </script>

 

 ctrlKey---可以通过ctrl+enter组合键来提交内容

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>无标题文档</title>
 6 <script>
 7 window.onload=function ()
 8 {
 9     var oBtn=document.getElementById('btn1');
10     var oTxt1=document.getElementById('txt1');
11     var oTxt2=document.getElementById('txt2');
12     
13     oBtn.onclick=function ()
14     {
15         oTxt1.value+=oTxt2.value+'\n';
16         oTxt2.value='';
17     };
18     
19     oTxt2.onkeydown=function (ev)
20     {
21         var oEvent=ev||event;
22         
23         if(oEvent.ctrlKey && oEvent.keyCode==13)
24         {
25             oTxt1.value+=oTxt2.value+'\n';
26             oTxt2.value='';
27         }
28     };
29 };
30 </script>
31 </head>
32 
33 <body>
34 <textarea id="txt1" rows="10" cols="40"></textarea><br />
35 <input id="txt2" type="text" />
36 <input id="btn1" type="button" value="留言" />
37 </body>
38 </html>

 

shiftKey---altKey---类似于ctrlkey

 

关于scrollTop和clientY


__EOF__

本文作者：Paxster
本文链接：https://www.cnblogs.com/paxster/archive/2013/05/13/3073037.html
关于博主：评论和私信会在第一时间回复。或者直接私信我。
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！
posted @   Paxster  阅读(421)  评论(0)  编辑  收藏  举报
编辑推荐：
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
阅读排行：
· 地球OL攻略 —— 某应届生求职总结
· 周边上新：园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源！
· .NET周刊【3月第1期 2025-03-02】
· [AI/GPT/综述] AI Agent的设计模式综述
点击右上角即可分享
微信分享提示
AI IDE Trae