一、注冊事件-事件監(jiān)聽

• 給元素注冊上事件
  語法：元素.addEventListener('事件', 要執(zhí)行的函數(shù))
  就是讓瀏覽器檢測是否有事件產(chǎn)生，一旦有事件觸發(fā)，就立即調(diào)用一個函數(shù)做出響應(yīng)，也稱為 注冊事件

三要素
1.事件源：觸發(fā)事件的元素 按鈕
2.事件類型：click點擊事件 mouseenter鼠標(biāo)經(jīng)過
3.要執(zhí)行的函數(shù)：事件觸發(fā)了，要做啥，需要將代碼寫在該函數(shù)里面 alert('我被點了！')

• 事件監(jiān)聽版本
  DOM L0： 事件源.on事件 = function() { }
  DOM L2： 事件源.addEventListener(事件， 事件處理函數(shù))
  L0 使用on方式注冊存在的缺點：存有覆蓋問題
  推薦注冊事件使用L2 addEventListener 不存在覆蓋問題

• 事件類型
  鼠標(biāo)事件：1.click 鼠標(biāo)點擊 2.mouseenter 鼠標(biāo)經(jīng)過 3.mouseleave 鼠標(biāo)離開
  焦點事件：1.focus 獲得焦點 2.blur 失去焦點
  鍵盤事件：1.Keydown 鍵盤按下觸發(fā) 2.Keyup 鍵盤抬起觸發(fā)
  文本事件：input 用戶輸入事件

二、高階函數(shù)

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

• 函數(shù)表達式
  本質(zhì)： 把匿名函數(shù)賦值給變量

        let fn = function () {
            console.log('這就是函數(shù)表達式')
        }
        // console.log(fn)
        fn()  //調(diào)用函數(shù)

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

        //1.注冊事件   回調(diào)函數(shù)（大白話：回頭在調(diào)用的函數(shù)）
        document.addEventListener('click', function () {
            // 該事件處理函數(shù)其實就是個回調(diào)函數(shù)
            console.log('哈哈')
        })


        // 2.定時器
        setInterval(function () {
            // 這個函數(shù)就是個回調(diào)函數(shù)
        }, 1000)        

三、環(huán)境對象-----this

函數(shù)內(nèi)部，有一個特殊的變量 this ，稱之為 環(huán)境對象。

事件處理函數(shù)中的this指向事件源

四、編程思想-------排他思想

排他思想：干掉所有人，復(fù)活我自己

• 案例：需求--點擊按鈕，讓當(dāng)前點擊的按鈕高亮（添加pink類名），其他元素不能高亮（移除pink類名）
  分析：
  1.先干掉所有人：把所有的按鈕的pink類名給移出掉；所有的按鈕 btns 偽數(shù)組 for循環(huán)遍歷；2.再復(fù)活我自己；我自己 ==> 事件源 （觸發(fā)事件的元素）

• 案例升級：
  排他思想做法2-升級（實際案例比較常用）
  優(yōu)化做法：有局限性（適合的是高亮的一開始只有一個）
  步驟1：先找到高亮的元素，移出掉高亮的類名pink
  // querySelector('css選擇器') 如果是類名，點別落下
  // classList.remove('類名') // 不需要點
  document.querySelector('.pink').classList.remove('pink')
  步驟2：把當(dāng)前點擊的元素添加上pink類名進行高亮
  this.classList.add('pink')