事件冒泡和捕获、数组和对象解构、模板字符串、水平垂直居中方式、节流防抖（Date 2022/12/30）

mc.byte

已于 2023-01-04 11:24:56 修改

阅读量72

点赞数

分类专栏： # 前端面试题 # 笔记 web前端文章标签：前端 javascript

于 2022-12-29 00:45:56 首次发布

本文链接：https://blog.csdn.net/m0_58044090/article/details/128475658

版权

web前端同时被 3 个专栏收录

31 篇文章 0 订阅

订阅专栏

笔记

30 篇文章 0 订阅

订阅专栏

前端面试题

8 篇文章 0 订阅

订阅专栏

一. 事件冒泡和捕获

1. 事件冒泡：从子到父，

简单理解：当一个元素触发事件后，会依次向上调用所有父级元素的同名事件

事件冒泡是默认存在的；事件监听第三个参数是 false，或者默认都是冒泡

2. 事件捕获：从父到子

实际工作都是使用事件冒泡为主

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

说明：

addEventListener第三个参数传入 true 代表是捕获阶段触发（很少使用）
若传入false代表冒泡阶段触发，默认就是false
若是用 L0 事件监听，则只有冒泡阶段，没有捕获

3. 阻止事件冒泡

保证事件只在当前元素被执行，而不再去影响其祖先元素

语法: 事件对象.stopPargation()

二、数组和对象解构

数组解构：

数组里面的值按照下标一一对应赋值给变量，如果有对应不上的就是undefind

对象解构：

把对象的属性和方法赋值给属性名相同的变量；找不到与变量名一致属性时，变量值为undefind

三、什么是模板字符串

使用反引号(``)包裹, 写在${ } 里面。可以在字符串中可以嵌入变量，js 表达式或函数。

四、水平垂直居中的方式有几种？（至少理解两种）

position： absolute
left:50%
top:50%
transform：translate(-50%, -50%);

.parent {
 display： flex;
 justify-content： center; /* 水平居中 */
 align-items：center; /*垂直居中*/
 }

五、节流和防抖，细说其实现流程

5.1 节流：是指连续触发事件，但是在一段时间之内（n 秒）只执行一次函数

实现：利用最新的时间减去过去的时间，只有时间差大于等于多少毫秒的时候才再去掉用，否则不调用

流程：

节流函数 throttle(fn,time){ } ；第一个参数fn ：要被节流的函数；第二个参数：时间间隔
设定一个起始时间
return 回调函数里面得到当前时间戳
判断时间差，大于等于指定的的间隔时间，调用函数
调用完之后，更新起始时间 startTime = now

<head>
<style>
    .box {
      width: 500px;
      height: 500px;
      background-color: #ccc;
      color: rgb(31, 200, 127);
      text-align: center;
      font-size: 100px;
    }
  </style>
</head>

<body>
  <div class="box"></div>
  <script>
    const box = document.querySelector('.box')
    let i = 0//让这个变量++
    // 封装一个函数
    function mouseMove() {
      box.innerHTML = i++
    }
    //鼠标移动事件
    //box.addEventListener('mousemove', mouseMove)
    //一些事件的执行频次很高，这样降低了代码的执行效率


    // 节流函数 throttle
    // 参数1：要被节流的函数
    // 参数2：时间间隔(毫秒)
    function throttle(fn, t) {
      //1)起始的时间
      let startTime = 0

      return function () {
        //2)得到当前的时间戳
        // let now = Date.now()
        let now = new Date()

        //3)判断如果大于等于指定的的间隔时间， 调用函数
        if (now - startTime >= t) {
          // 调用函数
          fn()

          // 更新起始时间  (❗注意位置，写在if内)
          //起始的时间 = 现在的时间  (写在调用函数的下面)
          startTime = now
        }
      }
    }
    // throttle(mouseMove, 1000)

    box.addEventListener('mousemove', throttle(mouseMove, 1000))
 </script>
</body>