P111. 事件对象

概念：

当事件的响应函数触发时，浏览器都会将一个事件对象作为实参传入响应函数，该事件对象封装了当前事件相关的一切信息，如：鼠标的坐标，键盘的哪个键被按下….
可参考网页：https://www.w3school.com.cn/jsref/dom_obj_event.asp

注意：事件对象在IE8及以下版本的浏览器时作为window的属性，即作为全局变量存在的，而不是传参 但是有些浏览器又不作为全局变量传参，这时候我们需要做一个简单的判断：

  1. btn.onclick = function(){
  2.         //我们用一个简单的或运算，如果event存在就接着保持，为false就为window.event
  3.     event = event || window.event;
  4.     var x = parseInt(event.clientX);
  5.     var y = parseInt(event.clientY);
  6. };

知识拓展，更多向前参考上方网页

onmousemove

  • 此事件会在鼠标移动时除法

    clientX 和 clientY

  • 获取当前鼠标在页面可见窗口的水平坐标和垂直坐标

    pageX 和 pageY

  • 获取当前鼠标的当前页面的水平坐标和垂直坐标，这两个属性不兼容IE8及以下的浏览器

P113. 事件的冒泡

所谓事件的冒泡，就是指事件的向上传导，当后代上的事件被触发时，其父元素、祖先元素上的相同事件也会被触发。
如：我们在body内写了一个div，div内再写一个div，其中写了一个span标签，此时我们为这三个元素节点都添加onclick事件。那么当span标签onclick内的单击响应函数被触发时，其父元素的两个div单击响应函数也会被触发，甚至如果html设置了单击响应函数，还会被触发html设置了单击响应函数，还会被触发。

  1. ... 
  2.         <script type="text/javascript">
  3.           window.onload = function(){
  4.               var span = document.querySelector("#s1");
  5.               var d1 = document.querySelector("#d1");
  6.               var d2 = document.querySelector("#d2");
  7.               s1.onclick = function(){
  8.                   alert("one");
  9.               }
  10.               d1.onclick = function(){
  11.                   alert("three");
  12.               }
  13.               d2.onclick = function(){
  14.                   alert("two");
  15.               }
  16.           };    //按上方字母顺序触发，one->two->three。
  17.     </script>
  18. ...
  19. <body>
  20.     <div style="background-color: antiquewhite;" id="d1">
  21.         <div style="background-color: aqua;" id="d2">
  22.             <span style="background-color: azure;" id="s1">abc</span>
  23.         <!-- 此时，如果我们点击这个span标签，其本身会最先触发单击响应函数，其次d2，最后d1 -->
  24.         </div>
  25.     </div>
  26. </body>

在开发中，事件的冒泡在大部分情况下都是有益的，但是如果不希望发生事件的冒泡可以通过事件对象来取消冒泡。

cancelBubble

我们可以将这个属性设置为true，那么就取消了事件的冒泡属性。
使用方法如： 

  1. ...
  2.     var a = document.querySelector("#a");
  3.         a.onmousemove = function(event){
  4.         event = event || window.event;
  5.         event.cancelBubble = true;        //此时a标签的父元素不会收到这个函数的影响
  6.     }
  7. ...

P114. 事件的委派

引入 —— 单击按钮添加超链接

  1. ...
  2.         <script type="text/javascript">
  3.         window.onload = function(){
  4.             var allA = document.getElementsByTagName("a");
  5.             var btn = document.querySelector("#btn");
  6.             var ul = document.querySelector("#u1");
  7.             //添加超链接
  8.             btn.onclick = function(){
  9.                 var li = document.createElement("li");
  10.                 li.innerHTML = "<a href='javascript:;'>新建超链接</a>";
  11.                 ul.appendChild(li);
  12.             };
  14.             //为每一个超链接添加单机响应函数
  15.             for (var i = 0; i<allA.length; i++){
  16.                 allA[i].onclick = function(){        //每次都需要迭代，过于低效
  17.                     alert("这是a的单击响应函数！！");
  18.                 };
  19.             }
  20.         };
  21.     </script>
  22. ...
  23.     <body>
  24.         <button id="btn">添加超链接</button>
  25.         <ul id="u1">
  26.             <li><a href="javascript:;">超链接1</a></li>
  27.             <li><a href="javascript:;">超链接2</a></li>
  28.             <li><a href="javascript:;">超链接3</a></li>
  29.         </ul>
  30.     </body>
  31. ...

缺陷：上面的代码还有个问题，添加新的超链接无法自动添加单击响应函数，因为我们是使用的循环的方式添加的单击响应函数，而循环在js代码执行完之后就不会再调用了。由此，我们不推荐使用循环的方法定义响应函数。

改进

我们希望只绑定一次事件，就可以应用到多个元素上，即使元素是后添加的，这种方法简单高效。

我们可以使用上节课学到的事件冒泡，给ul添加单击响应函数，ul是li的父元素，li是ul的后代，所以li可以享受到ul的函数 ，并且我们只绑定了一次，之后新增加超链接也会有这个函数。

  1. //将for循环部分改为：
  2. ul.onclick = function(){
  3.             alert("这是ul的超链接");
  4. }

委派的概念

  • 指将事件统一绑定给元素共同的祖先元素，这样当后代元素上的事件被触发时，会一直冒泡到到祖先元素，从而通过祖先元素的响应函数来处理事件
  • 事件委派是利用了冒泡，通过委派可以减少事件绑定的次数，提高程序的性能。

  • 这是一种比较高效的使用方式，推荐可以多使用这种方法 。

    缺陷：

    虽然这样可以使ul内的li元素都可以享受到响应函数，但是我们会发现，除了li标签之外的部分，也会收到响应函数的影响。

    解决方式：

  • 这时候我们可以给我们的函数添加event形参(参考前几节课笔记)，其中event有一个target属性

  • target — 返回触发事件的元素（事件的目标节点） -> 你点谁target返回的对象就是谁

  • 我们可以给我们的li标签添加一个class标签，如：

    1. ...
    2.   <ul id="u1">
    3.     <li><a href="javascript:;" class="items">超链接1</a></li>
    4.     <li><a href="javascript:;" class="items">超链接2</a></li>
    5.     <li><a href="javascript:;" class="items">超链接3</a></li>
    6.   </ul>
    7. ...

  • 当我们target对象的class标签等于items的时候，才触发我们想要的效果

  • 我们可以把刚刚的ul单击响应函数修改为：
    1.   //之后修改的超链接都绑定items这个类即可
    2.   li.innerHTML = "<a href='javascript:;' class='items'>新建超链接</a>";    
    3. ...
    4.   ul.onclick = function(event){
    5.       event = event || window.event;
    6.       if (event.target.className == "items"){        //如果你是a标签就执行，不然就不执行
    7.           alert("我是a的单击响应函数");
    8.       }
    9.   }
    10. ...

    但是还剩一个隐患，class标签我们可以写多个，当我们<…class=”itms hello”>指定两个类的时候这种方法就不好使了，那我们可以怎么解决呢？可以先自己想一想…

P115. 事件的绑定

假设我们有一个需求，为一个对象绑定多个单击响应函数。

  1. window.onload = function(){
  2.             //实现点击按钮弹出一个内容
  3.             var btn = document.querySelector("#btn");
  4.                         //为btn绑定第一个单击响应函数
  5.             btn.onclick = function(){
  6.                 alert("one");
  7.             };
  8.             //为btn绑定第二个单击响应函数，实际只有这个函数起效果。
  9.             btn.onclick = function(){
  10.                 alert("two");
  11.             };
  12. };

我们会发现使用对象.事件 = 函数的方式好像不行，它只能为一个元素的一个事件绑定一个响应函数，不能绑定多个，如果绑定多个，后面的函数会覆盖前面的函数。

但是有些时候我们就是需要多个响应函数，我们可以使用下面的方法

addEventListener()

  • 通过这个方法也可以为元素绑定响应函数，并且支持绑定多个相同事件的响应函数。
  • 参数
      1. 事件的字符串，如:onclick… 但是注意，在这里不要写on。
      1. 回调函数，当事件触发时，该函数会被调用。
      1. 是否在捕获阶段触发事件，需要一个布尔值，一般传false。这点后面细讲…

  • 使用方法如下：

    1.       //为btn绑定第二、第三个单击响应函数
    2.   btn.addEventListener("click",function(){
    3.       alert("two");
    4.   },false);
    5.   btn.addEventListener("click",function(){
    6.       alert("three");
    7.   },false);

  • 使用addEventListener()可以同时为一个元素的相同事件绑定多个函数，当事件被触发时，函数会按照声明顺序依次执行

  • 注意：这个方法在IE8及以下版本的浏览器不兼容！

attachEvent()

  • 此方法在IE8中也可以使用，作用和addEventListener()相同。
  • 参数
      1. 事件的字符串，要on
      1. 回调函数

  • 使用方法如下：

    1.   btn.attachEvent("onclick",function(){
    2.               alert("one");
    3.   });
    4.   btn.attachEvent("onclick",function(){
    5.               alert("two");
    6.   });

  • 这个方法和上面的不同的是，这个方法是从下往上执行，所以这里会先输出two再输出one。

  • 注意：这个方法在其他浏览器无效！

兼容问题

由于上方的两个事件不互相兼容，那我们可以定义一个函数解决这个问题。

需要解决的问题：

  • addEventListener()中的this，是绑定事件的对象。
  • attachEvent()中的this，是window。
  • 需要统一两个方法的this。
  • 解决不管在IE8还是其他浏览器都可以添加多个相同事件的响应函数。

参数：

    1. obj - 要绑定事件的对象
    1. eventStr - 事件的字符串
    1. callback - 回调函数

      P116. 解决兼容问题

      我们只需要让把按钮对象传入函数中，查看这个按钮对象是否有addEventListener方法即可。

  1. ...
  2.   window.onload = function(){
  3.         var btn = document.querySelector("#btn");
  5.         function bind(obj,eventStr,callback){    
  6.             if (obj.addEventListener) {        //进行判断
  7.               obj.addEventListener(eventStr,callback,false);
  8.             }
  9.             else {
  10.               obj.attachEvent("on" + eventStr,callback);
  11.             }
  12.         }
  14.         bind(btn,"click",function(){    //将按钮对象作为第一个参数，事件作为第二个参数
  15.           alert("a");
  16.         });
  17.         bind(btn,"click",function(){
  18.           alert("b");
  19.         });
  21.   };
  22. ...

但是还遗留下了一个问题，那就是这样并没有统一它们的this参数。在火狐、谷歌等主流浏览器中与this是button，而IE8是window。

那我们怎么解决这个问题呢？
这就需要用到前面的学到的call方法(P79. 函数的方法)，这个方法可以改变我们函数的this。

  1. ...
  2.   function bind(obj,eventStr,callback){
  3.       if (obj.addEventListener) {
  4.           obj.addEventListener(eventStr,callback,false);
  5.       }  //上面的部分不变
  6.       else {
  7.           obj.attachEvent("on" + eventStr,function(){
  8.               callback.call(obj);        // 这里不再直接调用回调函数
  9.           });                                                // 而是在回调函数中利用call方法改变this为obj对象
  10.       }
  11.   }
  12.   bind(btn,"click",function(){    //此时如果输出this，我们会发现在任何浏览器都是输出button对象
  13.       alert(this);
  14.   });
  15. ...

P117. 事件的传播

制作一个简单的网页。

  1. // Css部分
  2. ...
  3. <style type="text/css">
  4.   #box1{
  5.     width: 300px;
  6.     height: 300px;
  7.     background-color: aqua;
  8.   }
  9.   #box2{
  10.     width: 200px;
  11.     height: 200px;
  12.     background-color: azure;
  13.   }
  14.   #box3{
  15.     width: 100px;
  16.     height: 100px;
  17.     background-color: bisque;
  18.   }
  19. </style>
  21. // Js部分
  22. <script type="text/javascript">
  23.     window.onload = function(){
  24.       var box1 = document.querySelector("#box1");
  25.       var box2 = document.querySelector("#box2");
  26.       var box3 = document.querySelector("#box3");
  28.       box1.onclick = function(event){
  29.         alert("box1");
  30.       }
  31.       box2.onclick = function(event){
  32.         alert("box2");
  33.       }
  34.       box3.onclick = function(){
  35.         alert("box3");
  36.       }
  37.   };
  38. </script>
  40. <!-- HTML部分 -->
  41. ...
  42. <body>
  43.     <div id="box1">
  44.         <div id="box2">
  45.             <div id="box3"></div>
  46.         </div>
  47.     </div>
  48. </body>
  49. ...

制作完成的网页呈现这样的效果。当我们点击其中的div会发现，函数会由内向外触发，也就是冒泡的概念，但是同时也涉及到了事件的传播。

image.png

事件的传播

关于事件的传播网景公司和微软公司有不同的概念 ->

  • 微软公司认为事件的传播是由内向外传播。当事件触发时，应该先触发当前元素事件，再依次向祖先元素冒泡。
  • 网景公司则认为事件的传播是由外向内传播。当事件触发时，应该先触发最外层祖先元素事件，再依次传播到当前元素事件。

W3C综合两家公司观念，将事件的传播分为3个阶段：
1. 捕获阶段：

  • 在捕获阶段获取页面最外层祖先元素的事件，依次向当前元素传到，但只捕获，不触发事件。

2. 目标阶段：

  • 事件捕获到当前目标元素，开始执行当前目标元素事件。

3. 冒泡阶段：

  • 事件向其祖先元素传递，依次触发祖先元素事件。

但是如果我们需要在事件的捕获阶段就触发函数，也就是由外向内执行函数，我们将accEventListener()的第三个参数改为true即可实现！

将刚刚的单击响应函数改为：

  1. box1.addEventListener("click",function(){
  2.   alert("box1");
  3. },true);
  4. box2.addEventListener("click",function(){
  5.   alert("box2");
  6. },true);
  7. box3.addEventListener("click",function(){
  8.   alert("box3");
  9. },true);    //这里的false改为true

但是我们一般不这么使用，我们大致了解即可。

P118. 拖拽练习一

P118 — P120三节课将制作一个拖拽页面元素的练习，下面是要求。

要求：

  • 拖拽box1元素：
  • 流程：
      1. 当鼠标拖拽时鼠标按下 -> onmousedown事件
      1. 当鼠标移动时box跟随鼠标移动 -> onmousemove事件
      1. 当鼠标松开时放下元素 -> onmouseup事件

        初步版

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <style type="text/css">
  9.         #box1{
  10.             width: 100px;
  11.             height: 100px;
  12.             background-color: aqua;
  13.             position:absolute;
  14.         }
  15.     </style>
  17.     <script type="text/javascript">
  18.         window.onload = function(){
  19.             var box1 = document.querySelector("#box1");
  20.             var html = document.documentElement;
  21.             box1.onmousedown = function(event){
  22.                   //ol和ot是鼠标指针距离box1边缘的位置
  23.                 var ol = event.clientX - box1.offsetLeft; 
  24.                 var ot = event.clientY - box1.offsetTop;
  26.                 document.onmousemove = function(event){
  27.                     event = event || window.event;
  28.                       //这里的鼠标指针需要减去距离边缘的距离，防止鼠标指针始终在左上角。
  29.                     var left = event.clientX - ol; 
  30.                     var top = event.clientY - ot;
  31.                     box1.style.left = left + "px";
  32.                     box1.style.top = top + "px";
  33.                 }
  34.               //这是松开鼠标的事件，为了避免页面其他元素干扰，所以我们设置成docuemnt对象的事件
  35.                 document.onmouseup = function(){         
  36.                     document.onmousemove = null; //松开鼠标后停止移动，固将移动事件设为null
  37.                     document.onmouseup = null;  //同时自身也要停止事件
  38.                 }
  39.             }
  41.         };
  42.     </script>
  43. </head>
  44. <body>
  45.     <div id="box1"></div>
  46. </body>
  47. </html>

上面的代码已经解决了大部分需求，可以还是有一些小问题：
由于浏览器有个默认的事件，就是你选中元素拖拽可以快捷拖到搜索引擎进行搜索，可以我们会发现，当前代码下，一旦用户不小心选中到其他元素一起拖拽时，会影响我们的现有的拖拽方法。
下一节课将解决这个问题，同时会更加完善我们的代码。

P120. 拖拽练习二

要解决上面遗留下来的问题，首先的引入两个知识点。

在常规浏览器下解决问题：
还记得我们前面是怎么解决浏览器的默认事件的吗？如取消超链接默认事件。没错，我们是对函数返回fasle取消默认事件，所以在这里也是同样的道理，我们只需要在box1的onmousedown事件的最后，返回false即可。

在IE8以下版本的浏览器解决问题：

这就需要两个方法来进行操作：

  • setCapture()

当调用此方法后，这个方法会把下一次所有的鼠标按下相关事件捕获到调用此方法的元素上。
注意：这个方法非常霸道，如：页面设置多个单击响应函数，我们将此事件绑定到btn1这个按钮上，那么不 管btn2还是点击页面中其他元素，都会触发btn1中的单击响应函数。甚至当我们点击桌面时，都会触发btn1的单击响应函数！

  • 语法：元素节点.setCapture();
  • releaseCapture()

当调用此方法后，会取消元素节点对于事件的捕获。使用setCapture后可以在适当的位置取消捕获，使程序更完善。

注意：这两个方法对于IE以外的浏览器可能不管用！

现在我们就可以实现代码了：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <style type="text/css">
  9.         #box1{
  10.             width: 100px;
  11.             height: 100px;
  12.             background-color: aqua;
  13.             position:absolute;
  14.         }
  15.         #box2{
  16.             width: 100px;
  17.             height: 100px;
  18.             background-color:antiquewhite;
  19.             position:absolute;
  20.             left: 300px;
  21.             top:300px;
  23.         }
  24.     </style>
  26.     <script type="text/javascript">
  27.         window.onload = function(){
  28.             var box1 = document.querySelector("#box1");
  29.               var box2 = document.querySelector("#box2");
  30.                 //此方法我们可以封装为函数，那么我们想拖拽谁传谁就好。
  31.             function drag(obj){    
  32.                 obj.onmousedown = function(event){
  33.                       //由于一般浏览器不支持此方法，所有我们可以用&&操作符进行判断。
  34.                     obj.setCapture && obj.setCapture();
  35.                     event = event || window.event;
  36.                     var ol = event.clientX - obj.offsetLeft; 
  37.                     var ot = event.clientY - obj.offsetTop;
  39.                     document.onmousemove = function(event){
  40.                         event = event || window.event;
  41.                         var left = event.clientX - ol; 
  42.                         var top = event.clientY - ot;
  43.                         obj.style.left = left + "px";
  44.                         obj.style.top = top + "px";
  45.                     }
  46.                     document.onmouseup = function(){
  47.                         document.onmousemove = null;
  48.                         document.onmouseup = null;
  49.                           //和setCapture同理，当我们放下鼠标时，就应该停止捕获了。
  50.                         obj.releaseCapture && obj.releaseCapture();
  51.                     }
  52.                     return false;
  53.                 }
  54.             }
  55.               //调用函数
  56.             drag(box1);
  57.             drag(box2);
  58.         };
  59.     </script>
  60. </head>
  61. <body>
  62.     <div id="box1"></div>
  63.     <div id="box2"></div>
  64. </body>
  65. </html>

至此，我们拖拽练习就大致完成了，在实际应用中，我们还可以在里面加入图片或者其他标签，让程序更加灵活。当然，现在程序还有可以优化的地方，有实力的小伙伴可以继续研究一下！

P121. 鼠标滚轮事件

本节课将实现鼠标滚动向上滚时，box变短，滚轮向下滚时，box变长。

- onmousewheel

  • 鼠标滚轮滚动事件，会在鼠标滚动时触发，但是火狐不兼容此属性。

    - DOMMouseScroll

  • 在火狐中需要使用此事件来绑定滚轮事件，注意，此属性需要利用addEventListener()函数来绑定，写在括号内字符串参数的位置。

    判断鼠标滚动方向

    event.wheelDelta

  • 此属性可以获取鼠标的滚轮方向，当你向上滚动时，返回一个正数，向下滚动时，返回一个负数。

  • 返回值的大小取决于鼠标滑动幅度
  • 此属性在火狐浏览器不支持！

event.detail

  • 此属性为火狐支持的判断滚轮方向的属性
  • 向上滚动时返回负数，向下滚动时返回正数，与其他浏览器相反。

    取消鼠标滚轮的默认事件

    当滚轮滚动时，如果浏览器有滚动条，滚动条也会随之滚动，这是浏览器的默认行为，如果不希望发生，则需要取消默认行为：return fasle;即可。
    可是此处火狐不支持用false取消默认事件，因为滚动事件是由addEventListener()添加的，使用addEventListener()添加的响应函数，不能返回false取消默认事件。
    这时就需要使用event来取消默认行为，如：event.preventDefault();即可。
    但是这个方法IE8又不支持！，如果直接调用会报错，我们可以利用以前所说的&&来解决问题，如：event.preventDefault && event.preventDefault();，如果浏览器有preventDefault就直接调用，没有就不调用。

    好的，现在就可以完成我们的练习了，下方是全部代码：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <style type="text/css">
  9.         #box1{
  10.             width: 100px;
  11.             height: 100px;
  12.             background-color: red;
  13.         }
  14.     </style>
  16.     <script type="text/javascript">
  17.         window.onload = function(){
  18.             var box1 = document.querySelector("#box1");
  19.                         //滚轮事件
  20.             box1.onmousewheel = function(event){
  21.                 event = event || window.event; 
  22.                   //wheelDelta>0为普通浏览器向上滚，event.detail<0为火狐浏览器向上滚
  23.                 if (event.wheelDelta > 0 || event.detail < 0){
  24.                       //判断，往上滚最小不能小于10px
  25.                     box1.style.height = box1.clientHeight >= 60 ? box1.clientHeight - 50 + "px" : 10 + "px";
  26.                 }
  27.                 else{
  28.                       //往下滚边长
  29.                     box1.style.height = box1.clientHeight + 50 + "px";
  30.                 }
  31.                   //取消浏览器默认行为
  32.                 event.preventDefault && event.preventDefault();
  33.                 return false;
  34.             }  
  36.                         //利用前几节课学到bind函数，回调函数设置为box1的滚轮事件。
  37.             bind(box1,"DOMMouseScroll",box1.onmousewheel);
  39.             function bind(obj,str,callback){
  40.                 if (obj.addEventListener){
  41.                     obj.addEventListener(str,callback,false);
  42.                 }
  43.                 else{
  44.                     obj.attachEvent("on"+str,function(){
  45.                         callback.call(obj);
  46.                     });
  47.                 }
  48.             }
  49.         }
  50.     </script>
  51. </head>
  52. <body style="height:2000px;">
  53.     <div id="box1"></div>
  54. </body>
  55. </html>

P122. 键盘事件

键盘事件一般都不绑定给div这类标签，而是赋给那些能获取焦点的元素，如表单的text文本框…

onkeydown

  • 某个键盘按键被按下。

  • 对于onkeydown来说，如果你一直按着某个按键不松手，则事件会一直触发。

    • 当你连续按下键盘按键时，你会发现输出效果第一次和第二次的间隔会长一些，之后输入会非常快，这是为了防误触、误操作设计的。

      onkeyup

  • 某个键盘按键被松开。

    keyCode

  • 判断键盘中哪个键被按下，并返回它的ASCII码值。

  • 这是event对象的一个属性，要调用它不要给响应函数添加event。
  • 使用方法如：if (event.keyCode == 89) {执行语句...};，这句话表示按下键盘y键是执行某些语句。

但是如果我们想要判断Ctrl和y键是否同时被按下呢？请看下方例子。

  1. document.onkeyup = function(event){
  2.     if (event.keyCode == 89 && event.keyCode == 17 ){    //17为按下Ctrl是的返回值。
  3.         alert('^y被按下');
  4.     }
  5. }

这正确吗？这是一个典型的错误代码，千万不可以犯这个错误，一个值有可能即等于89，又等于17吗？

那么应该怎么做呢，其实事件对象中除了keyCode还提供了几个按键属性。

altKey、ctrlKey、shiftKey

  • 分别判断alt键、ctrl键、shift键是否被按下
  • 如果被按下返回true，反之返回false。

所以上面的代码可以改为：

  1. document.onkeyup = function(event){
  2.     if (event.keyCode == 89 && event.ctrlKey ){    //直接获取ctrl事件。
  3.       alert('^y被按下');
  4.     }
  5. }

我们可以将键盘事件配合表单文本框使用，达到一些巧妙的配合，但是有没有想过，如果文本框绑定的键盘响应函数返回一个false会是什么结果？如：

  1. ...
  2. <script type="text/javascript">
  3.     window.onload = function(){
  4.       var input = document.querySelector("input");
  5.       input.onkeydown = function(){
  6.         console.log("按下");
  7.         return false;        //这里取消输入的默认事件。
  8.       }
  9.     }
  10. </script>
  11. ...
  12. <body>
  13.     <input type="text" id="txt"/>
  14. </body>
  15. ...

这里的默认事件是什么呢，文本框默认肯定是允许你输入值的呗，如果你取消了默认事件，那么用户输入了值，但是文本框内却不会输出结果了。

如果想做一个程序，让用户不能输入数字怎么办呢？

  1. input.onkeydown = function(event){
  2.     if (event.keyCode >= 48 && event.keyCode <= 57){    //数字的区间在48到57之间。
  3.             return false;
  4.     }
  5. }

但是这个方法有个Bug，就是如果你在中文状态下输入数字，或者使用小键盘输入数字。这时因为中文状态下的键盘和小键盘返回的编码不同，如果有这个需求还需要进一步适配，这里仅做示范。

P123. 键盘移动div

有了以上的知识，我们就可以做一个小程序了，我们可以尝试一个按方向键移动box。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <style type="text/css">
  9.         #box1{
  10.             width: 100px;
  11.             height: 100px;
  12.             background-color: red;
  13.             position: absolute;
  14.         }
  15.     </style>
  16.     <script type="text/javascript">
  17.         window.onload = function(){
  18.             var speed = 20; //定义初始熟读
  19.             document.onkeydown = function(event){
  20.                 //上：38 下：40 左：37 右：39
  21.                 if (event.ctrlKey){
  22.                     speed += 20;    //按ctrl加速。
  23.                 }
  25.                 var box1 = document.querySelector("#box1");
  26.                 //判断方向并移动
  27.                 switch(event.keyCode){
  28.                     case 38:
  29.                         box1.style.top =  box1.offsetTop - speed + "px";
  30.                         break;
  31.                     case 40:
  32.                         box1.style.top = box1.offsetTop + speed + "px";
  33.                         break;
  34.                     case 37:
  35.                         box1.style.left = box1.offsetLeft - speed + "px";
  36.                         break;
  37.                     case 39:
  38.                         box1.style.left = box1.offsetLeft + speed + "px";
  39.                         break;
  40.                 }
  41.             }
  42.         }
  43.     </script>
  44. </head>
  45. <body>
  46.     <div id="box1"></div>
  47. </body>
  48. </html>

现在还是有一些缺陷，那就是第一次移动时会有停顿感，这在稍微大一些的游戏中可能是致命的，不管以现在的知识还无法解决这个问题，后面的课我们会解决这个问题。有兴趣的朋友可以自己尝试解决。