webApi第五天

const

const声明的变量不可以被修改是常量

声明变量能使用const的话就不要使用let

事件对象

也是对象，这个对象里事件出发时的相关信息

例如：鼠标点击事件中，事件对象就存了鼠标点在哪个位置等信息

在事件绑定的回调函数的第一个参数就是事件对象一般命名为event、ev、e

语法：

元素.addEventListener('click',function (event) {}

常见属性

鼠标坐标信息

clientX/clientY

获取光标相对于浏览器可见窗口左上角的位置

offsetX/offsetY 获取光标相对于当前DOM元素左上角的位置

<body>
    <button>点击点击</button>
    <script>
      // 获取按钮
      const btn = document.querySelector('button');

      btn.addEventListener('click', function (event) {
        console.log(event); // 存放事件触发一瞬间的信息 -  鼠标位置信息  事件对象一般命名为event、ev、e
      });
    </script>
</body>

键盘按下信息

key 用户按下的键盘键的值现在不提倡使用keyCode

事件流

事件流值得是事件完整执行过程中的流动路径

事件流动的两个阶段

1.捕获阶段

从DOM的根元素开始去执行对应的事件 (从外到里)。

事件捕获需要写对应代码才能看到效果。

说明：

addEventListener第三个参数传入true代表是捕获阶段触发（很少使用）。

若传入false代表冒泡阶段触发，默认就是false

若是用 L0 事件监听，则只有冒泡阶段，没有捕获

addEventListener("click",function(){},true), 谁加了 true，那他的点击事件会优先触发

2.冒泡阶段

当一个元素的事件被触发时，同样的事件将会在该元素的所有祖先元素中依次被触发。这一过程被称为事件冒泡简单理解：当一个元素触发事件后，会依次向上调用所有父级元素的同名事件事件冒泡是默认存在的

阻止冒泡

在事件对象中 event 找到一个方法停止冒泡 event.stopPropagation();

1.因为默认就有冒泡模式的存在，所以容易导致事件影响到父级元素。

2.若想把事件就限制在当前元素内，就需要阻止事件流动。

3.阻止事件流动需要拿到事件对象。

4.此方法可以阻断事件流动传播，不光在冒泡阶段有效，捕获阶段也有效。

阻止标签默认行为

阻止标签默认行为，如阻止a标签点击跳转行为

清除表单和超链接跳转默认样式示例：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
    />
    <title>阻止标签的默认行为.html</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
    </style>
  </head>
  <body>
    <a href="http://www.baidu.com">百度</a>

    <form >
      <!-- <button type="button">点击我 就会自动刷新</button> -->
      <!-- <input type="button" value="点击我"> -->
    </form>
    <button>刷新</button>
    <script>
      /* 
      1 a标签的点击跳转
      2 form表单中button点击刷新行为
        1 阻止默认行为 - form表单 有一个 submit 事件 理解提交表单的触发-点击按钮的时候触发
        2 给button按钮绑定点击事件 也去阻止试试
        3 给button按钮 添加一个 type="button" 属性 
        4 换成 input标签 type="button"
        5 把button 移出form表单的区域 

      使用新技术 阻止标签默认行为 
       */
      const a=document.querySelector("a");
      const form=document.querySelector("form");
      const button=document.querySelector("button");
      a.addEventListener("click",function (event) {
        console.log("a标签的点击触发啦");
        // 阻止a标签的默认行为，让他不要跳转
        event.preventDefault();
      })

      // form.addEventListener("submit",function (event) {
      //   // 不要让页面再刷新
      //   event.preventDefault();
      // })

      // button.addEventListener("click",function (event) {
      //   event.preventDefault();  // 不要让页面再刷新
      // })
    </script>
  </body>
</html>

鼠标右键菜单案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
          margin: 0;
          padding: 0;
          box-sizing: border-box;
        }
        body {
          height: 100vh;
        }
        .menu {
          list-style: none;
          padding: 10px;
          border-radius: 5px;
          border: 1px solid #ccc;
          width: 150px;
          position: fixed;
  
          display: none;
        }
        li {
          height: 40px;
          display: flex;
          align-items: center;
          padding-left: 10px;
          border-bottom: 1px solid #ccc;
        }
        li:hover {
          background-color: #999;
          color: #fff;
          cursor: pointer;
        }
        li:last-child {
          border-bottom: none;
        }
      </style>
</head>
<body>
    <ul class="menu">
        <li>添加图标</li>
        <li>切换壁纸</li>
        <li>下载壁纸</li>
        <li>设置</li>
    </ul>

    <script>
        const menu = document.querySelector('.menu')

        //给页面标签绑定鼠标右键点击事件
        document.body.addEventListener('contextmenu',function (event) {
            //获取鼠标右键点击时的坐标
            const left = event.clientX            
            const top = event.clientY  
            
            menu.style.left = left + 'px'
            menu.style.top = top + 'px'
            menu.style.display = 'block'

          //清除鼠标右键点击默认样式  
            event.preventDefault()
        })

        document.body.addEventListener('click',function () {
            menu.style.display = 'none'
        })
    </script>
</body>
</html>

事件委托

**事件委托 **是利用事件流的特征解决一些开发需求的知识技巧。

总结：

优点：给父级元素加事件（可以提高性能）。

原理：事件委托其实是利用事件冒泡的特点，给父元素添加事件，子元素可以触发。

实现：事件对象.target 可以获得真正触发事件的元素。