DOM事件基礎
- 事件監聽
- 事件類型
- 事件對象
?一.事件監聽
① 概念：就是讓程序檢測是否有事件發生，一旦有事件觸發，就立即調用一個函數做出響應，也成為綁定事件或者注冊事件
② 語法：元素對象.addEventListener('事件類型'， 要執行的函數)
③ 事件監聽三要素：
? （1）事件源：哪個DOM元素被事件觸發了，要獲取dom元素
? （2）事件類型：用什么方式觸發，比如鼠標單擊click, 鼠標經過 mouseover等
? （3）事件調用的函數：要做什么事
④ 注意：
- 事件類型要加引號
- 函數是觸發一次就執行一次
const btn = document.querySelector('button')btn.addEventListener('click', function() {alert('你好呀')
})⑤ 事件監聽版本（拓展）
-
DOM L0? ??
? ? 事件源.on事件 = function(){}
-
DOM L2
? ? 事件源.addEventListenner(事件，事件處理函數)
- 區別
? ? on 方式會被覆蓋，addEventListenner 方式可綁定多次，擁有事件更多特性，推薦使用
二.事件類型
① 鼠標事件：鼠標觸發
- click 鼠標點擊
- mouseenter 鼠標經過
- mouseleave 鼠標離開
const div = document.querySelector('div')
// 鼠標經過
div.addEventListener('mouseenter', function () {console.log('hello')
})
// 鼠標離開
div.addEventListener('mouseleave', function () {console.log('走了')
})② 焦點事件：表單獲得光標
- focus 獲得焦點
- blur 失去焦點
// 獲得焦點和失去焦點
const input = document.querySelector('input')
input.addEventListener('focus', function () {console.log('獲得焦點')
})input.addEventListener('blur', function () {console.log('失去焦點')
})③ 鍵盤事件：鍵盤觸發
- keydown 鍵盤按下觸發
- keyup 鍵盤抬起觸發
const input = document.querySelector('input')
input.addEventListener('keydown', function () {console.log('鍵盤按下')
})
input.addEventListener('keyup', function () {console.log('鍵盤彈起')
})④ 文本事件：表單輸入觸發
- input 用戶輸入事件
const input = document.querySelector('input')
input.addEventListener('input', function () {console.log(input.value)
})?三.事件對象
?1.獲取事件對象
?2.事件對象常用屬性
3.1 獲取事件對象
① 事件對象概念
- 也是個對象，這個對象有事件觸發時的相關信息
② 使用場景
- 可以判斷用戶按下哪個鍵或者點擊了哪個元素
③ 如何獲取
- 在事件綁定的回調函數的第一個參數就是事件對象
- 一般命名為event，ev， e
?④ 語法
元素.addEventListener('click', function(e) {
})3.2 事件對象屬性
- type? ? ? 獲取當前的事件類型
- clientX/clientY? ? 獲取光標相對于瀏覽器可見窗口左上角的位置
- offsetX/offsetY? ?獲取光標相對于DOM元素左上角的位置
- key? ? ?用戶按下的鍵盤鍵的值（不推薦）
四.環境對象?
- 環境對象：指的是函數內部特殊的變量this,代表當前函數運行時所處的環境
- 作用：弄清楚this的指向，可以使代碼更加簡潔
- 函數的調用方式不同，this指代的對象也不同
- 【粗略規則】誰調用this就指向誰
五.回調函數
① 概念：如果將函數A作為參數傳遞給函數B時，將函數A稱為回調函數
② 使用匿名函數作為回調函數比較常見
