事件監聽

概念

事件：事件是在程式設計時系統內發生的動作或者發生的事情

事件監聽：是讓程式檢測是否有事件產生，一旦有事件觸發，就立即呼叫一個函式做出響應，也稱為 繫結事件或者註冊事件

使用

語法：元素物件.addEventListener('事件型別', 函式)

事件監聽三要素：

• 事件源： 觸發事件的元素
• 事件型別： 觸發事件的動作/行為，比如滑鼠單擊 click、滑鼠經過 mouseover 等
• 事件呼叫的函式： 要做什麼事,執行程式碼

注意：

1. 事件型別要加引號
2. 函式是觸發之後再去執行，每次觸發都會執行一次
   • 函式寫法1：function() {執行程式碼}
   • 函式寫法2：函式名 注意：不加小括號，加小括號立即執行，這裡是觸發執行

<input type="button" value="點選">
  <script>

    // 獲取元素
    const btn = document.querySelector('input')
    btn.addEventListener('click',function () {
      console.log('hellow~')
    })
  </script>

完成事件監聽分成3個步驟：

1. 獲取 DOM 元素
2. 通過 addEventListener 方法為 DOM 節點新增事件監聽
3. 等待事件觸發，如使用者點選了某個按鈕時便會觸發 click
   事件型別，事件觸發後，相對應的回撥函式會被執行

大白話描述：所謂的事件無非就是找個機會（事件觸發）呼叫一個函式（回撥函式）。

事件型別

滑鼠事件

滑鼠觸發

1. click:單擊事件,dblclick：雙擊事件
2. mouseenter:當滑鼠移動到元素上時，發生此事件
3. mouseleave:當用戶將滑鼠指標移出元素時，發生此事件
4. mousemove:當指標在元素上方移動時，發生此事件。
5. mouseup:當用戶在元素上釋放滑鼠按鈕時，發生此事件。
6. mousedown:當用戶在元素上按下滑鼠按鈕時，發生此事件。
7. mouseover:當滑鼠移動到元素或其中的子元素上時，發生此事件
8. mouseout:當用戶將滑鼠指標移出元素或其中的子元素時，發生此事件

mouseover 和 mouseout 會有冒泡效果(子到父)

mouseenter 和 mouseleave 沒有冒泡效果 (推薦)

<div>
    <p>123</p>
  </div>

<script>
     const div = document.querySelector("div")

    //  監聽事件
    // mouseenter
     div.addEventListener('mouseenter', function () {
       div.style.background = 'skyblue'
     })

     // mouseleave
     div.addEventListener('mouseleave', function () {
       div.style.background = 'pink'
     })

     // mousemove
     div.addEventListener('mousemove', function () {
      //  console.log( Math.random())
     })

     // mousedown
     div.addEventListener('mousedown', function () {
       console.log( 'mousedown')
     }) 

     // mouseup
     div.addEventListener('mouseup', function () {
       console.log('mouseup')
     }) 
     
     // mouseover
     div.addEventListener('mouseover', function () {
       div.style.background = 'blue'
     })

     // mouseout
     div.addEventListener('mouseout', function () {
       div.style.background = 'green'
     })
  </script>

焦點事件

表單獲得游標

focus 獲得焦點

blur 失去焦點

  <input type="text">
  <script>
    const input = document.querySelector('input')

    // focus:獲得焦點
    input.addEventListener('focus',function () {
      input.style.background = 'red'
    })

    // blur：失去焦點
    input.addEventListener('blur',function () {
      input.style.background = 'green'
    })
  </script>

鍵盤事件

鍵盤觸發

Keydown 鍵盤按下觸發

Keyup 鍵盤抬起觸發

  <script>
    document.addEventListener('mousedown',function () {
      console.log('mousedown 鍵盤按下')
    })

    document.addEventListener('mouseup',function () {
      console.log('mouseup 鍵盤抬起')
    })
  </script>

文字事件

表單輸入觸發

input 使用者輸入事件

  <input type="text">
  <script>
    const input = document.querySelector('input')
    // input:文字事件
    input.addEventListener('input',function () {
      console.log(input.value)
    })
  </script>

事件物件

概念

事件物件：事件觸發時產生的物件，這個物件裡有事件觸發時的相關資訊

獲取事件物件

在事件繫結的回撥函式的第一個引數就是事件物件

一般命名為event、ev、e

事件物件常用屬性

1. type：獲取當前的事件型別
2. clientX/clientY獲取游標相對於瀏覽器可見視窗左上角的位置
3. offsetX/offsetY：獲取游標相對於當前DOM元素左上角的位置

<style>
    body {
      height: 3000px;
    }
  </style>

<script>
    // e:接收的是事件物件

    document.addEventListener('click', function (e) {
      // e.type:事件型別
      console.log(e.type)
      // clientX,clientY:滑鼠相對於瀏覽器（可視視窗）左上角的位置
      console.log(e.clientX,e.clientY)
      // pageX,pageY:滑鼠相對於文件左上角的位置
      console.log(e.pageX,e.pageY)
      // offsetX,offsetY:滑鼠相對於當前DOM元素左上角的位置
      console.log(e.offsetX,e.offsetY)
    })

4. key：使用者按下的鍵盤鍵的值

   現在不提倡使用keyCode

    document.addEventListener('keydown', function (e) {
      // key：使用者按下的鍵盤鍵的值
       console.log(e.key)
      if ( e.key === 'q' ) {
        console.log('qqqq技能')
      }
      
      // 現在不提倡使用keyCode
      // ASCII
      console.log(e.keyCode)
    })

環境物件

概念

環境物件：指的是函式內部特殊的變數 this ，它代表著當前函式執行時所處的環境

this的指向:呼叫函式的元素

1. 函式的呼叫方式不同，this 指代的物件也不同，事件處理函式中的this，指代事件源
2. 【誰呼叫， this 就是誰】 是判斷 this 指向的粗略規則
3. 直接呼叫函式，其實相當於是 window.函式，所以 this 指代 window

<div>123</div>
  <p>段落</p>
  <script>
    const div = document.querySelector('div')
    const p = document.querySelector('p')

    // 事件處理函式中的this，代表事件源
    div.addEventListener('click', function () {
      console.log(this)
    })

    p.addEventListener('click', function () {
      console.log(this)
    })

    document.addEventListener('click', function () {
      console.log(this)
    })

  </script>

回撥函式

概念

如果將函式 A 做為引數傳遞給函式 B 時，我們稱函式 A 為回撥函式，函式B為高階函式

簡單理解： 當一個函式當做引數來傳遞給另外一個函式的時候，這個函式就是回撥函式

    function fn ( n ) {
      console.log(n)
    }

    function getNum() {
      console.log('aaa')
    }
    fn( 3 )
    fn('hellow')
    fn(getNum)

函式 getNum 做引數傳給了 fn 函式,fn 就是所謂的回撥函數了！！！

我們回顧一下間歇函式 setInterval

<script>
	function fn() {
    console.log('我是回撥函式...');
  }
  // 呼叫定時器
  setInterval(fn, 1000);
</script>

fn 函式做為引數傳給了 setInterval ，這便是回撥函式的實際應用了，結合剛剛學習的函式表示式上述程式碼還有另一種更常見寫法。

<script>
  // 呼叫定時器，匿名函式做為引數
  setInterval(function () {
    console.log('我是回撥函式...');
  }, 1000);
</script>

結論：

1. 回撥函式本質還是函式，只不過把它當成引數使用
2. 使用匿名函式做為回撥函式比較常見

函式分為

• 具名函式：function 函式名() {}

  呼叫函式：函式名()

• 匿名函式： function () {}

  匿名函式呼叫：

  1. 賦值給變數（函式表示式） const fn = function () {}
  2. 自呼叫函式/自執行函式/立即執行函式

​ ;(function () {}())

​ ;(function () {})()