事件

什么是事件？ 事件是在編程時(shí)系統(tǒng)內(nèi)發(fā)生的動(dòng)作或者發(fā)生的事情此迅。比如用戶在網(wǎng)頁上單擊一個(gè)按鈕
什么是事件監(jiān)聽汽畴？ 讓瀏覽器檢測(cè)是否有事件產(chǎn)生，一旦有事件觸發(fā)耸序，就立即調(diào)用一個(gè)函數(shù)做出響應(yīng)忍些，也稱為 注冊(cè)事件。
事件監(jiān)聽三要素：
1.事件源： 哪個(gè)dom元素被事件觸發(fā)了
2.事件： 用什么方式觸發(fā)坎怪，比如鼠標(biāo)單擊 click罢坝、鼠標(biāo)經(jīng)過 mouseenter 等
3.事件調(diào)用的函數(shù)： 要做什么事

語法：

        let btnObj = document.querySelector('button')

        // 點(diǎn)擊 click
        // 當(dāng)按鈕點(diǎn)擊的時(shí)候，會(huì)來觸發(fā)執(zhí)行函數(shù)
        btnObj.addEventListener('click', function () {
            // 該函數(shù)也叫作事件處理函數(shù)搅窿，把做的事情嘁酿，寫在該函數(shù)里面
            alert('哈哈隙券，被點(diǎn)了')
        })

注意： 1. 事件類型要加引號(hào) 2. 函數(shù)是點(diǎn)擊之后再去執(zhí)行，每次點(diǎn)擊都會(huì)執(zhí)行一次

隨機(jī)點(diǎn)名案例：

    // 數(shù)據(jù)數(shù)組
    let arr = ['馬超', '黃忠', '趙云', '關(guān)羽', '張飛']

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

    // 優(yōu)化版
    //  1. 避免多次點(diǎn)擊開始按鈕的bug
    //      在開定時(shí)器之前先關(guān)閉上一次開啟的定時(shí)器 ==> 可以確保只有一個(gè)定時(shí)器在運(yùn)行
    //  2. 抽完禁用按鈕
    //    2.1 在開始按鈕點(diǎn)擊的時(shí)候闹司，判斷數(shù)組的個(gè)數(shù) ==> 代碼寫在開始按鈕的點(diǎn)擊事件處理函數(shù)里面
    //    2.2 判斷數(shù)組的個(gè)數(shù)為1的時(shí)候娱仔，就可以不用開定時(shí)器隨機(jī)抽取了 ==> return 可以阻止后續(xù)代碼的執(zhí)行
    //    2.3 把數(shù)組里面僅有的這一項(xiàng)給取出來，設(shè)置到qs中展示
    //    2.4 還需要禁用開始和結(jié)束按鈕

    let qsObj = document.querySelector('.qs')
    let startObj = document.querySelector('.start')
    let endObj = document.querySelector('.end')
    // timerId 存定時(shí)器的id ==> 以便將來用于關(guān)閉定時(shí)器
    let timerId // timerId 變量聲明在全局作用域游桩，其是全局變量（在任何位置都可以使用）
    // index 存隨機(jī)抽取的人的下標(biāo)
    let index

    // 開始按鈕的點(diǎn)擊功能
    startObj.addEventListener('click', function () {

      // 做判斷拟枚，判斷數(shù)組里面的個(gè)數(shù)還有多少個(gè)，當(dāng)數(shù)組里面只有一個(gè)的時(shí)候众弓，就可以不用開啟定時(shí)器來隨機(jī)抽取了
      if (arr.length === 1) {
        // 把數(shù)組里面僅有的這一項(xiàng)給取出來恩溅，設(shè)置到qs中展示
        qsObj.innerHTML = arr[0]

        // 還需要將按鈕禁用掉（開始、結(jié)束）
        // startObj.disabled = true
        // endObj.disabled = true

        // 2行連寫
        startObj.disabled = endObj.disabled = true

        // 需要使用到return的特性：return之后的代碼是不執(zhí)行（不需要有返回值）
        return
      }


      // 避免多次點(diǎn)擊開始按鈕的bug
      //  思路：在每次開啟定時(shí)器之前谓娃，先把上一次開啟的定時(shí)器給關(guān)閉掉 ==> 可以確保定時(shí)器只能開一個(gè)
      clearInterval(timerId)
      timerId = setInterval(function () {
        index = getRandom(0, arr.length - 1)
        qsObj.innerHTML = arr[index]

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

    // 結(jié)束按鈕的點(diǎn)擊功能
    endObj.addEventListener('click', function () {
      // 關(guān)閉定時(shí)器
      clearInterval(timerId)
      // 刪除
      arr.splice(index, 1)
      console.log(arr)
    })

了解：綁定事件DOM L0

使用on方式來注冊(cè)事件
語法： 元素.on事件類型 = function(){}
注意： 有覆蓋問題

    btn.onclick = function () {
     alert('哈哈')
    }
   btn.onclick = function () {
    alert('嘻嘻')
    }
//只會(huì)彈出嘻嘻

全選反選案例：

    // 全選反選案例

    // 功能2：點(diǎn)擊下面三個(gè)多選框脚乡，反過來控制全選的選中狀態(tài)
    //       如何給下面三個(gè)多選框注冊(cè)click??? ==> 記得for循環(huán)遍歷偽數(shù)組

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

    // for循環(huán) 循環(huán)遍歷拿到每一個(gè)進(jìn)行處理
    //  全選只有一個(gè)，不需要for循環(huán)遍歷滨达，給其注冊(cè)click事件
    //  但是當(dāng)給cks注冊(cè)click的時(shí)候奶稠，就需要for循環(huán)了，因?yàn)槭莻€(gè)偽數(shù)組（多個(gè)捡遍，三個(gè)ck）

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


      // 優(yōu)化01
      // 控制span文字 ==> 判斷全選的選中狀態(tài)為選中的锌订，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 () {
        // 判斷三個(gè)ck中是否 有未選中的
        for (let j = 0; j < cks.length; j++) {

          if (!cks[j].checked) {
            // 優(yōu)化02
            //  遇到 === true 画株，直接省略不寫
            //  遇到 === false 辆飘，省略不寫，還需要在前面加! 取反

            // 邏輯運(yùn)算符 && || !    ! 取反
            // 目標(biāo)是 cks[j].checked 結(jié)果為false谓传，才讓進(jìn)if
            checkAll.checked = false
            spanObj.innerHTML = '全選'
            return
          }
        }

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

高階函數(shù)

高階函數(shù)（函數(shù)表達(dá)式 蜈项、回調(diào)函數(shù) ）

函數(shù)的高階使用方式 ==> 把函數(shù)當(dāng)成值來使用

函數(shù)表達(dá)式

回調(diào)函數(shù)：把一個(gè)函數(shù)當(dāng)成參數(shù)傳遞給另外一個(gè)函數(shù)，就說該函數(shù)是個(gè)回調(diào)函數(shù)