DOM (四)
事件的委派
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title></title> 6 <script type="text/javascript"> 7 8 window.onload = function(){ 9 10 var u1 = document.getElementById("u1"); 11 12 //点击按钮以后添加超链接 13 var btn01 = document.getElementById("btn01"); 14 btn01.onclick = function(){ 15 //创建一个li 16 var li = document.createElement("li"); 17 li.innerHTML = "<a href='javascript:;' class='link'>新建的超链接</a>"; 18 19 //将li添加到ul中 20 u1.appendChild(li); 21 }; 22 23 24 /* 25 * 为每一个超链接都绑定一个单击响应函数 26 * 这里我们为每一个超链接都绑定了一个单击响应函数，这种操作比较麻烦， 27 * 而且这些操作只能为已有的超链接设置事件，而新添加的超链接必须重新绑定 28 */ 29 //获取所有的a 30 var allA = document.getElementsByTagName("a"); 31 //遍历 32 /*for(var i=0 ; i<allA.length ; i++){ 33 allA[i].onclick = function(){ 34 alert("我是a的单击响应函数！！！"); 35 }; 36 }*/ 37 38 /* 39 * 我们希望，只绑定一次事件，即可应用到多个的元素上，即使元素是后添加的 40 * 我们可以尝试将其绑定给元素的共同的祖先元素 41 * 42 * 事件的委派 43 * - 指将事件统一绑定给元素的共同的祖先元素，这样当后代元素上的事件触发时，会一直冒泡到祖先元素 44 * 从而通过祖先元素的响应函数来处理事件。 45 * - 事件委派是利用了冒泡，通过委派可以减少事件绑定的次数，提高程序的性能 46 */ 47 48 //为ul绑定一个单击响应函数 49 u1.onclick = function(event){ 50 event = event || window.event; 51 52 /* 53 * target 54 * - event中的target表示的触发事件的对象 event.target:目标元素代表鼠标真正触发事件的那个元素（代表最初的，最内部的） 55 */ 56 //alert(event.target); 57 58 59 //如果触发事件的对象是我们期望的元素，则执行否则不执行 60 if(event.target.className == "link"){ 61 alert("我是ul的单击响应函数"); 62 }else{ 63 alert("不是a元素") 64 } 65 66 }; 67 68 }; 69 70 </script> 71 </head> 72 <body> 73 <button id="btn01">添加超链接</button> 74 75 <ul id="u1" style="background-color: #bfa;"> 76 <li> 77 <p>我是p元素</p> 78 </li> 79 <li><a href="javascript:;" class="link">超链接一</a></li> 80 <li><a href="javascript:;" class="link">超链接二</a></li> 81 <li><a href="javascript:;" class="link">超链接三</a></li> 82 </ul> 83 84 </body> 85 </html>
addEventListener() 事件绑定
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <script type="text/javascript"> 7 8 window.onload = function(){ 9 10 /* 11 * 点击按钮以后弹出一个内容 12 */ 13 //获取按钮对象 14 var btn01 = document.getElementById("btn01"); 15 16 /* 17 * 使用 对象.事件 = 函数 的形式绑定响应函数， 18 * 它只能同时为一个元素的一个事件绑定一个响应函数， 19 * 不能绑定多个，如果绑定了多个，则后边会覆盖掉前边的 20 */ 21 22 //为btn01绑定一个单击响应函数 23 /*btn01.onclick = function(){ 24 alert(1); 25 };*/ 26 27 //为btn01绑定第二个响应函数 28 /*btn01.onclick = function(){ 29 alert(2); 30 };*/ 31 32 /* 33 * addEventListener() 34 * - 通过这个方法也可以为元素绑定响应函数.事件监听 35 * - 参数： 36 * 1.事件的字符串，不要on 37 * 2.回调函数，当事件触发时该函数会被调用 38 * 3.是否在捕获阶段触发事件，需要一个布尔值，一般都传false 39 * 40 * 使用addEventListener()可以同时为一个元素的相同事件同时绑定多个响应函数， 41 * 这样当事件被触发时，响应函数将会按照函数的绑定顺序执行 42 * 43 * 这个方法不支持IE8及以下的浏览器 44 */ 45 // btn01.addEventListener("click",function(){ 46 // alert(1); 47 // },false); 48 49 // btn01.addEventListener("click",function(){ 50 // alert(2); 51 // },false); 52 53 // btn01.addEventListener("click",function(){ 54 // alert(3); 55 // },false); 56 57 /* 58 * attachEvent() 59 * - 在IE8中可以使用attachEvent()来绑定事件 60 * - 参数： 61 * 1.事件的字符串，要on 62 * 2.回调函数 63 * 64 * - 这个方法也可以同时为一个事件绑定多个处理函数， 65 * 不同的是它是后绑定先执行，执行顺序和addEventListener()相反 66 */ 67 /*btn01.attachEvent("onclick",function(){ 68 alert(1); 69 }); 70 71 btn01.attachEvent("onclick",function(){ 72 alert(2); 73 }); 74 75 btn01.attachEvent("onclick",function(){ 76 alert(3); 77 });*/ 78 79 /*btn01.addEventListener("click",function(){ 80 alert(this); 81 },false);*/ 82 83 /*btn01.attachEvent("onclick",function(){ 84 alert(this); 85 });*/ 86 87 bind(btn01 , "click" , function(){ 88 alert(this); 89 }); 90 91 92 }; 93 94 //定义一个函数，用来为指定元素绑定响应函数 95 /* 96 * addEventListener()中的this，是绑定事件的对象 97 * attachEvent()中的this，是window 98 * 需要统一两个方法this 99 */ 100 /* 101 * 参数： 102 * obj 要绑定事件的对象 103 * eventStr 事件的字符串(不要on) 104 * callback 回调函数 105 */ 106 function bind(obj , eventStr , callback){ 107 if(obj.addEventListener){ 108 //大部分浏览器兼容的方式 109 obj.addEventListener(eventStr , callback , false); 110 }else{ 111 /* 112 * this是谁由调用方式决定 113 * callback.call(obj) 114 */ 115 //IE8及以下 116 obj.attachEvent("on"+eventStr , function(){ 117 //在匿名函数中调用回调函数 118 callback.call(obj); 119 }); 120 } 121 } 122 123 </script> 124 </head> 125 <body> 126 127 <button id="btn01">点我一下</button> 128 </body> 129 </html>
事件的传播 捕获阶段- 目标阶段- 冒泡阶段
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style type="text/css"> 7 8 #box1{ 9 width: 300px; 10 height: 300px; 11 background-color: yellowgreen; 12 } 13 14 #box2{ 15 width: 200px; 16 height: 200px; 17 background-color: yellow; 18 } 19 20 #box3{ 21 width: 150px; 22 height: 150px; 23 background-color: skyblue; 24 } 25 26 </style> 27 28 <script type="text/javascript"> 29 30 window.onload = function(){ 31 32 /* 33 * 分别为三个div绑定单击响应函数 34 */ 35 var box1 = document.getElementById("box1"); 36 var box2 = document.getElementById("box2"); 37 var box3 = document.getElementById("box3"); 38 39 /* 40 * 事件的传播 41 * - 关于事件的传播网景公司和微软公司有不同的理解 42 * - 微软公司认为事件应该是由内向外传播，也就是当事件触发时，应该先触发当前元素上的事件， 43 * 然后再向当前元素的祖先元素上传播，也就说事件应该在冒泡阶段执行。 44 * - 网景公司认为事件应该是由外向内传播的，也就是当前事件触发时，应该先触发当前元素的最外层的祖先元素的事件， 45 * 然后在向内传播给后代元素 46 * - W3C综合了两个公司的方案，将事件传播分成了三个阶段 47 * 1.捕获阶段 48 * - 在捕获阶段时从最外层的祖先元素，向目标元素进行事件的捕获，但是默认此时不会触发事件 49 * 2.目标阶段 50 * - 事件捕获到目标元素，捕获结束开始在目标元素上触发事件 51 * 3.冒泡阶段 52 * - 事件从目标元素向他的祖先元素传递，依次触发祖先元素上的事件 53 * 54 * - 如果希望在捕获阶段就触发事件，可以将addEventListener()的第三个参数设置为true 55 * 一般情况下我们不会希望在捕获阶段触发事件，所以这个参数一般都是false 56 * 57 * - IE8及以下的浏览器中没有捕获阶段 58 */ 59 60 bind(box1,"click",function(){ 61 alert("我是box1的响应函数") 62 }); 63 64 bind(box2,"click",function(){ 65 alert("我是box2的响应函数") 66 }); 67 68 bind(box3,"click",function(){ 69 alert("我是box3的响应函数") 70 }); 71 72 }; 73 74 75 function bind(obj , eventStr , callback){ 76 if(obj.addEventListener){ 77 //大部分浏览器兼容的方式 78 obj.addEventListener(eventStr , callback , true); 79 }else{ 80 /* 81 * this是谁由调用方式决定 82 * callback.call(obj) 83 */ 84 //IE8及以下 85 obj.attachEvent("on"+eventStr , function(){ 86 //在匿名函数中调用回调函数 87 callback.call(obj); 88 }); 89 } 90 } 91 92 </script> 93 </head> 94 95 <body> 96 97 <div id="box1"> 98 <div id="box2"> 99 <div id="box3"></div> 100 </div> 101 </div> 102 103 </body> 104 </html>
拖拽
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title></title>
6 <style type="text/css">
7
8 #box1{
9 width: 100px;
10 height: 100px;
11 background-color: red;
12 position: absolute;
13 }
14
15 #box2{
16 width: 100px;
17 height: 100px;
18 background-color: yellow;
19 position: absolute;
20
21 left: 200px;
22 top: 200px;
23 }
24
25 </style>
26
27 <script type="text/javascript">
28
29 window.onload = function(){
30 /*
31 * 拖拽box1元素
32 * - 拖拽的流程
33 * 1.当鼠标在被拖拽元素上按下时，开始拖拽 onmousedown
34 * 2.当鼠标移动时被拖拽元素跟随鼠标移动 onmousemove
35 * 3.当鼠标松开时，被拖拽元素固定在当前位置 onmouseup
36 */
37
38 //获取box1
39 var box1 = document.getElementById("box1");
40 //为box1绑定一个鼠标按下事件
41 //当鼠标在被拖拽元素上按下时，开始拖拽 onmousedown
42 box1.onmousedown = function(event){
43 event = event || window.event;
44 //div的偏移量 鼠标.clentX - 元素.offsetLeft
45 //div的偏移量 鼠标.clentY - 元素.offsetTop
46 //用户鼠标在哪里按下，鼠标箭头就在那里
47 var ol = event.clientX - box1.offsetLeft;
48 var ot = event.clientY - box1.offsetTop;
49
50
51 //为document绑定一个onmousemove事件
52 //document移动事件，事件委托到后代box2,也会触发
53 document.onmousemove = function(event){
54 event = event || window.event;
55 //当鼠标移动时被拖拽元素跟随鼠标移动 onmousemove
56 //获取鼠标的坐标
57 var left = event.clientX - ol;
58 var top = event.clientY - ot;
59
60 //修改box1的位置
61 box1.style.left = left+"px";
62 box1.style.top = top+"px";
63
64 };
65
66 //为document绑定一个鼠标松开事件
67 //box1和box2是兄弟元素，当box1鼠标在box2中松手后，里头的逻辑不会发生，
68 //则需要在html中绑定鼠标松手事件，才会触发后代box2也会触发松手事件
69 document.onmouseup = function(){
70 //当鼠标松开时，被拖拽元素固定在当前位置 onmouseup
71 //取消document的onmousemove事件
72 document.onmousemove = null;
73 //取消document的onmouseup事件
74 //此时给整个页面绑定松手事件，在元素外部松开鼠标，也会执行alert,这是不希望
75 //需要鼠标松手后，则要取消onmouseup松手事件.此时onmouseup会变成一个一次性事件，
76 //只会触发一次
77 document.onmouseup = null;
78 alert(this);
79 };
80
81
82 /*
83 * 当我们拖拽一个网页中(全选时)的内容时，浏览器会默认去搜索引擎中搜索内容，
84 * 此时会导致拖拽功能的异常，这个是浏览器提供的默认行为，
85 * 如果不希望发生这个行为，则可以通过return false来取消默认行为
86 *
87 * 但是这招对IE8不起作用
88 */
89 return false;
90 };
91
92
93
94
95 };
96
97
98 </script>
99 </head>
100 <body>
101 <div id="box1"></div>
102
103 <div id="box2"></div>
104 </body>
105 </html>
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style type="text/css"> 7 8 #box1{ 9 width: 100px; 10 height: 100px; 11 background-color: red; 12 position: absolute; 13 } 14 15 #box2{ 16 width: 100px; 17 height: 100px; 18 background-color: yellow; 19 position: absolute; 20 21 left: 200px; 22 top: 200px; 23 } 24 25 </style> 26 27 <script type="text/javascript"> 28 29 window.onload = function(){ 30 /* 31 * 拖拽box1元素 32 * - 拖拽的流程 33 * 1.当鼠标在被拖拽元素上按下时，开始拖拽 onmousedown 34 * 2.当鼠标移动时被拖拽元素跟随鼠标移动 onmousemove 35 * 3.当鼠标松开时，被拖拽元素固定在当前位置 onmouseup 36 */ 37 38 //获取box1 39 var box1 = document.getElementById("box1"); 40 var box2 = document.getElementById("box2"); 41 //为box1绑定一个鼠标按下事件 42 //当鼠标在被拖拽元素上按下时，开始拖拽 onmousedown 43 box1.onmousedown = function(event){ 44 45 //设置box1捕获所有鼠标按下的事件 46 /* 47 * setCapture() 48 * - 只有IE支持，但是在火狐中调用时不会报错， 49 * 而如果使用chrome调用，会报错 50 */ 51 /*if(box1.setCapture){ 52 box1.setCapture(); 53 }*/ 54 box1.setCapture && box1.setCapture(); 55 56 57 event = event || window.event; 58 //div的偏移量 鼠标.clentX - 元素.offsetLeft 59 //div的偏移量 鼠标.clentY - 元素.offsetTop 60 //让鼠标和box元素同步 61 var ol = event.clientX - box1.offsetLeft; 62 var ot = event.clientY - box1.offsetTop; 63 64 65 //为document绑定一个onmousemove事件 66 //box1和box2是兄弟元素，如果给box1绑定鼠标移动事件，移动到box2中，则不会有效果 67 //则需要在document中绑定鼠标移动事件，box2冒泡传递到document,触发该事件 68 document.onmousemove = function(event){ 69 event = event || window.event; 70 //当鼠标移动时被拖拽元素跟随鼠标移动 onmousemove 71 //获取鼠标的坐标 72 var left = event.clientX - ol; 73 var top = event.clientY - ot; 74 75 //修改box1的位置 76 box1.style.left = left+"px"; 77 box1.style.top = top+"px"; 78 79 }; 80 81 //为document绑定一个鼠标松开事件 82 document.onmouseup = function(){ 83 //当鼠标松开时，被拖拽元素固定在当前位置 onmouseup 84 //取消document的onmousemove事件 85 document.onmousemove = null; 86 //取消document的onmouseup事件 87 //此时给整个页面绑定松手事件，在元素外部松开鼠标，也会执行alert,这是不希望 88 //需要鼠标松手后，则要取消onmouseup松手事件.此时onmouseup会变成一个一次性事件， 89 //只会触发一次 90 document.onmouseup = null; 91 //当鼠标松开时，取消对事件的捕获 92 box1.releaseCapture && box1.releaseCapture(); 93 }; 94 95 /* 96 * 当我们拖拽一个网页中(全选时)的内容时，浏览器会默认去搜索引擎中搜索内容， 97 * 此时会导致拖拽功能的异常（会和文字一起拖拽），这个是浏览器提供的默认行为， 98 * 如果不希望发生这个行为，则可以通过return false来取消默认行为 99 * 100 * 但是这招对IE8不起作用，谷歌和火狐起作用 101 */ 102 return false; 103 104 }; 105 106 107 108 }; 109 110 111 </script> 112 </head> 113 <body> 114 115 我是一段文字 116 117 <div id="box1"></div> 118 119 <div id="box2"></div> 120 </body> 121 </html>
ie捕获setCapture()方法
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <script type="text/javascript"> 7 8 window.onload = function(){ 9 //分别为两个按钮绑定单击响应函数 10 var btn01 = document.getElementById("btn01"); 11 var btn02 = document.getElementById("btn02"); 12 13 btn01.onclick = function(){ 14 alert(1); 15 }; 16 17 btn02.onclick = function(){ 18 alert(2); 19 }; 20 21 //设置btn01对鼠标按下相关的事件进行捕获 22 //当调用一个元素的setCapture()方法以后，这个元素将会把下一次所有的鼠标按下相关的事件捕获到自身上 23 btn01.setCapture(); 24 }; 25 26 </script> 27 </head> 28 <body> 29 <button id="btn01">按钮01</button> 30 <button id="btn02">按钮02</button> 31 </body> 32 </html>
设置拖拽函数模板
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style type="text/css"> 7 8 #box1{ 9 width: 100px; 10 height: 100px; 11 background-color: red; 12 position: absolute; 13 } 14 15 #box2{ 16 width: 100px; 17 height: 100px; 18 background-color: yellow; 19 position: absolute; 20 21 left: 200px; 22 top: 200px; 23 } 24 25 </style> 26 27 <script type="text/javascript"> 28 29 window.onload = function(){ 30 /* 31 * 拖拽box1元素 32 * - 拖拽的流程 33 * 1.当鼠标在被拖拽元素上按下时，开始拖拽 onmousedown 34 * 2.当鼠标移动时被拖拽元素跟随鼠标移动 onmousemove 35 * 3.当鼠标松开时，被拖拽元素固定在当前位置 onmouseup 36 */ 37 38 //获取box1 39 var box1 = document.getElementById("box1"); 40 var box2 = document.getElementById("box2"); 41 var img1 = document.getElementById("img1"); 42 43 //开启box1的拖拽 44 drag(box1); 45 //开启box2的 46 drag(box2); 47 48 drag(img1); 49 50 51 52 53 }; 54 55 /* 56 * 提取一个专门用来设置拖拽的函数 57 * 参数：开启拖拽的元素 58 */ 59 function drag(obj){ 60 //当鼠标在被拖拽元素上按下时，开始拖拽 onmousedown 61 obj.onmousedown = function(event){ 62 63 //设置box1捕获所有鼠标按下的事件 64 /* 65 * setCapture() 66 * - 只有IE支持，但是在火狐中调用时不会报错， 67 * 而如果使用chrome调用，会报错 68 */ 69 /*if(box1.setCapture){ 70 box1.setCapture(); 71 }*/ 72 obj.setCapture && obj.setCapture(); 73 74 75 event = event || window.event; 76 //div的偏移量 鼠标.clentX - 元素.offsetLeft 77 //div的偏移量 鼠标.clentY - 元素.offsetTop 78 var ol = event.clientX - obj.offsetLeft; 79 var ot = event.clientY - obj.offsetTop; 80 81 82 //为document绑定一个onmousemove事件 83 document.onmousemove = function(event){ 84 event = event || window.event; 85 //当鼠标移动时被拖拽元素跟随鼠标移动 onmousemove 86 //获取鼠标的坐标 87 var left = event.clientX - ol; 88 var top = event.clientY - ot; 89 90 //修改box1的位置 91 obj.style.left = left+"px"; 92 obj.style.top = top+"px"; 93 94 }; 95 96 //为document绑定一个鼠标松开事件 97 document.onmouseup = function(){ 98 //当鼠标松开时，被拖拽元素固定在当前位置 onmouseup 99 //取消document的onmousemove事件 100 document.onmousemove = null; 101 //取消document的onmouseup事件 102 document.onmouseup = null; 103 //当鼠标松开时，取消对事件的捕获 104 obj.releaseCapture && obj.releaseCapture(); 105 }; 106 107 /* 108 * 当我们拖拽一个网页中的内容时，浏览器会默认去搜索引擎中搜索内容， 109 * 此时会导致拖拽功能的异常，这个是浏览器提供的默认行为， 110 * 如果不希望发生这个行为，则可以通过return false来取消默认行为 111 * 112 * 但是这招对IE8不起作用 113 */ 114 return false; 115 116 }; 117 } 118 119 120 </script> 121 </head> 122 <body> 123 124 我是一段文字 125 126 <div id="box1"></div> 127 128 <div id="box2"></div> 129 130 <img src="img/an.jpg" id="img1" style="position: absolute;"/> 131 </body> 132 </html>
滚轮事件
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style type="text/css"> 7 8 #box1{ 9 width: 100px; 10 height: 100px; 11 background-color: red; 12 } 13 14 </style> 15 <script type="text/javascript"> 16 17 window.onload = function(){ 18 19 20 //获取id为box1的div 21 var box1 = document.getElementById("box1"); 22 23 //为box1绑定一个鼠标滚轮滚动的事件 24 /* 25 * onmousewheel鼠标滚轮滚动的事件，会在滚轮滚动时触发， 26 * 但是火狐不支持该属性 27 * 28 * 在火狐中需要使用 DOMMouseScroll 来绑定滚动事件 29 * 注意该事件需要通过addEventListener()函数来绑定 30 */ 31 32 // onmousewheel已经过时了，用onwheel 33 box1.onmousewheel = function(event){ 34 35 event = event || window.event; 36 37 38 //event.wheelDelta 可以获取鼠标滚轮滚动的方向 39 //向上滚 120 向下滚 -120 40 //wheelDelta这个值我们不看大小，只看正负 41 42 // alert(event.wheelDelta); 43 44 //wheelDelta这个属性火狐中不支持 45 //在火狐中使用event.detail来获取滚动的方向 46 //向上滚 -3 向下滚 3 47 //alert(event.detail); 48 49 50 /* 51 * 当鼠标滚轮向下滚动时，box1变长 52 * 当滚轮向上滚动时，box1变短 53 */ 54 //判断鼠标滚轮滚动的方向 55 if(event.wheelDelta > 0 || event.detail < 0){ 56 //向上滚，box1变短 57 box1.style.height = box1.clientHeight - 10 + "px"; 58 59 }else{ 60 //向下滚，box1变长 61 box1.style.height = box1.clientHeight + 10 + "px"; 62 } 63 64 /* 65 * 使用addEventListener()方法绑定响应函数，取消默认行为时不能使用return false 66 * 需要使用event来取消默认行为event.preventDefault(); 67 * 但是IE8不支持event.preventDefault();这个玩意，如果直接调用会报错 68 */ 69 event.preventDefault && event.preventDefault(); 70 71 72 /* 73 * 当滚轮滚动时，如果浏览器有滚动条，滚动条会随之滚动， 74 * 这是浏览器的默认行为，如果不希望发生，则可以取消默认行为 75 */ 76 return false; 77 78 79 80 81 }; 82 83 //为火狐绑定滚轮事件 84 bind(box1,"DOMMouseScroll",box1.onmousewheel); 85 86 87 }; 88 89 90 function bind(obj , eventStr , callback){ 91 if(obj.addEventListener){ 92 //大部分浏览器兼容的方式 93 obj.addEventListener(eventStr , callback , false); 94 }else{ 95 /* 96 * this是谁由调用方式决定 97 * callback.call(obj) 98 */ 99 //IE8及以下 100 obj.attachEvent("on"+eventStr , function(){ 101 //在匿名函数中调用回调函数 102 callback.call(obj); 103 }); 104 } 105 } 106 107 </script> 108 </head> 109 <body style="height: 2000px;"> 110 111 <div id="box1"></div> 112 113 </body> 114 </html>
键盘事件
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <script type="text/javascript"> 7 8 window.onload = function(){ 9 10 /* 11 * 键盘事件： 12 * onkeydown 13 * - 按键被按下 14 * - 对于onkeydown来说如果一直按着某个按键不松手，则事件会一直触发 15 * - 当onkeydown连续触发时，第一次和第二次之间会间隔稍微长一点，其他的会非常的快 16 * 这种设计是为了防止误操作的发生。 17 * onkeyup 18 * - 按键被松开 19 * 20 * 键盘事件一般都会绑定给一些可以获取到焦点的对象或者是document 21 */ 22 23 document.onkeydown = function(event){ 24 event = event || window.event; 25 26 /* 27 * 可以通过keyCode来获取按键的编码 28 * 通过它可以判断哪个按键被按下 29 * 除了keyCode，事件对象中还提供了几个属性 30 * altKey 31 * ctrlKey 32 * shiftKey 33 * - 这个三个用来判断alt ctrl 和 shift是否被按下 34 * 如果按下则返回true，否则返回false 35 */ 36 37 //console.log(event.keyCode); 38 39 //判断一个y是否被按下 40 //判断y和ctrl是否同时被按下 41 if(event.keyCode === 89 && event.ctrlKey){ 42 console.log("ctrl和y都被按下了"); 43 } 44 45 46 }; 47 48 /*document.onkeyup = function(){ 49 console.log("按键松开了"); 50 };*/ 51 52 //获取input 53 var input = document.getElementsByTagName("input")[0]; 54 55 input.onkeydown = function(event){ 56 57 event = event || window.event; 58 59 //console.log(event.keyCode); 60 //数字 48 - 57 61 //使文本框中不能输入数字 62 if(event.keyCode >= 48 && event.keyCode <= 57){ 63 //在文本框中输入内容，属于onkeydown的默认行为 64 //如果在onkeydown中取消了默认行为，则输入的内容，不会出现在文本框中 65 return false; 66 } 67 68 69 }; 70 }; 71 72 73 </script> 74 </head> 75 <body> 76 77 <input type="text" /> 78 79 </body> 80 </html>
使div可以根据不同的方向键向不同的方向移动
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style type="text/css"> 7 #box1{ 8 width: 100px; 9 height: 100px; 10 background-color: red; 11 position: absolute; 12 } 13 14 15 </style> 16 17 <script type="text/javascript"> 18 19 //使div可以根据不同的方向键向不同的方向移动 20 /* 21 * 按左键，div向左移 22 * 按右键，div向右移 23 * 。。。 24 */ 25 window.onload = function(){ 26 27 //为document绑定一个按键按下的事件 28 document.onkeydown = function(event){ 29 event = event || window.event; 30 31 //定义一个变量，来表示移动的速度 32 var speed = 10; 33 34 //当用户按了ctrl以后，速度加快 35 if(event.ctrlKey){ 36 speed = 500; 37 } 38 39 /* 40 * 37 左 41 * 38 上 42 * 39 右 43 * 40 下 44 */ 45 switch(event.keyCode){ 46 case 37: 47 //alert("向左"); left值减小 48 box1.style.left = box1.offsetLeft - speed + "px"; 49 break; 50 case 39: 51 //alert("向右"); 52 box1.style.left = box1.offsetLeft + speed + "px"; 53 break; 54 case 38: 55 //alert("向上"); 56 box1.style.top = box1.offsetTop - speed + "px"; 57 break; 58 case 40: 59 //alert("向下"); 60 box1.style.top = box1.offsetTop + speed + "px"; 61 break; 62 } 63 64 }; 65 66 }; 67 68 69 </script> 70 </head> 71 <body> 72 <div id="box1"></div> 73 </body> 74 </html>
