事件的绑定和事件对象Event

绑定事件的两种方式/DOM事件的级别

我们在之前的一篇文章《04-JavaScript/22-DOM简介和DOM操作》中已经讲过事件的概念。这里讲一下绑定（注册）事件的两种方式，我们以onclick事件为例。

DOM0的写法：onclick
  1.     element.onclick = function () {
  3.     }

举例：

  1. <body>
  2. <button>点我</button>
  3. <script>
  4.     var btn = document.getElementsByTagName("button")[0];
  6.     //这种事件绑定的方式，如果绑定多个，则后面的会覆盖掉前面的
  7.     btn.onclick = function () {
  8.         console.log("事件1");
  9.     }
  11.     btn.onclick = function () {
  12.         console.log("事件2");
  13.     }
  15. </script>
  16. </body>

点击按钮后，上方代码的打印结果：

  1. 事件2

我们可以看到，DOM对象.事件 = 函数的这种绑定事件的方式：一个元素的一个事件只能绑定一个响应函数。如果绑定了多个响应函数，则后者会覆盖前者。

DOM2的写法：addEventListener（高版本浏览器）
  1.     element.addEventListener('click', function () {
  3.     }, false);

参数解释：

  • 参数1：事件名的字符串(注意，没有on)
  • 参数2：回调函数：当事件触发时，该函数会被执行
  • 参数3：true表示捕获阶段触发，false表示冒泡阶段触发（默认）。如果不写，则默认为false。【重要】

举例：

  1. <body>
  2. <button>按钮</button>
  3. <script>
  4.     var btn = document.getElementsByTagName("button")[0];
  6.     // addEventListener: 事件监听器。 原事件被执行的时候，后面绑定的事件照样被执行
  7.     // 这种写法不存在响应函数被覆盖的情况。（更适合团队开发）
  8.     btn.addEventListener("click", fn1);
  9.     btn.addEventListener("click", fn2);
  11.     function fn1() {
  12.         console.log("事件1");
  13.     }
  15.     function fn2() {
  16.         console.log("事件2");
  17.     }
  19. </script>
  20. </body>

点击按钮后，上方代码的打印结果：

  1.     事件1
  2.     事件2

我们可以看到，addEventListener()这种绑定事件的方式：

  • 一个元素的一个事件，可以绑定多个响应函数。不存在响应函数被覆盖的情况。执行顺序是：事件被触发时，响应函数会按照函数的绑定顺序执行。
  • addEventListener()中的this，是绑定事件的对象。
  • addEventListener()不支持 IE8 及以下的浏览器。在IE8中可以使用attachEvent来绑定事件（详见下一小段）。

DOM2的写法：attachEvent（IE8及以下版本浏览器）
  1.     element.attachEvent('onclick', function () {
  3.     });

参数解释：

  • 参数1：事件名的字符串(注意，有on)
  • 参数2：回调函数：当事件触发时，该函数会被执行

举例：

  1.     <body>
  2.         <button>按钮</button>
  3.         <script>
  4.             var btn = document.getElementsByTagName('button')[0];
  6.             btn.attachEvent('onclick', function() {
  7.                 console.log('事件1');
  8.             });
  10.             btn.attachEvent('onclick', function() {
  11.                 console.log('事件2');
  12.             });
  13.         </script>
  14.     </body>

在低版本的IE浏览器上，点击按钮后，上方代码的打印结果：

  1.     事件2
  2.     事件1

我们可以看到，attachEvent()这种绑定事件的方式：

  • 一个元素的一个事件，可以绑定多个响应函数。不存在响应函数被覆盖的情况。注意：执行顺序是，后绑定的先执行。
  • attachEvent()中的this，是window

兼容性写法

上面的内容里，需要强调的是：

  • addEventListener()中的this，是绑定事件的对象。
  • attachEvent()中的this，是window。

既然这两个写法的this不同，那么，有没有一种兼容性的写法可以确保这两种绑定方式的this是相同的呢？我们可以封装一下。代码如下：

  1.     <body>
  2.         <button>按钮</button>
  3.         <script>
  4.             var btn = document.getElementsByTagName('button')[0];
  6.             myBind(btn , "click" , function(){
  7.                 alert(this);
  8.             });
  12.             //定义一个函数，用来为指定元素绑定响应函数
  13.             /*
  14.              * addEventListener()中的this，是绑定事件的对象
  15.              * attachEvent()中的this，是window
  16.              *  需要统一两个方法this
  17.              */
  18.             /*
  19.              * 参数：
  20.              *  element 要绑定事件的对象
  21.              *  eventStr 事件的字符串(不要on)
  22.              *  callback 回调函数
  23.              */
  24.             function myBind(element , eventStr , callback){
  25.                 if(element.addEventListener){
  26.                     //大部分浏览器兼容的方式
  27.                     element.addEventListener(eventStr , callback , false);
  28.                 }else{
  29.                     /*
  30.                      * this是谁，由调用方式决定
  31.                      * callback.call(element)
  32.                      */
  33.                     //IE8及以下
  34.                     element.attachEvent("on"+eventStr , function(){
  35.                         //在匿名函数 function 中调用回调函数callback
  36.                         callback.call(element);
  37.                     });
  38.                 }
  39.             }
  41.         </script>
  42.     </body>

事件对象

当事件的响应函数被触发时，会产生一个事件对象event。浏览器每次都会将这个事件event作为实参传进之前的响应函数。

这个对象中包含了与当前事件相关的一切信息。比如鼠标的坐标、键盘的哪个按键被按下、鼠标滚轮滚动的方向等。

获取 event 对象（兼容性问题）

所有浏览器都支持event对象，但支持的方式不同。如下。

（1）普通浏览器的写法是 event。比如：

image.png

（2）ie 678 的写法是 window.event。此时，事件对象 event 是作为window对象的属性保存的。

于是，我们可以采取一种兼容性的写法。如下：

  1.     event = event || window.event; // 兼容性写法

代码举例：

  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6. </head>
  7. <body>
  8. <script>
  9.     //点击页面的任何部分
  10.     document.onclick = function (event) {
  11.         event = event || window.event; ////兼容性写法
  13.         console.log(event);
  14.         console.log(event.timeStamp);
  15.         console.log(event.bubbles);
  16.         console.log(event.button);
  17.         console.log(event.pageX);
  18.         console.log(event.pageY);
  19.         console.log(event.screenX);
  20.         console.log(event.screenY);
  21.         console.log(event.target);
  22.         console.log(event.type);
  23.         console.log(event.clientX);
  24.         console.log(event.clientY);
  25.     }
  26. </script>
  27. </body>
  28. </html>

event 属性

event 有很多属性，比如：

image.png

由于pageX 和 pageY的兼容性不好，我们可以这样做：

  • 鼠标在页面的位置 = 滚动条滚动的距离 + 可视区域的坐标。

Event举例

举例1：使 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.         /*
  12.         * 开启box1的绝对定位
  13.         */
  14.         position: absolute;
  15.       }
  16.     </style>
  18.     <script type="text/javascript">
  19.       window.onload = function() {
  20.         /*
  21.          * 使div可以跟随鼠标移动
  22.          */
  24.         //获取box1
  25.         var box1 = document.getElementById("box1");
  27.         //给整个页面绑定：鼠标移动事件
  28.         document.onmousemove = function(event) {
  29.           //兼容的方式获取event对象
  30.           event = event || window.event;
  32.           // 鼠标在页面的位置 = 滚动条滚动的距离 + 可视区域的坐标。
  33.           var pagex = event.pageX || scroll().left + event.clientX;
  34.           var pagey = event.pageY || scroll().top + event.clientY;
  36.           //   设置div的偏移量（相对于整个页面）
  37.           // 注意，如果想通过 style.left 来设置属性，一定要给 box1开启绝对定位。
  38.           box1.style.left = pagex + "px";
  39.           box1.style.top = pagey + "px";
  40.         };
  41.       };
  43.       // scroll 函数封装
  44.       function scroll() {
  45.         return {
  46.           //此函数的返回值是对象
  47.           left: window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop,
  48.           right:
  49.             window.pageXOffset || document.body.scrollLeft || document.documentElement.scrollLeft
  50.         };
  51.       }
  52.     </script>
  53.   </head>
  54.   <body style="height: 1000px;width: 2000px;">
  55.     <div id="box1"></div>
  56.   </body>
  57. </html>

举例2：获取鼠标距离所在盒子的距离

关键点：

  1.     鼠标距离所在盒子的距离 = 鼠标在整个页面的位置 - 所在盒子在整个页面的位置

代码演示：

  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <style>
  7.         .box {
  8.             width: 300px;
  9.             height: 200px;
  10.             padding-top: 100px;
  11.             background-color: pink;
  12.             margin: 100px;
  13.             text-align: center;
  14.             font: 18px/30px "simsun";
  15.             cursor: pointer;
  16.         }
  17.     </style>
  18. </head>
  19. <body>
  20. <div class="box">
  22. </div>
  24. <script src="animate.js"></script>
  25. <script>
  26.     //需求：鼠标进入盒子之后只要移动，哪怕1像素，随时显示鼠标在盒子中的坐标。
  27.     //技术点：新事件，onmousemove：在事件源上，哪怕鼠标移动1像素也会触动这个事件。
  28.     //一定程度上，模拟了定时器
  29.     //步骤：
  30.     //1.老三步和新五步
  31.     //2.获取鼠标在整个页面的位置
  32.     //3.获取盒子在整个页面的位置
  33.     //4.用鼠标的位置减去盒子的位置赋值给盒子的内容。
  35.     //1.老三步和新五步
  36.     var div = document.getElementsByTagName("div")[0];
  38.     div.onmousemove = function (event) {
  40.         event = event || window.event;
  41.         //2.获取鼠标在整个页面的位置
  42.         var pagex = event.pageX || scroll().left + event.clientX;
  43.         var pagey = event.pageY || scroll().top + event.clientY;
  44.         //3.获取盒子在整个页面的位置
  45.         // var xx =
  46.         // var yy =
  47.         //4.用鼠标的位置减去盒子的位置赋值给盒子的内容。
  48.         var targetx = pagex - div.offsetLeft;
  49.         var targety = pagey - div.offsetTop;
  50.         this.innerHTML = "鼠标在盒子中的X坐标为：" + targetx + "px;<br>鼠标在盒子中的Y坐标为：" + targety + "px;"
  51.     }
  53. </script>
  54. </body>
  55. </html>

实现效果：

（六）JavaScript 事件 - 图3

举例3：商品放大镜

代码实现：

（1）index.html:

  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <style>
  7.         * {
  8.             margin: 0;
  9.             padding: 0;
  10.         }
  12.         .box {
  13.             width: 350px;
  14.             height: 350px;
  15.             margin: 100px;
  16.             border: 1px solid #ccc;
  17.             position: relative;
  18.         }
  20.         .big {
  21.             width: 400px;
  22.             height: 400px;
  23.             position: absolute;
  24.             top: 0;
  25.             left: 360px;
  26.             border: 1px solid #ccc;
  27.             overflow: hidden;
  28.             display: none;
  29.         }
  31.         /*mask的中文是：遮罩*/
  32.         .mask {
  33.             width: 175px;
  34.             height: 175px;
  35.             background: rgba(255, 255, 0, 0.4);
  36.             position: absolute;
  37.             top: 0;
  38.             left: 0;
  39.             cursor: move;
  40.             display: none;
  41.         }
  43.         .small {
  44.             position: relative;
  45.         }
  47.         img {
  48.             vertical-align: top;
  49.         }
  50.     </style>
  52.     <script src="tools.js"></script>
  53.     <script>
  54.         window.onload = function () {
  55.             //需求：鼠标放到小盒子上，让大盒子里面的图片和我们同步等比例移动。
  56.             //技术点：onmouseenter==onmouseover 第一个不冒泡
  57.             //技术点：onmouseleave==onmouseout  第一个不冒泡
  58.             //步骤：
  59.             //1.鼠标放上去显示盒子，移开隐藏盒子。
  60.             //2.老三步和新五步（黄盒子跟随移动）
  61.             //3.右侧的大图片，等比例移动。
  63.             //0.获取相关元素
  64.             var box = document.getElementsByClassName("box")[0];
  65.             var small = box.firstElementChild || box.firstChild;
  66.             var big = box.children[1];
  67.             var mask = small.children[1];
  68.             var bigImg = big.children[0];
  70.             //1.鼠标放上去显示盒子，移开隐藏盒子。(为小盒子绑定事件)
  71.             small.onmouseenter = function () {
  72.                 //封装好方法调用：显示元素
  73.                 show(mask);
  74.                 show(big);
  75.             }
  76.             small.onmouseleave = function () {
  77.                 //封装好方法调用：隐藏元素
  78.                 hide(mask);
  79.                 hide(big);
  80.             }
  82.             //2.老三步和新五步（黄盒子跟随移动）
  83.             //绑定的事件是onmousemove，而事件源是small(只要在小盒子上移动1像素，黄盒子也要跟随)
  84.             small.onmousemove = function (event) {
  85.                 //新五步
  86.                 event = event || window.event;
  88.                 //想要移动黄盒子，必须要知道鼠标在small小图中的位置。
  89.                 var pagex = event.pageX || scroll().left + event.clientX;
  90.                 var pagey = event.pageY || scroll().top + event.clientY;
  92.                 //x：mask的left值，y：mask的top值。
  93.                 var x = pagex - box.offsetLeft - mask.offsetWidth / 2; //除以2，可以保证鼠标mask的中间
  94.                 var y = pagey - box.offsetTop - mask.offsetHeight / 2;
  96.                 //限制换盒子的范围
  97.                 //left取值为大于0，小盒子的宽-mask的宽。
  98.                 if (x < 0) {
  99.                     x = 0;
  100.                 }
  101.                 if (x > small.offsetWidth - mask.offsetWidth) {
  102.                     x = small.offsetWidth - mask.offsetWidth;
  103.                 }
  104.                 //top同理。
  105.                 if (y < 0) {
  106.                     y = 0;
  107.                 }
  108.                 if (y > small.offsetHeight - mask.offsetHeight) {
  109.                     y = small.offsetHeight - mask.offsetHeight;
  110.                 }
  112.                 //移动黄盒子
  113.                 console.log(small.offsetHeight);
  114.                 mask.style.left = x + "px";
  115.                 mask.style.top = y + "px";
  117.                 //3.右侧的大图片，等比例移动。
  118.                 //如何移动大图片？等比例移动。
  119.                 //    大图片/大盒子 = 小图片/mask盒子
  120.                 //    大图片走的距离/mask走的距离 = （大图片-大盒子）/（小图片-黄盒子）
  121. //                var bili = (bigImg.offsetWidth-big.offsetWidth)/(small.offsetWidth-mask.offsetWidth);
  123.                 //大图片走的距离/mask盒子都的距离 = 大图片/小图片
  124.                 var bili = bigImg.offsetWidth / small.offsetWidth;
  126.                 var xx = bili * x;  //知道比例，就可以移动大图片了
  127.                 var yy = bili * y;
  129.                 bigImg.style.marginTop = -yy + "px";
  130.                 bigImg.style.marginLeft = -xx + "px";
  131.             }
  132.         }
  133.     </script>
  134. </head>
  135. <body>
  136. <div class="box">
  137.     <div class="small">
  138.         <img src="images/001.jpg" alt=""/>
  139.         <div class="mask"></div>
  140.     </div>
  141.     <div class="big">
  142.         <img src="images/0001.jpg" alt=""/>
  143.     </div>
  144. </div>
  145. </body>
  146. </html>

（2）tools.js:

  1. /**
  2.  * Created by smyhvae on 2018/02/03.
  3.  */
  5. //显示和隐藏
  6. function show(ele) {
  7.     ele.style.display = "block";
  8. }
  10. function hide(ele) {
  11.     ele.style.display = "none";
  12. }
  14. function scroll() {  // 开始封装自己的scrollTop
  15.     if (window.pageYOffset != null) {  // ie9+ 高版本浏览器
  16.         // 因为 window.pageYOffset 默认的是  0  所以这里需要判断
  17.         return {
  18.             left: window.pageXOffset,
  19.             top: window.pageYOffset
  20.         }
  21.     }
  22.     else if (document.compatMode === "CSS1Compat") {    // 标准浏览器   来判断有没有声明DTD
  23.         return {
  24.             left: document.documentElement.scrollLeft,
  25.             top: document.documentElement.scrollTop
  26.         }
  27.     }
  28.     return {   // 未声明 DTD
  29.         left: document.body.scrollLeft,
  30.         top: document.body.scrollTop
  31.     }
  32. }

效果演示：

（六）JavaScript 事件 - 图4

事件的传播和事件冒泡

DOM事件流

事件传播的三个阶段是：事件捕获、事件冒泡和目标。

  • 事件捕获阶段：事件从祖先元素往子元素查找（DOM树结构），直到捕获到事件目标 target。在这个过程中，默认情况下，事件相应的监听函数是不会被触发的。
  • 事件目标：当到达目标元素之后，执行目标元素该事件相应的处理函数。如果没有绑定监听函数，那就不执行。
  • 事件冒泡阶段：事件从事件目标 target 开始，从子元素往冒泡祖先元素冒泡，直到页面的最上一级标签。

如下图所示：

（六）JavaScript 事件 - 图5

PS：这个概念类似于 Android 里的 touch 事件传递。

事件捕获

addEventListener可以捕获事件：

  1.     box1.addEventListener("click", function () {
  2.         alert("捕获 box3");
  3.     }, true);

上面的方法中，参数为true，代表事件在捕获阶段执行。

代码演示：

  1.     //参数为true，代表事件在「捕获」阶段触发；参数为false或者不写参数，代表事件在「冒泡」阶段触发
  2.     box3.addEventListener("click", function () {
  3.         alert("捕获 child");
  4.     }, true);
  6.     box2.addEventListener("click", function () {
  7.         alert("捕获 father");
  8.     }, true);
  10.     box1.addEventListener("click", function () {
  11.         alert("捕获 grandfather");
  12.     }, true);
  14.     document.addEventListener("click", function () {
  15.         alert("捕获 body");
  16.     }, true);

效果演示：

（六）JavaScript 事件 - 图6

（如果上面的图片打不开，请点击：http://img.smyhvae.com/20180204_1101.gif）

重点：捕获阶段，事件依次传递的顺序是：window —> document —> html—> body —> 父元素、子元素、目标元素。

这几个元素在事件捕获阶段的完整写法是：

  1.     window.addEventListener("click", function () {
  2.         alert("捕获 window");
  3.     }, true);
  5.     document.addEventListener("click", function () {
  6.         alert("捕获 document");
  7.     }, true);
  9.     document.documentElement.addEventListener("click", function () {
  10.         alert("捕获 html");
  11.     }, true);
  13.     document.body.addEventListener("click", function () {
  14.         alert("捕获 body");
  15.     }, true);
  17.     fatherBox.addEventListener("click", function () {
  18.         alert("捕获 father");
  19.     }, true);
  21.     childBox.addEventListener("click", function () {
  22.         alert("捕获 child");
  23.     }, true);

说明：

（1）第一个接收到事件的对象是 window（有人会说body，有人会说html，这都是错误的）。

（2）JS中涉及到DOM对象时，有两个对象最常用：window、doucument。它们俩是最先获取到事件的。

补充一个知识点：

在 js中：

  • 如果想获取 html节点，方法是document.documentElement。
  • 如果想获取 body 节点，方法是：document.body。

二者不要混淆了。

事件冒泡

事件冒泡: 当一个元素上的事件被触发的时候（比如说鼠标点击了一个按钮），同样的事件将会在那个元素的所有祖先元素中被触发。这一过程被称为事件冒泡；这个事件从原始元素开始一直冒泡到DOM树的最上层。

通俗来讲，冒泡指的是：子元素的事件被触发时，父元素的同样的事件也会被触发。取消冒泡就是取消这种机制。

代码演示：

  1.     //事件冒泡
  2.     box3.onclick = function () {
  3.         alert("child");
  4.     }
  6.     box2.onclick = function () {
  7.         alert("father");
  8.     }
  10.     box1.onclick = function () {
  11.         alert("grandfather");
  12.     }
  14.     document.onclick = function () {
  15.         alert("body");
  16.     }

（六）JavaScript 事件 - 图7

（如果上面的图片打不开，请点击：http://img.smyhvae.com/20180204_1028.gif）

上图显示，当我点击子元素 box3 的时候，它的父元素box2、box1、body都依次被触发了。即使我改变代码的顺序，也不会影响效果的顺序。

当然，上面的代码中，我们用 addEventListener 这种 DOM2的写法也是可以的，但是第三个参数要写 false，或者不写。

冒泡顺序：

一般的浏览器: （除IE6.0之外的浏览器）

  • div -> body -> html -> document -> window

IE6.0：

  • div -> body -> html -> document

不是所有的事件都能冒泡

以下事件不冒泡：blur、focus、load、unload、onmouseenter、onmouseleave。意思是，事件不会往父元素那里传递。

我们检查一个元素是否会冒泡，可以通过事件的以下参数：

  1.     event.bubbles

如果返回值为true，说明该事件会冒泡；反之则相反。

举例：

  1.     box1.onclick = function (event) {
  2.         alert("冒泡 child");
  4.         event = event || window.event;
  5.         console.log(event.bubbles); //打印结果：true。说明 onclick 事件是可以冒泡的
  6.     }

阻止冒泡

大部分情况下，冒泡都是有益的。当然，如果你想阻止冒泡，也是可以的。可以按下面的方法阻止冒泡。

阻止冒泡的方法

w3c的方法：（火狐、谷歌、IE11）

  1.     event.stopPropagation();

IE10以下则是：

  1. event.cancelBubble = true

兼容代码如下：

  1.    box3.onclick = function (event) {
  3.         alert("child");
  5.         //阻止冒泡
  6.         event = event || window.event;
  8.         if (event && event.stopPropagation) {
  9.             event.stopPropagation();
  10.         } else {
  11.             event.cancelBubble = true;
  12.         }
  13.     }

上方代码中，我们对box3进行了阻止冒泡，产生的效果是：事件不会继续传递到 father、grandfather、body了。

阻止冒泡的举例
  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.                 /*
  12.         * 开启box1的绝对定位
  13.         */
  14.                 position: absolute;
  15.             }
  16.         </style>
  18.         <script type="text/javascript">
  19.             window.onload = function() {
  20.                 /*
  21.                  * 使div可以跟随鼠标移动
  22.                  */
  24.                 //获取box1
  25.                 var box1 = document.getElementById('box1');
  27.                 //给整个页面绑定：鼠标移动事件
  28.                 document.onmousemove = function(event) {
  29.                     //兼容的方式获取event对象
  30.                     event = event || window.event;
  32.                     // 鼠标在页面的位置 = 滚动条滚动的距离 + 可视区域的坐标。
  33.                     var pagex = event.pageX || scroll().left + event.clientX;
  34.                     var pagey = event.pageY || scroll().top + event.clientY;
  36.                     //   设置div的偏移量（相对于整个页面）
  37.                     // 注意，如果想通过 style.left 来设置属性，一定要给 box1 开启绝对定位。
  38.                     box1.style.left = pagex + 'px';
  39.                     box1.style.top = pagey + 'px';
  40.                 };
  42.                 // 【重要注释】
  43.                 // 当 document.onmousemove 和 box2.onmousemove 同时触发时，通过  box2 阻止事件向 document 冒泡。
  44.                 // 也就是说，只要是在 box2 的区域，就只触发 document.onmousemove 事件
  45.                 var box2 = document.getElementById('box2');
  46.                 box2.onmousemove = function(event) {
  47.                     //阻止冒泡
  48.                     event = event || window.event;
  50.                     if (event && event.stopPropagation) {
  51.                         event.stopPropagation();
  52.                     } else {
  53.                         event.cancelBubble = true;
  54.                     }
  55.                 };
  56.             };
  58.             // scroll 函数封装
  59.             function scroll() {
  60.                 return {
  61.                     //此函数的返回值是对象
  62.                     left: window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop,
  63.                     right: window.pageXOffset || document.body.scrollLeft || document.documentElement.scrollLeft,
  64.                 };
  65.             }
  66.         </script>
  67.     </head>
  68.     <body style="height: 1000px;width: 2000px;">
  69.         <div id="box2" style="width: 300px; height: 300px; background-color: #bfa;"></div>
  70.         <div id="box1"></div>
  71.     </body>
  72. </html>

关键地方可以看代码中的注释。

效果演示：

（六）JavaScript 事件 - 图8

事件委托

事件委托，通俗地来讲，就是把一个元素响应事件（click、keydown……）的函数委托到另一个元素。

比如说有一个列表 ul，列表之中有大量的列表项 <a>标签：

  1. <ul id="parent-list">
  2.     <li><a href="javascript:;" class="my_link">超链接一</a></li>
  3.     <li><a href="javascript:;" class="my_link">超链接二</a></li>
  4.     <li><a href="javascript:;" class="my_link">超链接三</a></li>
  5. </ul>

当我们的鼠标移到<a>标签上的时候，需要获取此<a>的相关信息并飘出悬浮窗以显示详细信息，或者当某个<a>被点击的时候需要触发相应的处理事件。我们通常的写法，是为每个<a>都绑定类似onMouseOver或者onClick之类的事件监听：

  1.     window.onload = function(){
  2.         var parentNode = document.getElementById("parent-list");
  3.         var aNodes = parentNode.getElementByTagName("a");
  4.         for(var i=0, l = aNodes.length; i < l; i++){
  6.             aNodes[i].onclick = function() {
  7.                 console.log('我是超链接 a 的单击相应函数');
  8.             }
  9.         }
  10.     }

但是，上面的做法过于消耗内存和性能。我们希望，只绑定一次事件，即可应用到多个元素上，即使元素是后来添加的。

因此，比较好的方法就是把这个点击事件绑定到他的父层，也就是 ul 上，然后在执行事件函数的时候再去匹配判断目标元素。如下：

  1.     <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8" />
  5.         <title></title>
  6.         <script type="text/javascript">
  7.             window.onload = function() {
  9.                 // 获取父节点，并为它绑定click单击事件。 false 表示事件在冒泡阶段触发（默认）
  10.                 document.getElementById('parent-list').addEventListener('click', function(event) {
  11.                     event = event || window.event;
  13.                     // e.target 表示：触发事件的对象
  14.                     //如果触发事件的对象是我们期望的元素，则执行否则不执行
  15.                     if (event.target && event.target.className == 'link') {
  16.                     // 或者写成 if (event.target && event.target.nodeName.toUpperCase() == 'A') {
  17.                         console.log('我是ul的单击响应函数');
  18.                     }
  19.                 }, false);
  20.             };
  21.         </script>
  22.     </head>
  23.     <body>
  24.         <ul id="parent-list" style="background-color: #bfa;">
  25.             <li>
  26.                 <p>我是p元素</p>
  27.             </li>
  28.             <li><a href="javascript:;" class="link">超链接一</a></li>
  29.             <li><a href="javascript:;" class="link">超链接二</a></li>
  30.             <li><a href="javascript:;" class="link">超链接三</a></li>
  31.         </ul>
  32.     </body>

上方代码，为父节点注册 click 事件，当子节点被点击的时候，click事件会从子节点开始向父节点冒泡。父节点捕获到事件之后，开始执行方法体里的内容：通过判断 event.target 拿到了被点击的子节点<a>。从而可以获取到相应的信息，并作处理。

换而言之，参数为false，说明事件是在冒泡阶段触发（子元素向父元素传递事件）。而父节点注册了事件函数，子节点没有注册事件函数，此时，会在父节点中执行函数体里的代码。

总结：事件委托是利用了冒泡机制，减少了事件绑定的次数，减少内存消耗，提高性能。

事件委托的参考链接：

键盘事件

鼠标的拖拽事件

拖拽的流程：

（1）onmousedown：当鼠标在被拖拽元素上按下时，开始拖拽；

（2）onmousemove：当鼠标移动时被拖拽元素跟随鼠标移动；

（3）onmouseup：当鼠标松开时，被拖拽元素固定在当前位置。

鼠标的滚轮事件

onmousewheel：鼠标滚轮滚动的事件，会在滚轮滚动时触发。但是火狐不支持该属性。

DOMMouseScroll：在火狐中需要使用 DOMMouseScroll 来绑定滚动事件。注意该事件需要通过addEventListener()函数来绑定。

键盘事件

事件名

onkeydown：按键被按下。

onkeyup：按键被松开。

注意：

  • 如果一直按着某一个按键不松手，那么，onkeydown事件会一直触发。此时，松开键盘，onkeyup事件会执行一次。
  • 当onkeydown连续触发时，第一次和第二次之间会间隔稍微长一点，后续的间隔会非常快。这种设计是为了防止误操作的发生。

键盘事件一般都会绑定给一些可以获取到焦点的对象或者是document。代码举例：

  1.     <body>
  2.         <script>
  3.             document.onkeydown = function(event) {
  4.                 event = event || window.event;
  5.                 console.log('qianguyihao 键盘按下了');
  6.             };
  8.             document.onkeyup = function() {
  9.                 console.log('qianguyihao 键盘松开了');
  10.             };
  11.         </script>
  13.         <input type="text" />
  14.     </body>

判断哪个键盘被按下

可以通过event事件对象的keyCode来获取按键的编码。

此外，event事件对象里面还提供了以下几个属性：

  • altKey
  • ctrlKey
  • shiftKey

上面这三个属性，可以用来判断alt、ctrl、和shift是否被按下。如果按下则返回true，否则返回false。代码举例：

  1.     <body>
  2.         <script>
  3.             document.onkeydown = function(event) {
  4.                 event = event || window.event;
  5.                 console.log('qianguyihao：键盘按下了');
  7.                 // 判断y和ctrl是否同时被按下
  8.                 if (event.ctrlKey && event.keyCode === 89) {
  9.                     console.log('ctrl和y都被按下了');
  10.                 }
  11.             };
  12.         </script>
  13.     </body>

举例：input 文本框中，禁止输入数字。代码实现：

  1.     <body>
  2.         <input type="text" />
  4.         <script>
  5.             //获取input
  6.             var input = document.getElementsByTagName('input')[0];
  8.             input.onkeydown = function(event) {
  9.                 event = event || window.event;
  11.                 //console.log('qianguyihao:' + event.keyCode);
  12.                 //数字 48 - 57
  13.                 //使文本框中不能输入数字
  14.                 if (event.keyCode >= 48 && event.keyCode <= 57) {
  15.                     //在文本框中输入内容，属于onkeydown的默认行为
  16.                     return false; // 如果在onkeydown中取消了默认行为，则输入的内容，不会出现在文本框中
  17.                 }
  18.             };
  19.         </script>
  20.     </body>

举例：通过键盘的方向键，移动盒子

代码实现：

  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.         </style>
  14.     </head>
  15.     <body>
  16.         <div id="box1"></div>
  18.         <script type="text/javascript">
  19.             // 使div可以根据不同的方向键向不同的方向移动
  20.             /*
  21.              * 按左键，div向左移
  22.              * 按右键，div向右移
  23.              * ...
  24.              */
  26.             //为document绑定一个按键按下的事件
  27.             document.onkeydown = function(event) {
  28.                 event = event || window.event;
  30.                 //定义一个变量，来表示移动的速度
  31.                 var speed = 10;
  33.                 //当用户按了ctrl以后，速度加快
  34.                 if (event.ctrlKey) {
  35.                     console.log('smyhvae ctrl');
  36.                     speed = 20;
  37.                 }
  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'; // 在初始值的基础之上，减去 speed 大小
  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.         </script>
  65.     </body>
  66. </html>

上方代码，待改进的地方：

（1）移动盒子时，如果要加速，需要先按方向键，再按Ctrl键。

（2）首次移动盒子时，动作较慢。后续如果学习了定时器相关的内容，可以再改进。