事件

一、键盘事件

  • 键盘事件可以给表单元素绑定，该事件是针对当前表单元素，光标在input框里的时候，才会触发该事件
  • 如果給window、body绑定键盘事件，则在哪里敲击键盘都会触发该事件
  • div、p、….等，不能绑定该事件
  • 表单元素才有value属性
  1. /*
  2. + 键盘事件可以给表单元素绑定，该事件是针对当前表单元素，光标在input框里的时候，才会触发该事件
  3. + 如果給window、body绑定键盘事件，则在哪里敲击键盘都会触发这件
  4. + div、p、....等，不能绑定该事件
  5. */
  6. // 表单元素才有value属性
  7. let inp = document.getElementById("inp");
  8. inp.onkeydown = function () {
  9.     // this.value 获取的是上一次input框里的值
  10.     console.log("键盘按下", this.value);
  11. }
  12. // onkeypress 是键盘按下状态的事件
  13. inp.onkeypress = function () {
  14.     // this.value 获取的是上一次input框里的值
  15.     console.log("键盘", this.value);
  16. }
  17. inp.onkeyup = function () {
  18.     // this.value 获取的是目前输入input框里的最新的值，因为数执行的时候，内容已经输入了。
  19.     console.log("键盘抬起", this.value);
  20. }

二、事件对象

1、keyCode 码

  1. // keyCode 键盘上每个按键的键码值
  2. document.body.onkeyup = function (ev) {
  3.     console.log(ev);
  4.     console.log("当前按键的keyCode码： " + ev.keyCode);
  5. }

推箱子案例

  1. <head>
  2.     <meta charset="UTF-8">
  3.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  4.     <title>Document</title>
  5.     <style>
  6.         * {
  7.             margin: 0;
  8.             padding: 0;
  9.         }
  11.         .box {
  12.             width: 200px;
  13.             height: 200px;
  14.             background-color: green;
  15.             border-radius: 10px;
  16.             position: absolute;
  17.             left: 0;
  18.             right: 0;
  19.             top: 0;
  20.             bottom: 0;
  21.         }
  22.     </style>
  23. </head>
  25. <body>
  26.     <div class="box">
  28.     </div>
  29.     <script>
  30.         let box = document.querySelector(".box"),
  31.             keycode,
  32.             css = getComputedStyle(box);
  33.         let left = parseFloat(css.left);
  34.         let top1 = parseFloat(css.top);
  35.         let right = parseFloat(css.right);
  36.         let bottom = parseFloat(css.bottom);
  37.         document.body.onkeydown = function (ev) {
  38.             let winH = document.documentElement.clientHeight;
  39.             let winW = document.documentElement.clientWidth;
  40.             let boxH = box.offsetHeight;
  41.             let boxW = box.offsetWidth;
  42.             let boxT = box.offsetTop;
  43.             let boxL = box.offsetLeft;
  44.             keycode = ev.keyCode;
  45.             switch (keycode) {
  46.                 case 37:
  47.                     if (boxL > 0) {
  48.                         left -= 10;
  49.                     }
  50.                     break;
  51.                 case 38:
  52.                     if (boxT > 0) {
  53.                         top1 -= 10;
  54.                     }
  55.                     break;
  56.                 case 39:
  57.                     if (winW - boxW - boxL > 0) {
  58.                         left += 10;
  59.                     }
  60.                     break;
  61.                 case 40:
  62.                     if (winH - boxH - boxT > 0) {
  63.                         top1 += 10;
  64.                     }
  65.                     break;
  67.             }
  68.             box.style.left = left + "px";
  69.             box.style.top = top1 + "px";
  71.         }
  72.     </script>
  74. </body>

2、坐标属性

  1. /*
  2.  *  相对于当前浏览器的可视窗口的位置：clientX、clientY
  3.  *  相对于当前盒子的位置：offsetX、offsetY
  4.  *  相对于当前的body的位置：pageX、pageY
  5.  *  target：目标源，当前点击的是哪个元素元素，target就是谁
  6.  *  type：事件类型
  7.  *  阻止事件的默认行为
  8.  *  e.cancelBubble:阻止事件的默认冒泡传播 (e.cancelBubble = true // 有兼容)
  9.  *  e.stopPropagation:阻止事件的默认冒泡传播(e.stopPropagation();)
  10.  *  e.preventDefault();  // 阻止事件的默认行为
  11.  *  e.returnValue = false// 阻止事件的默认行为 有兼容
  12.  */
  13. // 1、无边框的盒子
  14. box.onclick = function (ev) {
  15.     // ev事件
  16.     console.log(ev);
  17.     // 鼠标在盒子中点击时距离浏览器body的x坐标值
  18.     console.log("距离浏览器左边框： " + ev.clientX);
  19.     // 鼠标在盒子中点击时距离浏览器body的y坐标值
  20.     console.log("距离浏览器上边框： " + ev.clientY);
  21.     // 鼠标在盒子中点击时距离当前盒子最左侧的值（不包含边框）
  22.     console.log("距离当前盒子左内边框： " + ev.offsetX);
  23.     // 鼠标在盒子中点击时距离当前盒子最上侧的值（不包含边框）
  24.     console.log("距离当前盒子上内边框： " + ev.offsetY);
  25.     // 鼠标在盒子中点击时距离当前盒子最左侧的值
  26.     console.log("距离body的左内边框： " + ev.pageX);
  27.     // 鼠标在盒子中点击时距离当前盒子最上侧的值
  28.     console.log("距离body的上内边框： " + ev.pageY);
  29. }
  30. // 2、有边框的盒子
  31. box2.onclick = function (ev) {
  32.     // ev事件
  33.     console.log(ev);
  34.     // 鼠标在盒子中点击时距离浏览器body的x坐标值
  35.     console.log("距离浏览器左边框： " + ev.clientX);
  36.     // 鼠标在盒子中点击时距离浏览器body的y坐标值
  37.     console.log("距离浏览器上边框： " + ev.clientY);
  38.     // 鼠标在盒子中点击时距离当前盒子最左侧的值（不包含边框）
  39.     console.log("距离当前盒子左内边框： " + ev.offsetX);
  40.     // 鼠标在盒子中点击时距离当前盒子最上侧的值（不包含边框）
  41.     console.log("距离当前盒子上内边框： " + ev.offsetY);
  42. }

自定义右击菜单栏案例

  1. <head>
  2.     <meta charset="UTF-8">
  3.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  4.     <title>自定义菜单栏</title>
  5.     <style>
  6.         * {
  7.             margin: 0;
  8.             padding: 0;
  9.         }
  11.         ul {
  12.             list-style: none;
  13.         }
  15.         .box {
  16.             width: 100px;
  17.             background-color: red;
  18.             border-radius: 8px;
  19.             position: absolute;
  20.             display: none;
  21.         }
  22.     </style>
  23. </head>
  25. <body>
  26.     <div class="box" id="box">
  27.         <ul>
  28.             <li>1</li>
  29.             <li>2</li>
  30.             <li>3</li>
  31.             <li>4</li>
  32.         </ul>
  33.     </div>
  35.     <script>
  36.         window.oncontextmenu = function (ev) {
  37.             let colors = ["red", "green", "orange", "lawngreen", "aliceblue", "aquamarine"];
  38.             let num;
  39.             let newArr = [];
  40.             let lis = document.querySelectorAll(".box li");
  41.             for (let i = 0; i < 4; i++) {
  42.                 num = Math.round(Math.random() * 4);
  43.                 if (newArr.includes(colors[num])) {
  44.                     i--;
  45.                 } else {
  46.                     newArr.push(colors[num]);
  47.                 }
  48.             }
  49.             // 1、关闭默认菜单栏
  50.             ev.returnValue = false;
  51.             // 2、自定义菜单栏显示
  52.             box.style.display = "block";
  53.             for (let i = 0; i < newArr.length; i++) {
  54.                 lis[i].style.background = newArr[i];
  55.             }
  56.             // 3、获取鼠标右击时的坐标
  57.             let x = ev.clientX;
  58.             let y = ev.clientY;
  59.             console.log(x, y)
  60.             // 4、x，y給盒子定位
  61.             box.style.left = x + "px"; // 单位一定写！！！！
  62.             box.style.top = y + "px";
  64.         }
  65.     </script>
  66. </body>

三、事件的传播机制

  • 所有的事件触发时，首先执行捕获阶段（）；
  • 其次进入目标阶段（找到目标的阶段，该阶段没有先捕获后冒泡，而是先绑定谁，就先执行谁）；
  • 最后执行冒泡阶段。

1、事件的冒泡（由里向外冒泡）

  1. <head>
  2.     <meta charset="UTF-8">
  3.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  4.     <title>事件的默认传播机制</title>
  5.     <style>
  6.         div {
  7.             width: 200px;
  8.             height: 200px;
  9.             background-color: sienna;
  10.             border-radius: 8px;
  11.             display: flex;
  12.             justify-content: center;
  13.             align-items: center;
  14.             margin: 20px auto;
  15.         }
  17.         div.inner {
  18.             width: 150px;
  19.             height: 150px;
  20.             background-color: red;
  21.             border-radius: 8px;
  22.         }
  24.         div.center {
  25.             width: 80px;
  26.             height: 80px;
  27.             background-color: lightcyan;
  28.             border-radius: 8px;
  29.         }
  30.     </style>
  31. </head>
  33. <body>
  34.     <div class="outer">
  35.         <div class="inner">
  36.             <div class="center"></div>
  37.         </div>
  38.     </div>
  40.     <script>
  41.         let outer = document.querySelector(".outer");
  42.         let center = document.querySelector(".center");
  43.         let inner = document.querySelector(".inner");
  45.         // DOM1级绑定事件
  46.         /* // 输出的ev.target 都是center的div
  47.         outer.onclick = function (ev) {
  48.             console.log("1outer");
  49.             console.dir("触发源target： " + ev.target);
  50.         }
  51.         inner.onclick = function (ev) {
  52.             console.log("2inner");
  53.             console.dir("触发源target： " + ev.target);
  55.         }
  56.         center.onclick = function (ev) {
  57.             console.log("3center");
  58.             console.dir("触发源target： " + ev.target);
  60.         } */
  62.         // DOM2级绑定事件
  63.         function fn1() {
  64.             console.log("1outer");
  65.         }
  67.         function fn2() {
  68.             console.log("2inner");
  69.         }
  71.         function fn3() {
  72.             console.log("3center");
  73.         }
  74.         outer.addEventListener("click", fn1);
  75.         center.addEventListener("click", fn3);
  76.         inner.addEventListener("click", fn2);
  77.     </script>
  78. </body>

2、事件的捕获机制（从外往里捕获）

  1. <body>
  2.     <div class="outer">
  3.         <div class="inner">
  4.             <div class="center"></div>
  5.         </div>
  6.     </div>
  8.     <script>
  9.         let outer = document.querySelector(".outer");
  10.         let center = document.querySelector(".center");
  11.         let inner = document.querySelector(".inner");
  13.         // DOM2级绑定事件
  14.         function fn1() {
  15.             console.log("outer 冒泡");
  16.         }
  18.         function fn2() {
  19.             console.log("inner 冒泡");
  20.         }
  22.         function fn3() {
  23.             console.log("center 冒泡");
  24.         }
  26.         function fn11() {
  27.             console.log("outer 捕获");
  28.         }
  30.         function fn22() {
  31.             console.log("inner 捕获");
  32.         }
  34.         function fn33() {
  35.             console.log("center 捕获");
  36.         }
  37.         /*
  38.          *  addEventListener第三个参数(默认false)
  39.          *  false --- 冒泡
  40.          *  true  --- 捕获
  41.          */
  42.         outer.addEventListener("click", fn1);
  43.         outer.addEventListener("click", fn11, true);
  44.         center.addEventListener("click", fn3);
  45.         center.addEventListener("click", fn33, true);
  46.         inner.addEventListener("click", fn2);
  47.         inner.addEventListener("click", fn22, true);
  48.     </script>
  49. </body>

四、事件的委托

  1. <head>
  2.     <meta charset="UTF-8">
  3.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  4.     <title>事件委托</title>
  5. </head>
  7. <body>
  8.     <ul id="box">
  9.         <li>1</li>
  10.         <li>2</li>
  11.         <li>3</li>
  12.         <li>4</li>
  13.         <li>5</li>
  14.     </ul>
  16.     <script>
  17.         /* let list = document.querySelectorAll("#box li");
  18.         for (let i = 0; i < list.length; i++) {
  19.             list[i].onclick = function () {
  20.                 console.log(this.innerText);
  21.             }
  22.         } */
  24.         // 利用事件委托 绑定点击事件,实现打印每一个点击元素的文本值
  25.         let box = document.querySelector("#box");
  26.         box.onclick = function (ev) {
  27.             console.log(ev);
  28.             console.log(ev.toElement.innerText);
  30.         }
  31.     </script>
  32. </body>

五、鼠标跟随案例

  1. <head>
  2.     <meta charset="UTF-8">
  3.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  4.     <title>鼠标跟随</title>
  5.     <style>
  6.         * {
  7.             margin: 0;
  8.             padding: 0;
  9.         }
  11.         .box {
  12.             width: 200px;
  13.             height: 200px;
  14.             background-color: lightslategray;
  15.             border-radius: 8px;
  16.             position: relative;
  17.             margin: 50px auto;
  18.         }
  20.         .mark {
  21.             width: 50px;
  22.             height: 50px;
  23.             background-color: red;
  24.             border-radius: 8px;
  25.             position: absolute;
  26.             cursor: move;
  27.         }
  28.     </style>
  29. </head>
  31. <body>
  32.     <div class="box" id="box">
  33.         <!-- <div class="mark" id="mark">
  34.             光标
  35.         </div> -->
  36.     </div>
  38.     <script>
  39.         // 光标移入事件
  40.         let mark;
  41.         box.onmouseenter = function () {
  42.             mark = document.createElement("div");
  43.             mark.classList.add("mark");
  44.             mark.id = "mark";
  45.             box.appendChild(mark);
  46.         }
  47.         // 光标移动事件
  48.         box.onmousemove = function (ev) {
  50.             let curLeft = ev.clientX - box.offsetLeft - mark.offsetHeight / 2;
  51.             let curTop = ev.clientY - box.offsetTop - mark.offsetWidth / 2;
  52.             // console.log(ev.clientX, box.offsetLeft);
  53.             // 判断盒子的坐标位置，不让其移出大盒子
  54.             let maxLeft = box.offsetWidth - mark.offsetWidth;
  55.             let maxTop = box.offsetHeight - mark.offsetHeight;
  56.             if (curLeft <= 0) curLeft = 0;
  57.             else if (curLeft >= maxLeft) curLeft = maxLeft;
  58.             if (curTop <= 0) curTop = 0;
  59.             else if (curTop > maxTop) curTop = maxTop;
  60.             mark.style.left = curLeft + "px";
  61.             mark.style.top = curTop + "px";
  62.         }
  63.         // 光标移出事件
  64.         box.onmouseleave = function () {
  65.             box.removeChild(mark);
  66.         }
  67.     </script>
  68. </body>