【重溫JS】鞏固基礎-day12-事件對象(一)

這是我參與8月更文挑戰的第 12天，活動詳情查看：8 月更文挑戰css

☆☆☆ 今天的內容(event 事件對象) 重要!! ☆☆☆web

可做爲初學者的學習路線, 可參考一下, 學習進度也不是特別趕! 持續更新,數組

用本身的理解, 簡單又全面歸納基礎知識點, 大部份內容爲白話文內容, 基礎中的基礎方便加深理解!瀏覽器

鞏固學習 JavaScript 基礎知識, 加深理解記憶, 打牢地基才能築高樓! 加油markdown

開始今天的學習吧! 認真對待!!app

一、整理昨天學習的相關知識點

內置對象：
- Array reverse pop push shift unshift splice() arr.length = 3 join
- String split substr(start,length) substring(start,end) indexOf() lastIndexOf() replace() trim()
- Math random() round ceil floor
- Date 獲取日期設置日期 getMonth()
BOM 和 DOM
- BOM ： window---location history event document navigator screen
- document ：操做頁面元素增刪改查
  - 增： createElement appendChild insertBefore
  - 刪 : remove() removeChild()
  - 改：
    - 改樣式 : obj.style.樣式 obj.className ----- 操做樣式類 obj.style.cssText = "color:red"dom
    - 改內容 : innerHTML innerText value函數
    - 改屬性 post
obj.屬性 obj.getAttribute() obj.setAttribute()
- 查：
getElementBy....
克隆：cloneNode(true)

二、event 事件對象

事件 ：對頁面元素的某種操做就是一個事件
事件對象 ：當對頁面元素進行某個事件操做時， onclick onkeyup.... 會產生一個對象這樣的對象叫作事件對象 event（前提：產生某個事件）
事件對象兼容 ：

var e = evt || event
複製代碼

三、鼠標事件對象的座標屬性

clientX/clientY 距離可視窗口的橫向和縱向座標
pageX/pageY 距離文檔頂部和左側的橫向和縱向座標
offsetX / offsetY 距離操做元素的內部偏移量

四、鼠標事件對象的 button 按鈕屬性

值有三種狀況：

左鍵 0
滾輪 1
右鍵 2

ie 結果：

左鍵： 1
滾輪： 4
右鍵： 2

5. （擴展）寫一個函數兼容 button 屬性值

封裝函數中 evt 參數指的是事件參數學習

function getButton(evt) {

  var e = evt || event // 判斷瀏覽器
  if (evt) {
    // 高版本
    return e.button
  } else if (window.event) {
    // ie 瀏覽器
    switch (e.button) {
      case 1:
        return 0
      case 4:
        return 1
      case 2:
        return 2
    }
  }
}
複製代碼

預告: everybody go 加油追夢人!

【預告】: 繼續複習事件對象的更多知識點.. 也不能一口吃撐胖子吖..-

學習就是一個不斷進行的過程, 堅持下去, 定有收穫!

日積月累, 鞏固基礎, 早進大廠!

堅持很不容易, 堅持下來更不容易, 你真棒!

Calm Down & Carry On!