const 和 let 区别
事件对象
事件流动-两个阶段
阻止标签的默认行为
事件委托
页面滚动 scroll

const 和 let 区别

早些时候js 声明变量只能使用 var (淘汰)

es6（新版本的js）出现之后只使用let 或者 const

① let 声明的变量可以被修改

②const 声明的变量不可以被修改 const 常量固定不变！！

普通类型的数据直接写 = ，表示修改数据报错
复杂类型的数据直接写 = ，表示修改报错
复杂类型的数据写 = 相当于重新开辟新空间

③ const 不能被修改的判断的方式：看它有没有重新写 = 号或者自增自减少

④作用

在程序设计的时候，如果发现有一些数据永远不会被更改
优先使用const （后期不小心发现被修改了，报错 - 去解决错误）

⑤引用类型来说

arr.push(123) 不是直接修改数组

const obj ={}
obj.name="h" 不是直接修改数组

1649861524618

事件对象

1、获取事件对象

也是个对象，这个对象里有事件触发时的相关信息(事件对象是什么？)
在事件绑定的回调函数的第一个参数就是事件对象（在哪里？）
一般命名为event、ev、e

//语法
元素.addEventListener('click', function(e){  
})


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

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

2、事件对象常用属性

①部分常用属性

type：获取当前的事件类型

<body>
    <div>点击点击</div>
    <script>
      // 获取按钮
      const btn = document.querySelector('div');
      btn.addEventListener('mousemove', function (event) {
        console.log(event.type); // 输出当前的事件类型  少用
      });
    </script>
  </body>

clientX/clientY：获取光标相对于浏览器可见窗口左上角的位置（参照物：页面的左上角即可）

<body>
    <div>点击点击</div>
    <script>
      // 获取按钮
      const btn = document.querySelector('div');
      btn.addEventListener('mousemove', function (event) {
        console.log(event.clientX,event.clientY ); // 返回 鼠标的位置-参照物 页面的左上角即可
      });
    </script>
  </body>

offsetX/offsetY：获取光标相对于当前DOM元素左上角的位置(参照物：是被点击的元素的左上角)

<body>
    <div>点击点击</div>
    <script>
      // 获取按钮
      const btn = document.querySelector('div');
      btn.addEventListener('mousemove', function (event) {
        console.log(event.offsetX,event.offsetY);// 返回鼠标的坐标，参照物 是被点击的元素的左上角
      });
    </script>
  </body>

key

用户按下的键盘键的值

现在不提倡使用keyCode

 <script>
      // 给body标签 绑定 键盘按下事件 keydown
      document.body.addEventListener('keydown', function (event) {
        console.log(event.key);// 当下按下的按键 ！ 
      });
    </script>

事件流

1、事件流与两个阶段说明

事件流指的是事件完整执行过程中的流动路径
捕获阶段

父节点流动到子节点
、冒泡阶段

子节点流动到父节点默认
事件流动方向默认是使用了冒泡 - 点击儿子标签触发儿子->父亲->爷爷
以后的代码开发过程中，还是继续使用默认的冒泡阶段

1649864779135

1649865723747

2、事件捕获和事件冒泡

事件冒泡概念：

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

事件捕获概念：

从DOM的根元素开始去执行对应的事件 (从外到里)
事件捕获需要写对应代码才能看到效果
代码：

DOM.addEventListener(事件类型， 事件处理函数， 是否使用捕获机制)

说明：

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

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

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

<body>
    <div class="box1">yeye
        <div class="box2">baba
            <div class="box3">erzi</div>
        </div>
    </div>
    <script>
        const box1 = document.querySelector('.box1')
        box1.addEventListener('click', function () {
            console.log('box1');
        }, true);//捕获阶段  true
        const box2 = document.querySelector('.box2')
        box2.addEventListener('click', function () {
            console.log('box2');
        }, true);//捕获阶段  true
        const box3 = document.querySelector('.box3')
        box3.addEventListener('click', function () {
            console.log('box3');
        })//冒泡阶段，默认值 false,可以省略
    </script>
</body>

3、阻止冒泡

因为默认就有冒泡模式的存在，所以容易导致事件影响到父级元素
若想把事件就限制在当前元素内，就需要阻止事件流动
阻止事件流动需要拿到事件对象
语法：

event.stopPropagation();

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

 const box3 = document.querySelector('.box3')
        box3.addEventListener('click', function (event) {
            p.style.backgroundColor = '#faa';
            p.innerText = + p.innerText + 100;
            console.log('box3');
            // 阻止事件冒泡
            event.stopPropagation();
        });

鼠标经过事件：

mouseover 和 mouseout 会有冒泡效果

mouseenter 和 mouseleave 没有冒泡效果(推荐)

4、阻止标签的默认行为

①阻止默认行为，比如链接点击不跳转，表单域的不提交

Ⅰ、a标签的点击跳转

Ⅱ、form表单中button点击刷新行为

阻止默认行为 - form表单有一个 submit 事件理解提交表单的触发-点击按钮的时候触发
给button按钮绑定点击事件也去阻止试试
给button按钮添加一个 type="button" 属性
换成 input标签 type="button"
把button 移出form表单的区域

event.preventDefault();

<body>
    <a href="http://www.baidu.com">百度</a>

    <form >
      <!-- <button type="button">点击我 就会自动刷新</button> -->
      <!-- <input type="button" value="点击我"> -->
    </form>
    <button>刷新</button>
    <script>
      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>

事件委托

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

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

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

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

event.target 有可能是ul标签，有可能是li标签，还有可能是 a标签，所以event.target：不够完美

<ul>
      <li><a href="#">1</a></li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
    </ul>
    <script>
      // 事件委托
      //  本来想要给li标签绑定事件实现业务
      //  把事件绑定写在 父元素上  把li标签应该要做的事情 委托给父元素来做！ 
      const ul=document.querySelector("ul");
      ul.addEventListener("click",function (event) {
        event.target.style.backgroundColor="red";// 委托
        // event.target 你当前点击的是哪个标签（点击最深最底层的那个标签即可）
        // console.log(event.target);// 获取到被点击的li标签 
      })
    </script>

event.target.nodeName：获取点击元素的标签名（大写），更精准

<ul>
      <li><a href="#">1</a></li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
    </ul>
    <script>
      const ul = document.querySelector('ul');
      ul.addEventListener('click', function (event) {
        // event.target.style.backgroundColor="red";
        // console.log(event.target);

        // 只有点击了li标签才触发
        // console.log(event.target.nodeName);// 当前点击的元素的标签名 大写
        if (event.target.nodeName === 'LI') {
          console.log('改变颜色');
          event.target.style.backgroundColor = 'red';
        }
      });
    </script>

scroll事件

<script>
        //浏览器滚动条滚动
        // window.addEventListener('scroll', function(){
        //     console.log('浏览器视口滚动触发');
        // });

        //哪个元素滚动就设置那个元素
        const div = document.querySelector('div');
        div.addEventListener('scroll', function(){
            console.log('看div在滚');
        })
    </script>

①获取宽高：

获取元素的内容总宽高（不包含滚动条）返回值不带单位
scrollWidth和scrollHeight

②获取位置:

获取元素内容往左、往上滚出去看不到的距离
scrollLeft和scrollTop
这两个属性是可以修改的

获取当前滚动距离、设置页面具体滚动距离：document.documentElement.scrollTop

<script>
        //页面级别的滚动
        window.addEventListener('scroll', function(){
            //这个代码可以获取到当前页面的滚动距离
            console.log(document.documentElement.scrollTop);
        });

	    const button = document.querySelector('button');
      button.addEventListener('click', function () {
        // 设置页面的滚动距离
        document.documentElement.scrollTop = 200;
      });
    </script>

webApi第六天和第七天