今日学习任务

  • [ ] 1.案例拖拽盒子

  • [ ] (1)拖拽事件流程

  • (2)拖拽盒子原理
  • (3)案例：拖拽登陆框
  • 2.阻止a标签默认跳转两种常用方式
  • 3.注册/移除多个同名事件(addEventListener)

  • [ ] 4.事件冒泡

  • [ ] (1)事件冒泡介绍

  • (2)事件冒泡利用（事件委托）
  • (3)事件冒泡影响
  • (4)阻止事件冒泡

  • [ ] 5.事件捕获

  • [ ] (1)事件捕获介绍

  • (2)事件三个阶段

  • [ ] 6.事件对象补充属性

  • [ ] (1)事件类型type

  • (2)键盘事件与获取按键

01-案例：拖拽盒子

1.1-拖拽盒子01

day07 - 图1

思路分析

day07 - 图2

本小节知识点：鼠标拖拽

  • 复习鼠标事件：

    • onclick：鼠标点下去并且弹起来触发（单击一次）
    • ondblclick:鼠标连续点击两次（双击）
    • onmousedown：鼠标按下就触发
    • onmouseup： 鼠标弹起触发
    • onmouseover：鼠标移入
    • onmouseout：鼠标移出
    • onmousemove：鼠标移动
  • 鼠标拖拽：（1）先按下 （2）然后移动 （3）最后松开
  1. <!DOCTYPE html>
  2. <html>
  4. <head lang="en">
  5.     <meta charset="UTF-8">
  6.     <title></title>
  9.     <style>
  10.         #father {
  11.             width: 200px;
  12.             height: 400px;
  13.             background-color: skyblue;
  14.             position: absolute;
  15.             top: 0px;
  16.             left: 0px;
  17.         }
  19.         #son {
  20.             width: 200px;
  21.             height: 100px;
  22.             background-color: hotpink;
  23.             cursor: move;
  24.         }
  25.     </style>
  26. </head>
  28. <body>
  30.     <div id="father">
  31.         <div id="son"></div>
  32.     </div>
  34.     <script>
  36.         /* 
  37.         复习鼠标事件
  38.             鼠标单击：onclick  按下+松开 = 单击一次
  39.             鼠标双击：ondblclick
  40.             鼠标移入：onmouseover
  41.             鼠标移出：onmouseout
  42.             鼠标移动：onmousemove
  43.             鼠标按下： onmousedown
  44.             鼠标松开： onmouseup
  46.         拖拽事件
  47.             1.鼠标按下 ： 给元素注册
  48.             2.鼠标移动 ： （1）给页面注册  （2）需要在按下的事件处理中注册
  49.             3.鼠标松开 ： 在按下事件处理中注册
  50.         */
  51.         let son = document.getElementById('son');// 与父元素对其 offsetLeft:0
  52.         let father = document.getElementById('father');// 父元素 offsetLeft:到body的距离
  54.         // son.onclick = function(){
  55.         //     console.log('鼠标单击');
  57.         // };
  59.         //1.鼠标按下
  60.         son.onmousedown = function (e) {
  61.             //1级链
  62.             console.log('鼠标按下了');
  63.             //1.鼠标按下：求蓝线 = 红线(e.pageX) - 绿线（father.offsetLeft）
  64.             let x = e.pageX - father.offsetLeft;
  65.             let y = e.pageY - father.offsetTop;
  66.             //2.鼠标移动
  67.             document.onmousemove = function (e) {
  68.                 //2级链
  69.                 //2.求黑线 = 红线(e.pageX) - 蓝线
  70.                 father.style.left = e.pageX - x + 'px';
  71.                 father.style.top = e.pageY - y + 'px';
  72.                 // console.log('鼠标移动');
  73.                 // console.log(e);
  74.             };
  75.             //3.鼠标松开
  76.             //鼠标松开也可以在按下之后注册：因为如果鼠标没有按下，不可能触发松开事件
  77.             son.onmouseup = function () {
  78.                 console.log('鼠标松开');
  79.                 //移除鼠标移动事件
  80.                 document.onmousemove = null;
  81.             };
  82.         };
  87.     </script>
  88. </body>
  90. </html>

1.2-拖拽盒子02(元素有margin)

  1. <!DOCTYPE html>
  2. <html>
  4. <head lang="en">
  5.     <meta charset="UTF-8">
  6.     <title></title>
  9.     <style>
  10.         #father {
  11.             width: 200px;
  12.             height: 400px;
  13.             background-color: skyblue;
  14.             position: absolute;
  15.             top: 0px;
  16.             left: 0px;
  17.             margin: 50px;
  18.         }
  20.         #son {
  21.             width: 200px;
  22.             height: 100px;
  23.             background-color: hotpink;
  24.             cursor: move;
  25.         }
  26.     </style>
  27. </head>
  29. <body>
  31.     <div id="father">
  32.         <div id="son"></div>
  33.     </div>
  35.     <script>
  37.         /* 
  38.         复习鼠标事件
  39.             鼠标单击：onclick  按下+松开 = 单击一次
  40.             鼠标双击：ondblclick
  41.             鼠标移入：onmouseover
  42.             鼠标移出：onmouseout
  43.             鼠标移动：onmousemove
  44.             鼠标按下： onmousedown
  45.             鼠标松开： onmouseup
  47.         拖拽事件
  48.             1.鼠标按下 ： 给元素注册
  49.             2.鼠标移动 ： （1）给页面注册  （2）需要在按下的事件处理中注册
  50.             3.鼠标松开 ： 在按下事件处理中注册
  51.         */
  52.         let son = document.getElementById('son');// 与父元素对其 offsetLeft:0
  53.         let father = document.getElementById('father');// 父元素 offsetLeft:到body的距离
  55.         // son.onclick = function(){
  56.         //     console.log('鼠标单击');
  58.         // };
  60.         /*发现问题：为什么元素添加margin之后，拖拽会有顿闪效果
  61.         分析问题： 元素定位是按照margin左上角来定位
  62.         解决问题： 如果元素有margin，则应该减去margin
  64.         */
  66.         //1.鼠标按下
  67.         son.onmousedown = function (e) {
  68.             //1级链
  69.             console.log('鼠标按下了');
  70.             //1.鼠标按下：求蓝线 = 红线(e.pageX) - 绿线（father.offsetLeft）
  71.             let x = e.pageX - father.offsetLeft;
  72.             let y = e.pageY - father.offsetTop;
  73.             //2.鼠标移动
  74.             document.onmousemove = function (e) {
  75.                 //2级链
  76.                 //2.求黑线 = 红线(e.pageX) - 蓝线
  77.                 father.style.left = e.pageX - x - 50 + 'px';
  78.                 father.style.top = e.pageY - y -50 + 'px';
  79.                 // console.log('鼠标移动');
  80.                 // console.log(e);
  81.             };
  82.             //3.鼠标松开
  83.             //鼠标松开也可以在按下之后注册：因为如果鼠标没有按下，不可能触发松开事件
  84.             son.onmouseup = function () {
  85.                 console.log('鼠标松开');
  86.                 //移除鼠标移动事件
  87.                 document.onmousemove = null;
  88.             };
  89.         };
  94.     </script>
  95. </body>
  97. </html>

1.3-案例：拖拽登录验证

day07 - 图3

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.     <title>Document</title>
  10.     <style>
  11.         .wrap {
  12.             width: 360px;
  13.             height: 180px;
  14.             margin: 50px auto;
  15.             border: 1px solid black;
  16.             position: relative;
  17.         }
  19.         .wrap .icon {
  20.             position: absolute;
  21.             left: 0;
  22.             top: 60px;
  23.         }
  25.         .wrap .progress {
  26.             width: 100%;
  27.             height: 40px;
  28.             position: relative;
  29.             top: -4px;
  30.             background-color: pink;
  31.         }
  33.         .cube {
  34.             position: absolute;
  35.             width: 40px;
  36.             height: 40px;
  37.             background-color: red;
  38.             cursor: pointer;
  39.         }
  41.         .bar {
  42.             position: absolute;
  43.             width: 0px;
  44.             height: 40px;
  45.             background-color: green;
  46.         }
  47.     </style>
  48. </head>
  50. <body>
  51.     <div class="wrap">
  52.         <img src="./images/drag01.png" alt="">
  53.         <img class="icon" src="./images/drag02.png" alt="">
  54.         <div class="progress">
  55.             <div class="bar"></div>
  56.             <div class="cube"></div>
  57.         </div>
  58.     </div>
  59.     <script>
  60.         /*
  61.         1.分析需求(交互)：
  62.             拖拽小方块cube :
  63.                 a. cube小方块  水平移动
  64.                 b. bar进度条变宽
  65.                 c. icon小图片对应(移动距离一致)水平移动
  66.                 d. 检测icon小图片位置是否正确
  67.         2.思路分析（事件三要素）
  68.             获取元素：事件源：
  69.             注册事件：事件类型
  70.             事件处理：
  71.         */
  73.         //1.获取元素
  74.         let wrap = document.querySelector('.wrap');
  75.         let cube = document.querySelector('.cube');
  76.         let bar = document.querySelector('.bar');
  77.         let icon = document.querySelector('.icon');
  79.         //2.注册拖拽事件
  81.         //(1)注册鼠标按下
  82.         cube.onmousedown = function (e) {
  83.             e = e || window.event;
  84.             //记录鼠标按下时的  e.pageX
  85.             let x = e.pageX;
  86.             //(2)注册鼠标移动：页面
  87.             document.onmousemove = function (e) {
  88.                 e = e || window.event;
  89.                 //a. 蓝线距离 = 鼠标移动e.pageX  - 鼠标按下e.pageX
  90.                 let x1 = e.pageX - x;
  91.                 //b. 边界检测
  92.                 x1 = x1 <= 0 ? 0 : x1;
  93.                 /* 最大位移 = 父盒子宽度 - 小方块宽度 */
  94.                 let maxLeft = wrap.offsetWidth - cube.offsetWidth;
  95.                 x1 = x1 >= maxLeft ? maxLeft : x1;
  97.                 //c. 小方块移动
  98.                 cube.style.left = x1 + 'px';
  99.                 //d. 进度条变宽
  100.                 bar.style.width = x1 + 'px';
  101.                 //e. 小图标对应移动
  102.                 icon.style.left = x1 + 'px';
  104.             };
  106.             //(3)注册鼠标松开
  107.             document.onmouseup = function () {
  108.                 //移除鼠标移动
  109.                 document.onmousemove = null;
  111.                 //检测小图标位置是否正确
  112.                 if(icon.offsetLeft > 150 && icon.offsetLeft < 160){
  113.                     alert('验证成功,即将跳转登录页');
  114.                     //刷新页面
  115.                     window.location.href = 'http://www.itheima.com';
  116.                 }else{
  117.                     alert('验证失败，请重新验证');
  118.                     //刷新页面
  119.                     window.location.reload();
  120.                 }
  121.             };
  122.         };
  123.     </script>
  124. </body>
  126. </html>

02-阻止a标签默认跳转

1.1-阻止a标签跳转两种常用方式

  • 默认情况下，点击a标签会跳转到一个新的网页，这叫做超链接
  • 某些情况下，我们只希望拿到a标签的样式（鼠标放上去有小手，用户很直观的知道这可以点击），而不希望跳转到新的网页这个时候我们就可以阻止a标签的跳转

  • 以下几种不需要死记硬背，实际开发习惯任何一种即可

    • 原理了解即可：

      • 第一种：给a标签添加点击事件，在点击事件中return false（建议使用，用于任意跳转a标签）
      • 第二种：给a标签的href属性设置一个伪链接（一般不用，用于页内跳转的a标签）

    • 课外拓展

      • 打电话:tel:
      • 发邮件:mailto:
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8. <!--默认情况下，点击a标签会跳转到一个新的网页，这叫做超链接
  9. 某些情况下，我们只希望拿到a标签的样式（鼠标放上去有小手，用户很直观的知道这可以点击），而不希望跳转到新的网页
  10. 这个时候我们就可以阻止a标签的跳转
  11. 以下几种不需要死记硬背，实际开发习惯任何一种即可
  12.     * 原理了解即可：第一种：给a标签添加点击事件，在点击事件中return false
  13.                                 第二种：给a标签的href属性设置一个伪链接
  14. -->
  16. <!--行内写法-->
  17. <a href="#"   target="_blank" onclick="alert('哈哈，有SB点击我了');return false;">跳转1</a>
  18. <!--注意：只要是行内写法，就需要在行内return false-->
  19. <a href="#" target="_blank" onclick="test1();return false;">跳转2</a>
  20. <!--内联写法，直接在函数中return false即可-->
  21. <a href="#" target="_blank" id="link">跳转3</a>
  22. <!--设置href属性伪链接：主要此时不要使用target='_blank'，要不然无效-->
  23. <a href="javascript:void(0)">跳转4</a>
  24. <a href="javascript:;">跳转5</a>
  26. </body>
  28. <script>
  30.     function test1 (  ) {
  31.         alert('今晚');
  32.     }
  34.     let link = document.getElementById('link');
  35.     link.onclick = function (  ) {
  36.         alert('大吉');
  37.         return false;
  38.     }
  39. </script>
  40. </html>

1.2-案例：页面换肤

day07 - 图4

需求：点击上方小图，下方展示对应大图

  • 思路：

    • 1.将图片的路径放入a标签的href属性中，并且禁用a标签的默认跳转
    • 2.给每一个a标签添加点击事件
    • 3.点击时，取出本次点击的a标签的href属性的值，赋值给下方大图的src属性
  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <style>
  8.         .small {
  9.             width: 180px;
  10.         }
  12.         li {
  13.             float: left;
  14.             list-style: none;
  15.             margin-right: 20px;
  16.         }
  17.         ul {
  18.             width: 1000px;
  19.             margin: 0 auto;
  21.             height: 160px;
  23.         }
  24.         .father {
  25.             width: 1000px;
  26.             margin: 0 auto;
  27.         }
  28.         .father #bigPic {
  29.             width: 1000px;
  30.         }
  31.     </style>
  32. </head>
  33. <body>
  34. <ul id="ul1">
  35.     <li><a href="images/01.jpg"><img src="images/01.jpg" alt="" class="small"/></a></li>
  36.     <li><a href="images/02.jpg"><img src="images/02.jpg" alt="" class="small"/></a></li>
  37.     <li><a href="images/03.jpg"><img src="images/03.jpg" alt="" class="small"/></a></li>
  38.     <li><a href="images/04.jpg"><img src="images/04.jpg" alt="" class="small"/></a></li>
  39.     <li><a href="images/05.jpg"><img src="images/05.jpg" alt="" class="small"/></a></li>
  40. </ul>
  42. <div class="father">
  43.     <img src="images/01.jpg" alt="" id="bigPic"/>
  44. </div>
  45. <script>
  46.     /*
  47.     1.分析需求(交互)：点击上方a标签：取出a标签中img元素的src属性赋值给下方大图的src
  48.     2.思路分析（事件三要素）
  49.         获取元素：事件源：
  50.         注册事件：事件类型
  51.         事件处理：
  52.     */
  54.     //1.获取元素
  55.     let aList = document.querySelectorAll('a');
  56.     let bigPic = document.querySelector('#bigPic')
  57.     //2.注册事件
  58.     for(let i = 0;i<aList.length;i++){
  59.         aList[i].onclick = function(){
  60.             //3.事件处理：取出a标签中img元素的src属性赋值给下方大图的src
  61.             console.log(this);
  62.             //第一种方式：通过children取出a标签子元素img标签的src属性值
  63.             //bigPic.src = this.children[0].src;
  65.             //另一种方式：一旦阻止a标签默认跳转。href属性失效，但是可以用来存储自定义数据
  66.             bigPic.src =  this.href;
  68.             return false;
  69.         };
  70.     };
  71. </script>
  72. </body>
  74. </html>

03-注册/移除多个同名事件(addEventListener)

1.1-addEventListener注册事件

  • 本小节知识点：如何给一个元素添加多个相同事件
  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4.     <meta charset="UTF-8">
  5.     <title></title>
  7. </head>
  8. <body>
  10. <input type="button" value="点我" id="btn"/>
  12. </body>
  13. </html>
  16. <script>
  18.     /*本小节知识点：如何给一个元素添加多个相同事件
  19.     */
  21.     let btn = document.getElementById ( "btn" )
  24.     //用这样的方式添加相同的事件，后面的会覆盖前面的
  25.     //    btn.onclick = function () {
  26.     //
  27.     //        alert("点一次200块");
  28.     //    }
  29.     //
  30.     //    btn.onclick = function () {
  31.     //
  32.     //        alert("点我干啥？");
  33.     //    }
  36.     //可以给同名的事件，绑定多个事件处理程序
  37.     //语法：对象.addEventListener(参数1,参数2,参数3);
  38.     //参数1：事件名(字符串)，不要加on  例如：click  、 mouseover 、mouseout
  39.     //参数2：事件处理程序（函数名），当事件触发后哪个函数来处理
  40.     //参数3：是一个bool类型，可以不传，默认为fasle（代表冒泡）跟冒泡和捕获有关
  41.     //如果有同名事件不会覆盖，而是会依次执行
  43.     //IE8及以前的版本不支持
  45.     /*
  46.     btn.addEventListener ( "click", function ( e ) {
  47.         e = e || window.event
  48.         alert ( "嘿嘿嘿" )
  49.         console.log ( e )
  50.     }, false )
  53.     btn.addEventListener ( "click", function () {
  54.         alert ( "哈哈哈" )
  55.     } )
  57.     //如果传入已经存在的函数，那么直接写函数名，千万不要写小括号
  58.     btn.addEventListener ( "click", sayHi, false )
  60.     function sayHi ( e ) {
  61.         e = e || window.event
  62.         alert ( "你来追我呀！" )
  63.         console.log ( e )
  64.     }
  65. */
  68.     //只有IE8以前支持的方法，其他的都不支持
  69.     //只有2个参数
  70.     //参数1：事件名（字符串），但是要加on
  71.     //参数2：事件处理程序。事件触发时哪个函数来响应
  72.     //后面的先执行，前面的后执行
  74.     /*
  75.      btn.attachEvent("onclick", function () {
  77.      alert("祝中间的早晚偷情成功");
  78.      });
  80.      btn.attachEvent("onclick", function () {
  82.      alert("祝隔壁老王和我隔壁的幸福");
  83.      });
  85. */
  88.     /*兼容性封装*/
  90.     /** 给元素添加多个相同的事件
  91.     * @param obj：元素   eventName：事件名  fn：事件处理函数
  92.     * @return 无
  93.     */
  94.     function addEvent(obj, eventName, fn) {
  96.         //能力检测
  97.         if (obj.addEventListener) {        //非IE8
  99.             obj.addEventListener(eventName, fn);
  101.         } else if (obj.attachEvent) {    //IE8
  103.             obj.attachEvent("on" + eventName, fn);
  105.         } else {                        //默认方式
  107.             obj["on" + eventName] = fn;
  108.         }
  109.     }
  112. </script>

1.2-removeEventListener移除事件

  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4.     <meta charset="UTF-8">
  5.     <title>标题</title>
  7. </head>
  8. <body>
  9. <input type="button" value="按钮" id="btn"/>
  11. <script>
  12.     let btn = document.getElementById("btn");
  14.     //1.on+事件名称的方式
  15.     // btn.onclick = function () {
  16.     //   alert("哈哈");
  17.     //   btn.onclick = null; //移除事件。
  18.     // }
  21.     //2.元素名.addEventListener注册的事件，移除方式
  22.     //元素名.removeEventListener(参数1，参数2，参数3);
  23.     //参数1:事件名称
  24.     //参数2：事件处理程序
  25.     //参数3：布尔类型的值
  26.     //  function test() {
  27.     //    alert("哈哈");
  28.     //  }
  29.     //  btn.addEventListener("click", test,false);
  30.     //  btn.removeEventListener("click",test,false)
  33.     //3.元素名.attachEvent注册的事件移除方式
  34.     //元素名.detachEvent(参数1，参数2)
  35.     //参数1：事件名称  是加了on的方式
  36.     //参数2：事件处理程序。
  37.     //  function test2(){
  38.     //    alert("哈哈哈哈哈哈啊....");
  39.     //  }
  40.     //  btn.attachEvent("onclick",test2);
  41.     //  btn.detachEvent("onclick",test2);
  44.     //4.移除事件，不同的添加方式，使用不同的方式移除，所以要做兼容处理。
  45.     function removeEventListener(obj,type,listener){
  46.         //能力检测
  47.         if(obj.removeEventListener){
  48.             obj.removeEventListener(type,listener,false);
  49.         }else if(obj.detachEvent){
  50.             obj.detachEvent("on"+type,listener);
  51.         }else {
  52.             obj["on"+type] = null;
  53.         }
  54.     }
  57.     //5.对封装的函数做一个测试
  58.     function ceshi(){
  59.         alert("呵呵呵嘻嘻嘻嘻....cs移出事件函数....");
  60.     }
  61.     addEventListener(btn,"click",ceshi);
  62.     removeEventListener(btn,"click",ceshi);
  66.     //4.给某一个元素注册多个相同的事件，不同的浏览器有不同的方式，所以要做兼容。
  67.     function addEventListener(obj,type,listener){
  68.         //能力检测
  69.         if(obj.addEventListener){
  70.             obj.addEventListener(type,listener,false);
  71.         }else if(obj.attachEvent){
  72.             obj.attachEvent("on"+type,listener);
  73.         }else {
  74.             obj["on"+type] = listener;
  75.         }
  76.     }
  77. </script>
  78. </body>
  79. </html>

04-事件冒泡

1.1-事件冒泡介绍

本小节知识点：介绍什么是事件冒泡

  • 事件冒泡：如果一个元素的事件被触发，那么他的所有父级元素的同名事件也会被依次触发

    • 元素->父元素->body->html->document->window

      • 事件冒泡一直存在，只不过以前我们没有给父级元素加同名事件
  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4.     <meta charset="UTF-8">
  5.     <title></title>
  7.     <style>
  8.         #box{
  9.             width: 300px;
  10.             height: 300px;
  11.             background-color: hotpink;
  12.             position: relative;
  13.         }
  15.         #son{
  16.             width: 100px;
  17.             height: 100px;
  18.             position: absolute;
  20.             left: 350px;
  21.             top: 350px;
  23.             background-color: yellowgreen;
  24.         }
  25.     </style>
  26. </head>
  27. <body>
  29. <div id="box">
  30.     <input type="button" value="点我" id="btn"/>
  32.     <div id="son"></div>
  33. </div>
  35. </body>
  36. </html>
  38. <script>
  40.     /*本小节知识点：介绍什么是事件冒泡
  41.      * 事件冒泡：如果一个元素的事件被触发，那么他的所有父级元素的同名事件也会被依次触发
  42.             * 元素->父元素->body->html->window
  43.         *事件冒泡一直存在，只不过以前我们没有给父级元素加同名事件
  44.      */
  47.     window.onclick = function () {
  49.         alert("window被点击了");
  50.     }
  52.     document.onclick = function () {
  54.         alert("文档被点击了");
  55.     }
  57.     document.documentElement.onclick = function () {
  59.         alert("html被点击了");
  60.     }
  62.     document.body.onclick = function () {
  64.         alert("body被点击了");
  65.     }
  67.     document.getElementById("box").onclick = function () {
  69.         alert("我是骚粉的大盒子");
  70.     };
  72.     document.getElementById("btn").onclick = function () {
  74.         alert("我是小按钮");
  75.     };
  77.     document.getElementById("son").onclick = function () {
  79.         alert("我是又黄又绿的小盒子");
  80.     };
  81. </script>

1.2-事件冒泡利用（事件委托）

本小节知识点：介绍事件冒泡的好处

  1. 事件冒泡好处：如果想给父元素的多个子元素添加事件，我们可以只需要给父元素添加事件即可，然后

通过获取事件源(e.target)就可以得知是哪一个子元素触发了这个事件

  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6. </head>
  7. <body>
  9. <ul id="ul1">
  10.     <li>隔壁老王1</li>
  11.     <li>隔壁老王2</li>
  12.     <li>隔壁老王3</li>
  13.     <li>隔壁老王4</li>
  14.     <li>隔壁老王5</li>
  15. </ul>
  17. </body>
  18. </html>
  20. <script>
  21.     /*本小节知识点：介绍事件冒泡的好处
  22.     事件冒泡好处：如果想给父元素的多个子元素添加事件，我们可以只需要给父元素添加事件即可，然后
  23.   通过获取事件源(e.target)就可以得知是哪一个子元素触发了这个事件
  25.      */
  27.     let ul = document.getElementById("ul1");
  29.     //1.如果想给ul中的每一个li标签添加点击事件，以前的做法需要遍历ul的li标签逐个添加
  30.     //    for (let i = 0; i < ul.children.length; i++) {
  31.     //
  32.     //        ul.children[i].onclick = function () {
  33.     //
  34.     //            alert(this.innerHTML);
  35.     //        }
  36.     //    }
  38.     //2.使用时间冒泡：只需要给父元素添加点击事件即可
  39.     ul.onclick = function (e) {
  41.         e = e || window.event;
  43.         let target = e.target || e.srcElement;
  45.         console.log(target.innerHTML);
  47.         //target：事件源：触发本次事件的源头
  48.         alert(e.target.innerHTML);
  49.     }
  51. </script>

1.3-事件冒泡影响

  • 本小节知识点：介绍事件冒泡的影响

    • 事件冒泡会导致需求冲突：例如我想要添加一个功能，弹出登录窗之后点击body空白区域让登陆窗消失
    • 此时a标签弹出登录窗的点击事件会触发body的点击事件，导致登陆窗一出来就消失
  • 解决方案：阻止事件冒泡（下一小节知识点）
  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <style>
  7.         .login-header {
  8.             width: 100%;
  9.             text-align: center;
  10.             height: 30px;
  11.             font-size: 24px;
  12.             line-height: 30px;
  13.         }
  15.         html, body, ul, li, ol, dl, dt, dd, div, p, span, h1, h2, h3, h4, h5, h6, a {
  16.             padding: 0px;
  17.             margin: 0px;
  18.         }
  20.         .login {
  21.             width: 512px;
  22.             position: absolute;
  23.             border: #ebebeb solid 1px;
  24.             height: 280px;
  25.             left: 50%;
  26.             right: 50%;
  27.             background: #ffffff;
  28.             box-shadow: 0px 0px 20px #ddd;
  29.             z-index: 9999;
  30.             margin-left: -256px;
  31.             margin-top: 140px;
  32.             display: none;
  33.         }
  35.         .login-title {
  36.             width: 100%;
  37.             margin: 10px 0px 0px 0px;
  38.             text-align: center;
  39.             line-height: 40px;
  40.             height: 40px;
  41.             font-size: 18px;
  42.             position: relative;
  43.             cursor: move;
  44.         }
  46.         .login-input-content {
  47.             margin-top: 20px;
  48.         }
  50.         .login-button {
  51.             width: 50%;
  52.             margin: 30px auto 0px auto;
  53.             line-height: 40px;
  54.             font-size: 14px;
  55.             border: #ebebeb 1px solid;
  56.             text-align: center;
  57.         }
  59.         .login-bg {
  60.             width: 100%;
  61.             height: 100%;
  62.             position: fixed;
  63.             top: 0px;
  64.             left: 0px;
  65.             background: #000000;
  66.             opacity: 0.3;
  67.             display: none;
  68.         }
  70.         a {
  71.             text-decoration: none;
  72.             color: #000000;
  73.         }
  75.         .login-button a {
  76.             display: block;
  77.         }
  79.         .login-input input.list-input {
  80.             float: left;
  81.             line-height: 35px;
  82.             height: 35px;
  83.             width: 350px;
  84.             border: #ebebeb 1px solid;
  85.             text-indent: 5px;
  86.         }
  88.         .login-input {
  89.             overflow: hidden;
  90.             margin: 0px 0px 20px 0px;
  91.         }
  93.         .login-input label {
  94.             float: left;
  95.             width: 90px;
  96.             padding-right: 10px;
  97.             text-align: right;
  98.             line-height: 35px;
  99.             height: 35px;
  100.             font-size: 14px;
  101.         }
  103.         .login-title span {
  104.             position: absolute;
  105.             font-size: 12px;
  106.             right: -20px;
  107.             top: -30px;
  108.             background: #ffffff;
  109.             border: #ebebeb solid 1px;
  110.             width: 40px;
  111.             height: 40px;
  112.             border-radius: 20px;
  113.         }
  114.     </style>
  115. </head>
  116. <body>
  119. <div class="login-header">
  120.     <a id="link" href="javascript:void(0);">点击，弹出登录框</a>
  121. </div>
  123. <div id="login" class="login">
  124.     <div id="title" class="login-title">登录会员
  125.         <span>
  126.             <a id="closeBtn" href="javascript:void(0);" class="close-login"> 关闭</a>
  127.         </span>
  128.     </div>
  130.     <div class="login-input-content">
  131.         <div class="login-input">
  132.             <label>用户名：</label>
  133.             <input type="text" placeholder="请输入用户名" name="info[username]" id="username" class="list-input">
  134.         </div>
  135.         <div class="login-input">
  136.             <label>登录密码：</label>
  137.             <input type="password" placeholder="请输入登录密码" name="info[password]" id="password" class="list-input">
  138.         </div>
  139.     </div>
  140.     <div id="loginBtn" class="login-button"><a href="javascript:void(0);" id="login-button-submit">登录会员</a></div>
  141. </div>
  143. <div id="bg" class="login-bg"></div>
  144. <script src="common.js"></script>
  146. <script>
  148.     /*本小节知识点：介绍事件冒泡的影响
  149.     事件冒泡会导致需求冲突：例如我想要添加一个功能，弹出登录窗之后点击body空白区域让登陆窗消失
  150.     此时a标签弹出登录窗的点击事件会触发body的点击事件，导致登陆窗一出来就消失
  152.     解决方案：阻止事件冒泡（下一小节知识点）
  154.      */
  156.     //找到弹出窗口的a标签
  157.     let open = document.getElementById("link");//点击弹出登录窗口
  158.     //找到整个登录窗口
  159.     let login = document.getElementById("login");//需要移动
  160.     //找到背景阴影
  161.     let bg = document.getElementById("bg");//弹出登录窗后需要修改颜色
  162.     //找到登录的标题部分
  163.     let title = document.getElementById("title");//需要拖拽
  165.     /*添加需求：点击页面空白区域让登录窗消失  */
  166.     window.onclick = function () {
  167.         login.style.display = "none";
  168.         bg.style.display = "none";
  169.     }
  172.     //a标签点击事件
  173.     open.onclick = function (e) {
  175.         login.style.display = "block";
  176.         bg.style.display = "block";
  177.         //阻止事件冒泡
  178.         e.stopPropagation();
  179.     }
  181.     //关闭按钮点击事件
  182.     document.getElementById("closeBtn").onclick = function () {
  184.         login.style.display = "none";
  185.         bg.style.display = "none";
  186.     };
  188.     //title按下事件
  189.     title.onmousedown = function (e) {
  191.         e = e || window.event;
  193.         let x = getPagePoint(e).pageX - login.offsetLeft;
  194.         let y = getPagePoint(e).pageY - login.offsetTop;
  196.         //页面添加鼠标移动事件
  197.         document.onmousemove = function (event) {
  199.             event = event || window.event;
  201.             //login大盒子的margin-left: -256px，    margin-top: 140px
  202.             //1 - -256 = 257  减去负数就相当于加这个数 (负负得正)
  203.             login.style.left = getPagePoint(event).pageX - x + 256 + "px";
  204.             login.style.top = getPagePoint(event).pageY - y - 140 + "px";
  205.         }
  207.         //鼠标弹起后停止移动事件
  208.         this.onmouseup = function () {
  210.             document.onmousemove = null;
  211.         }
  212.     }
  216. </script>
  218. </body>
  219. </html>

1.4-阻止事件冒泡

本小节知识点：阻止事件冒泡

  • 阻止事件冒泡：让同名事件不要在父元素中冒泡（触发）
    1. * 说人话：点击一个元素只会触发当前元素的事件，不会触发父元素的同名事件

  • 语法： 事件对象.stopPropagation() IE8及之前不支持

  • 事件对象.cancelBubble = true IE8之前支持

  • 注意：如果想要阻止事件冒泡，一定要在触发事件的函数中接收事件对象

  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4.     <meta charset="UTF-8">
  5.     <title></title>
  7.     <style>
  8.         #box{
  9.             width: 300px;
  10.             height: 300px;
  11.             background-color: hotpink;
  12.             position: relative;
  13.         }
  15.         #son{
  16.             width: 100px;
  17.             height: 100px;
  18.             position: absolute;
  20.             left: 350px;
  21.             top: 350px;
  23.             background-color: yellowgreen;
  24.         }
  25.     </style>
  26. </head>
  27. <body>
  29. <div id="box">
  30.     <input type="button" value="点我" id="btn"/>
  32.     <div id="son"></div>
  33. </div>
  35. </body>
  36. </html>
  38. <script>
  40.     /*本小节知识点：阻止事件冒泡
  41.      * 阻止事件冒泡：让同名事件不要在父元素中冒泡（触发）
  42.             * 说人话：点击一个元素只会触发当前元素的事件，不会触发父元素的同名事件
  43.      * 语法：  事件对象.stopPropagation()       IE8及之前不支持
  44.      *             事件对象.cancelBubble = true               IE8之前支持
  45.      *
  46.      * 注意：如果想要阻止事件冒泡，一定要在触发事件的函数中接收事件对象
  47.      */
  49.     window.onclick = function () {
  51.         alert("window被点击了");
  52.     }
  54.     document.onclick = function () {
  56.         alert("文档被点击了");
  57.     }
  59.     document.documentElement.onclick = function () {
  61.         alert("html被点击了");
  62.     }
  64.     document.body.onclick = function () {
  66.         alert("body被点击了");
  67.     }
  69.     document.getElementById("box").onclick = function (e) {
  70.         e = e || window.event;
  74.         alert("我是骚粉的大盒子");
  75.         // e.stopPropagation();
  76.         //e.cancelBubble = true;//IE8及之前
  77.         stopPropagation(e);//兼容性封装函数
  78.         //阻止事件冒泡的这行代码可以写在这个事件函数的任意位置，一般习惯写在最后面
  79.     };
  81.     document.getElementById("btn").onclick = function () {
  83.         alert("我是小按钮");
  84.     };
  86.     document.getElementById("son").onclick = function () {
  88.         alert("我是又黄又绿的小盒子");
  89.     };
  91.     /**  阻止事件冒泡兼容性封装
  92.     * @param e:事件对象
  93.     * @return 无
  94.     */
  95.     function stopPropagation( e) {
  96.         e = e || window.event;
  97.         if(e.stopPropagation){
  98.             e.stopPropagation();
  99.         }else{
  100.             e.cancelBubble = true;
  101.         }
  102.     }
  103. </script>

05-事件捕获

1.1-事件捕获介绍

本小节知识点：事件捕获

  • 1.事件冒泡：从触发事件元素，一级一级往上找父元素触发同名事件，如果有就触发

  • 2.事件捕获：从最顶级的父元素一级一级往下找子元素触发同名事件，直到触发事件的元素为止

    • 事件捕获与事件冒泡触发事件的顺序完全相反

  • 3.事件捕获，只能通过addEventListener并且参数写true才是事件捕获

    • 其他都是冒泡（不是通过addEventListener添加、addEventListener参数为false）
  • 4.事件对象.stopPropagation() 除了可以阻止冒泡还可以阻止捕获
  • 5.IE8及以前没有捕获！
  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: 300px;
  10.             background-color: hotpink;
  11.             position: relative;
  12.         }
  14.         #son {
  15.             width: 100px;
  16.             height: 100px;
  17.             position: absolute;
  19.             left: 350px;
  20.             top: 350px;
  22.             background-color: yellowgreen;
  23.         }
  24.     </style>
  25. </head>
  26. <body>
  28. <div id="box">
  30.     <div id="son"></div>
  31. </div>
  34. </body>
  35. </html>
  37. <script>
  38.     /*本小节知识点：事件捕获
  40.      1.事件冒泡：从触发事件元素，一级一级往上找父元素触发同名事件，如果有就触发
  42.     2.事件捕获：从最顶级的父元素一级一级往下找子元素触发同名事件，直到触发事件的元素为止
  43.         * 事件捕获与事件冒泡触发事件的顺序完全相反
  45.     3.事件捕获，只能通过addEventListener并且参数写true才是事件捕获
  46.         * 其他都是冒泡（不是通过addEventListener添加、addEventListener参数为false）
  48.     4.事件对象.stopPropagation() 除了可以阻止冒泡还可以阻止捕获
  50.     5.IE8及以前没有捕获！
  52.      */
  54.     let box = document.getElementById("box");
  55.     let son = document.getElementById("son");
  59.     window.addEventListener("click", function () {
  60.         alert("这是window");
  61.     },true)
  64.     document.addEventListener("click", function () {
  65.         alert("这是document");
  66.     },true)
  68.     document.documentElement.addEventListener("click", function (e) {
  69.         e = e || window.event;
  70.         alert("这是html");
  71.         e.stopPropagation();//阻止事件冒泡和事件捕获
  73.     },true)
  75.     document.body.addEventListener("click", function () {
  77.         alert("这是body");
  79.     },true)
  81.     //参数3：默认是false，代表是支持事件冒泡
  82.     box.addEventListener("click", function () {
  84.         alert("这是box");
  85.     },true)
  87.     son.addEventListener("click", function () {
  89.         alert("这是son");
  90.     },true)
  95. </script>

1.2-事件三个阶段

本小节知识点：介绍事件的三个阶段

  • 1.事件一共有三个阶段：事件的执行顺序

    • 1—捕获阶段 ：
    • 2—目标阶段 ：
    • 3—冒泡阶段 ：
  • 2.事件对象.eventPhase 可以获得触发这个事件时，到底是哪个阶段
  • 3.先从最顶级往下一级一级捕获，然后到目标的捕获，目标的冒泡，再一级一级往上冒泡
  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4.     <meta charset="UTF-8">
  5.     <title>标题</title>
  6.     <style>
  7.         .one {
  8.             width: 200px;
  9.             height: 200px;
  10.             background-color: pink;
  11.         }
  12.         .son {
  13.             width: 100px;
  14.             height: 100px;
  15.             background-color: green;
  16.             position: absolute;
  17.             left: 250px;
  18.             top: 250px;
  19.         }
  20.     </style>
  21. </head>
  22. <body>
  23. <div class="one" id="box">
  24.     <input type="button" value="按钮" id="btn"/>
  25.     <div class="son" id="son"></div>
  26. </div>
  28. <script>
  29.     /*本小节知识点：介绍事件的三个阶段
  30.     1.事件一共有三个阶段：事件的执行顺序
  31.                 1--捕获阶段 ：
  32.                 2--目标阶段 ：
  33.                 3--冒泡阶段 ：
  35.       2.事件对象.eventPhase 可以获得触发这个事件时，到底是哪个阶段
  37.       3.先从最顶级往下一级一级捕获，然后到目标的捕获，目标的冒泡，再一级一级往上冒泡
  39.      */
  40.     let box = document.getElementById("box");
  41.     let btn = document.getElementById("btn");
  42.     let son = document.getElementById("son");
  44.     document.addEventListener("click",function (e) {
  45.         alert("document"+ e.eventPhase);
  46.     },true) ;//true表示事件捕获，所以是阶段1，并且优先执行
  48.     document.body.addEventListener("click", function (e) {
  49.         alert("哈哈，我是body"+ e.eventPhase);
  50.     },false);
  53.     box.addEventListener("click",function (e) {
  54.         alert("哈哈哈，我是粉色的盒子box..."+ e.eventPhase);
  55.     },false);
  59.     btn.addEventListener("click",function (e) {
  60.         alert("哈哈哈，我是按钮btn..."+ e.eventPhase);
  61.     },false);
  65.     son.addEventListener("click",function (e) {
  66.         alert("嘻嘻嘻，我是绿色的盒子son"+ e.eventPhase);
  68.     },false);
  70. </script>
  71. </body>
  72. </html>

06-事件对象补充属性（事件类型、键盘按键）

1.1-事件类型e.type

  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <!--
  7.         事件对象.type  能获取到触发事件的事件名
  8.     -->
  9. </head>
  10. <body>
  12. <input type="button" value="按钮" id="btn"/>
  13. </body>
  14. </html>
  16. <script>
  18.     let btn = document.getElementById('btn');
  20.     /*
  21.     btn.onclick = function (e) {
  23.         console.log("我被点了");
  25.         console.log(e.type);//获取事件名，获取到的是click
  26.     };
  28.     btn.onmouseover = function (e) {
  29.         console.log(e.type);//mouseover
  30.     };
  31.     */
  33.    btn.onclick = f1;
  34.     btn.onmouseover = f1;
  36.     function f1(e){
  37.         //如果是点击触发的，那么就是click，如果是鼠标移入触发的就是mouseover
  38.         console.log(e.type);
  39.     }
  41. </script>

1.2-键盘事件及获取键盘按键

本小节知识点：介绍键盘的事件和获取按键

  • 1.键盘事件

    • onkeydown:键盘按下触发
    • onkeyup：键盘弹起触发
    • onkeypress：键盘按下并弹起会触发

    • onkeydown和onkeypress的区别：了解即可

      • onkeypress可以过滤掉特殊的功能键例如删除、F1-F12,shift,alt键等等，onkeydown不会过滤
      • onkeypress可以区分大小写，但是onkeydown永远都是大写（不管大小写状态）

  • 2.如何获取你到底按的是哪个键？

    • 通过事件对象获取 语法： 事件对象.keyCode
    • 获取到的是键盘对应字符的ascii码
    • ascii码转字符：String.fromCharCode(code)

  • 3.有三个属性都可以获取到按下的键

    • keyCode（IE8及之前），charCode,which

    • 所以为了保证一定能获取到，就做兼容
      let code = e.keyCode || e.charCode || e.which;

  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6. </head>
  7. <body>
  9. </body>
  10. </html>
  12. <script>
  13.     /*本小节知识点：介绍键盘的事件和获取按键
  14.      1.键盘事件
  15.         onkeydown:键盘按下触发
  16.         onkeyup：键盘弹起触发
  17.         onkeypress：键盘按下并弹起会触发（用的比较多）
  19.      onkeydown和onkeypress的区别：了解即可
  20.            1.onkeypress可以过滤掉特殊的功能键例如删除、F1-F12,shift,alt键等等，onkeydown不会过滤
  21.            2.onkeypress可以区分大小写，但是onkeydown永远都是大写（不管大小写状态）
  23.       2. 如何获取你到底按的是哪个键？
  24.             * 通过事件对象获取   语法： 事件对象.keyCode
  25.                 * 获取到的是键盘对应字符的ascii码
  26.                 * ascii码转字符：String.fromCharCode(code)
  28.       3.有三个属性都可以获取到按下的键
  29.             keyCode（IE8及之前），charCode,which
  30.             keydown\keyup:keyCode
  31.             keypress:charCode
  32.        所以为了保证一定能获取到，就做兼容
  33.             let code = e.keyCode || e.charCode || e.which;
  34.      */
  36.     document.onkeypress = function (e) {
  38.         e = e || window.event
  40.         let code = e.keyCode || e.charCode || e.which;
  42.         console.log("press触发了 : " + code);
  43.        //根据ASCII码转换成字符
  44.         console.log(String.fromCharCode(code));
  45.     };
  47.     //打开浏览器，按下任何键就触发了
  48.     document.onkeydown = function (e) {
  50.         e = e || window.event
  52.         console.log("down触发了 : " + e.keyCode);
  54.         console.log(String.fromCharCode(e.keyCode));
  55.     };
  57. </script>

1.3-右键事件

  • 网页默认都有右键事件，是一个菜单

  • 右键事件：contextmenu

  • 阻止右键默认的事件：e.preventDefault()

  • 自定义右键菜单

  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <style>
  7.         * {
  8.             padding: 0;
  9.             margin: 0;
  10.         }
  12.         .box {
  13.             display: none;
  14.             position: fixed;
  15.             width: 120px;
  16.             border: 1px solid #dadce0;
  17.         }
  19.         .box li {
  20.             list-style: none;
  21.             width: 110px;
  22.             float: left;
  23.             line-height: 30px;
  24.             padding-left: 10px;
  25.             font-size: 14px;
  26.         }
  27.     </style>
  28. </head>
  29. <body>
  30.     <div class="box">
  31.         <ul>
  32.             <li>复制</li>
  33.             <li>粘贴</li>
  34.             <li>剪切</li>
  35.         </ul>
  36.     </div>
  37.     <script>
  38.         // 右键一般是默认事件，但是有些情况下不需要右键的默认事件，需要自定义，如游戏、办公系统等
  39.         document.addEventListener('contextmenu',function(e){
  40.             // 事件兼容处理
  41.             e = e || window.event;
  43.             // 阻止默认事件
  44.             e.preventDefault();
  46.             // 显示菜单：事件右侧
  47.             let box = document.querySelector('.box');
  48.             box.style.backgroundColor = '#ffffff';
  49.             box.style.left = e.pageX + 'px';
  50.             box.style.top = e.pageY + 'px';
  51.             box.style.display = 'block';
  52.         });
  53.     </script>
  54. </body>
  55. </html>