day02---事件以及高阶函数

事件

什么是事件？ 事件是在编程时系统内发生的动作或者发生的事情。比如用户在网页上单击一个按钮
什么是事件监听？ 让浏览器检测是否有事件产生，一旦有事件触发，就立即调用一个函数做出响应，也称为 注册事件。
事件监听三要素：
1.事件源： 哪个dom元素被事件触发了
2.事件： 用什么方式触发，比如鼠标单击 click、鼠标经过 mouseenter 等
3.事件调用的函数： 要做什么事

语法：

        let btnObj = document.querySelector('button')

        // 点击 click
        // 当按钮点击的时候，会来触发执行函数
        btnObj.addEventListener('click', function () {
            // 该函数也叫作事件处理函数，把做的事情，写在该函数里面
            alert('哈哈，被点了')
        })

注意： 1. 事件类型要加引号 2. 函数是点击之后再去执行，每次点击都会执行一次

随机点名案例：

    // 数据数组
    let arr = ['马超', '黄忠', '赵云', '关羽', '张飞']

    function getRandom(min, max) {
      return Math.floor(Math.random() * (max - min + 1)) + min
    }

    // 优化版
    //  1. 避免多次点击开始按钮的bug
    //      在开定时器之前先关闭上一次开启的定时器 ==> 可以确保只有一个定时器在运行
    //  2. 抽完禁用按钮
    //    2.1 在开始按钮点击的时候，判断数组的个数 ==> 代码写在开始按钮的点击事件处理函数里面
    //    2.2 判断数组的个数为1的时候，就可以不用开定时器随机抽取了 ==> return 可以阻止后续代码的执行
    //    2.3 把数组里面仅有的这一项给取出来，设置到qs中展示
    //    2.4 还需要禁用开始和结束按钮

    let qsObj = document.querySelector('.qs')
    let startObj = document.querySelector('.start')
    let endObj = document.querySelector('.end')
    // timerId 存定时器的id ==> 以便将来用于关闭定时器
    let timerId // timerId 变量声明在全局作用域，其是全局变量（在任何位置都可以使用）
    // index 存随机抽取的人的下标
    let index

    // 开始按钮的点击功能
    startObj.addEventListener('click', function () {

      // 做判断，判断数组里面的个数还有多少个，当数组里面只有一个的时候，就可以不用开启定时器来随机抽取了
      if (arr.length === 1) {
        // 把数组里面仅有的这一项给取出来，设置到qs中展示
        qsObj.innerHTML = arr[0]

        // 还需要将按钮禁用掉（开始、结束）
        // startObj.disabled = true
        // endObj.disabled = true

        // 2行连写
        startObj.disabled = endObj.disabled = true

        // 需要使用到return的特性：return之后的代码是不执行（不需要有返回值）
        return
      }


      // 避免多次点击开始按钮的bug
      //  思路：在每次开启定时器之前，先把上一次开启的定时器给关闭掉 ==> 可以确保定时器只能开一个
      clearInterval(timerId)
      timerId = setInterval(function () {
        index = getRandom(0, arr.length - 1)
        qsObj.innerHTML = arr[index]

        console.log(arr[index])
      }, 50)
    })

    // 结束按钮的点击功能
    endObj.addEventListener('click', function () {
      // 关闭定时器
      clearInterval(timerId)
      // 删除
      arr.splice(index, 1)
      console.log(arr)
    })

了解：绑定事件DOM L0

使用on方式来注册事件
语法： 元素.on事件类型 = function(){}
注意： 有覆盖问题

    btn.onclick = function () {
     alert('哈哈')
    }
   btn.onclick = function () {
    alert('嘻嘻')
    }
//只会弹出嘻嘻

全选反选案例：

    // 全选反选案例

    // 功能2：点击下面三个多选框，反过来控制全选的选中状态
    //       如何给下面三个多选框注册click??? ==> 记得for循环遍历伪数组

    let checkAll = document.querySelector('#checkAll')
    let cks = document.querySelectorAll('.ck')
    let spanObj = document.querySelector('.all')

    // for循环 循环遍历拿到每一个进行处理
    //  全选只有一个，不需要for循环遍历，给其注册click事件
    //  但是当给cks注册click的时候，就需要for循环了，因为是个伪数组（多个，三个ck）

    // 全选功能
    checkAll.addEventListener('click', function () {
      for (let i = 0; i < cks.length; i++) {
        cks[i].checked = checkAll.checked
      }


      // 优化01
      // 控制span文字 ==> 判断全选的选中状态为选中的，span文字为取消，反之则为全选
      //  === true 直接省略
      // if (checkAll.checked) {
      //   spanObj.innerHTML = '取消'
      // } else {
      //   spanObj.innerHTML = '全选'
      // }

      // 简化 if ... else
      //  语法： 条件 ? 满足 : 不满足
      //   checkAll.checked ? spanObj.innerHTML = '取消' : spanObj.innerHTML = '全选'

      // 还可以在简化
      // 三元 一般 用于取值
      spanObj.innerHTML = checkAll.checked ? '取消' : '全选'
    })


    // 反选功能
    for (let i = 0; i < cks.length; i++) {
      cks[i].addEventListener('click', function () {
        // 判断三个ck中是否 有未选中的
        for (let j = 0; j < cks.length; j++) {

          if (!cks[j].checked) {
            // 优化02
            //  遇到 === true ，直接省略不写
            //  遇到 === false ，省略不写，还需要在前面加! 取反

            // 逻辑运算符 && || !    ! 取反
            // 目标是 cks[j].checked 结果为false，才让进if
            checkAll.checked = false
            spanObj.innerHTML = '全选'
            return
          }
        }

        checkAll.checked = true
        spanObj.innerHTML = '取消'
      })
    }

高阶函数

高阶函数（函数表达式 、回调函数 ）

函数的高阶使用方式 ==> 把函数当成值来使用

函数表达式

回调函数：把一个函数当成参数传递给另外一个函数，就说该函数是个回调函数