input回車觸發事件_JavaScript學習筆記（十五）—Event事件（上）

EVENT(上)

• 之前我們簡單的了解過一些事件，比如 onclick / onload / onscroll / ...
• 今天開始，我們詳細的學習一些 事件

什麼是事件

• 一個事件由什麼東西組成
• 觸發誰的事件：事件源
• 觸發什麼事件：事件類型
• 觸發以後做什麼：事件處理函數

var oDiv = document.querySelector('div')​oDiv.onclick = function () {}// 誰來觸發事件 => oDiv => 這個事件的事件源就是 oDiv// 觸發什麼事件 => onclick => 這個事件類型就是 click// 觸發之後做什麼 => function () {} => 這個事件的處理函數
           

• 我們想要在點選 div 以後做什麼事情，就把我們要做的事情寫在事件處理函數裡面

var oDiv = document.querySelector('div')​oDiv.onclick = function () { console.log('你點選了 div')}
           

• 當我們點選 div 的時候，就會執行事件處理函數内部的代碼
• 每點選一次，就會執行一次事件處理函數

事件對象

• 什麼是事件對象？
• 就是當你觸發了一個事件以後，對該事件的一些描述資訊
• 例如：
• 你觸發一個點選事件的時候，你點在哪個位置了，坐标是多少
• 你觸發一個鍵盤事件的時候，你按的是哪個按鈕
• ...
• 每一個事件都會有一個對應的對象來描述這些資訊，我們就把這個對象叫做 事件對象
• 浏覽器給了我們一個 黑盒子，叫做 window.event，就是對事件資訊的所有描述
• 比如點選事件
• 你點在了 0，0 位置，那麼你得到的這個事件對象裡面對應的就會有這個點位的屬性
• 你點在了 10, 10 位置，那麼你得到的這個事件對象裡面對應的就會有這個點位的屬性
• ...

oDiv.onclick = function () { console.log(window.event.X軸坐标點資訊) console.log(window.event.Y軸坐标點資訊)}
           

• 這個玩意很好用，但是一般來說，好用的東西就會有 相容性問題
• 在 IE低版本 裡面這個東西好用，但是在 高版本IE 和 Chrome 裡面不好使了
• 我們就得用另一種方式來擷取 事件對象
• 在每一個事件處理函數的行參位置，預設第一個就是 事件對象

oDiv.onclick = function (e) { // e 就是和 IE 的 window.event 一樣的東西 console.log(e.X軸坐标點資訊) console.log(e.Y軸坐标點資訊)}
           

• 綜上所述，我們以後在每一個事件裡面，想擷取事件對象的時候，都用相容寫法

oDiv.onclick = function (e) { e = e || window.event console.log(e.X軸坐标點資訊) console.log(e.Y軸坐标點資訊)}
           

點選事件的光标坐标點擷取

• 剛才既然說了，可以擷取到坐标點，那麼接下來我們就學習一下怎麼擷取坐标點
• 我們的每一個點選事件的坐标點都不是一對，因為要有一個相對的坐标系
• 例如：
• 相對事件源(你點選的元素)
• 相對頁面
• 相對浏覽器視窗
• ...
• 因為都不一樣，是以我們擷取的 事件對象 裡面的屬性也不一樣

相對于你點選的元素來說

• offsetX 和 offsetY
• 是相對于你點選的元素的邊框内側開始計算

相對于浏覽器視窗你點選的坐标點

• clientX 和 clientY
• 是相對于浏覽器視窗來計算的，不管你頁面滾動到什麼情況，都是根據視窗來計算坐标

相對于頁面你點選的坐标點

• pageX 和 pageY
• 是相對于整個頁面的坐标點，不管有沒有滾動，都是相對于頁面拿到的坐标點

• 根據頁面左上角來說
• margin-left 是 30
• 左邊框是 10
• 左右 padding 各是 20
• 内容區域是 300
• pageX : 300 + 20 + 20 + 10 + 30 = 380
• margin-top 是 20
• 上邊框是 10
• 上下 padding 各是 20
• 内容區域是 300
• pageY : 300 + 20 + 20 + 10 + 20 = 270

點選按鍵資訊(了解)

• 我們的滑鼠一般都有兩個按鍵，一個左鍵一個右鍵
• 我們的事件對象裡面也有這個資訊，确定你點選的是左鍵還是右鍵
• 我們使用 事件對象.button 來擷取資訊
• 0 為滑鼠左鍵，2 為滑鼠右鍵

常見的事件(了解)

• 我們在寫頁面的時候經常用到的一些事件
• 大緻分為幾類，浏覽器事件 / 滑鼠事件 / 鍵盤事件 / 表單事件 / 觸摸事件
• 不需要都記住，但是大概要知道

浏覽器事件

• load ： 頁面全部資源加載完畢
• scroll ： 浏覽器滾動的時候觸發
• ...

滑鼠事件

• click ：點選事件
• dblclick ：輕按兩下事件
• contextmenu ： 右鍵單擊事件
• mousedown ：滑鼠左鍵按下事件
• mouseup ：滑鼠左鍵擡起事件
• mousemove ：滑鼠移動
• mouseover ：滑鼠移入事件
• mouseout ：滑鼠移出事件
• mouseenter ：滑鼠移入事件
• mouseleave ：滑鼠移出事件
• ...

鍵盤事件

• keyup ： 鍵盤擡起事件
• keydown ： 鍵盤按下事件
• keypress ： 鍵盤按下再擡起事件
• ...

表單事件

• change : 表單内容改變事件
• input : 表單内容輸入事件
• submit : 表單送出事件
• ...

觸摸事件

• touchstart ： 觸摸開始事件
• touchend ： 觸摸結束事件
• touchmove ： 觸摸移動事件
• ...

鍵盤事件

• 剛才了解了一下滑鼠事件，現在來聊聊鍵盤事件
• 我們在鍵盤事件裡面最主要的就是要做兩個事情
• 判斷點選的是哪個按鍵
• 有沒有組合按鍵，shift + a / ctrl + b / ...
• 我們先要明确一個問題，就是是不是所有元素都可以綁定鍵盤事件
• 我們說事件有一個關鍵的東西是，該事件是由誰來觸發的
• 一個 div 元素在頁面上，我怎麼能讓一個鍵盤事件觸發在 div 上
• 是以說，我們一般隻給能在頁面上選中的元素(表單元素) 和 document 來綁定鍵盤事件

document.onkeyup = function () { // code.. } oInput.onkeyup = function () { // code.. }
           

确定按鍵

• 我們的鍵盤上每一個按鍵都有一個自己獨立的編碼
• 我們就是靠這個編碼來确定我們按下的是哪個按鍵的
• 我們通過 事件對象.keyCode 或者 事件對象.which 來擷取
• 為什麼要有兩個呢，是因為 FireFox2.0 不支援 keycode 是以要用 whic

document.keyup = function (e) { // 事件對象的相容寫法 e = e || window.event  // 擷取鍵盤碼的相容寫法 var keyCode = e.keyCode || e.which  console.log(keyCode)}
           

常見的鍵盤碼(了解)

• 8： 删除鍵(delete)
• 9： 制表符(tab)
• 13： Enter鍵(ebter)
• 16： 上檔鍵(shift)
• 17： ctrl 鍵
• 18： alt 鍵
• 27： 取消鍵(esc)
• 32： 空格鍵(space)
• ...

組合按鍵

• 組合案件最主要的就是 alt / shift / ctrl 三個按鍵
• 在我點選某一個按鍵的時候判斷一下這三個鍵有沒有按下，有就是組合了，沒有就是沒有組合
• 事件對象裡面也為我們提供了三個屬性
• altKey ：alt 鍵按下得到 true，否則得到 false
• shiftKey ：shift 鍵按下得到 true，否則得到 false
• ctrlKey ：ctrl 鍵按下得到 true，否則得到 false

• 我們就可以通過這三個屬性來判斷是否按下了

document.onkeyup = function (e) { e = e || window.event keyCode = e.keyCode || e.which  if (e.altKey && keyCode === 65) { console.log('你同時按下了 alt 和 a')  }}
           

事件的綁定方式

• 我們現在每一個注冊事件都是使用 onxxx 的方式
• 但是這個方式不是很好，隻能給一個元素注冊一個事件
• 一旦寫了第二個事件，那麼第一個就被覆寫了

oDiv.onclick = function () { console.log('我是第一個事件')}​oDiv.onclick = function () { console.log('我是第二個事件')}
           

• 當你點選的時候，隻會執行第二個，第一個就沒有了
• 我們還有一種事件監聽的方式去給元素綁定事件
• 使用 addEventListener 的方式添加
• 這個方法不相容，在 IE 裡面要使用 attachEvent

事件監聽

• addEventListener : 非 IE 7 8 下使用
• 文法： 元素.addEventListener('事件類型'， 事件處理函數， 冒泡還是捕獲)

oDiv.addEventListener('click', function () { console.log('我是第一個事件')}, false)​oDiv.addEventListener('click', function () { console.log('我是第二個事件')}, false)
           

• 當你點選 div 的時候，兩個函數都會執行，并且會按照你注冊的順序執行
• 先列印 我是第一個事件 再列印 我是第二個事件
• 注意： 事件類型的時候不要寫 on，點選事件就是 click，不是 onclick
• attachEvent ：IE 7 8 下使用
• 文法： 元素.attachEvent('事件類型'， 事件處理函數)

oDiv.attachEvent('onclick', function () { console.log('我是第一個事件')})​oDiv.attachEvent('onclick', function () { console.log('我是第二個事件')})
           

• 當你點選 div 的時候，兩個函數都會執行，并且會按照你注冊的順序倒序執行
• 先列印 我是第二個事件 再列印 我是第一個事件
• 注意： 事件類型的時候要寫 on，點選事件就行 onclick

兩個方式的差別

• 注冊事件的時候事件類型參數的書寫
• addEventListener ： 不用寫 on
• attachEvent ： 要寫 on
• 參數個數
• addEventListener ： 一般是三個常用參數
• attachEvent ： 兩個參數
• 執行順序
• addEventListener ： 順序注冊，順序執行
• attachEvent ： 順序注冊，倒序執行
• 适用浏覽器
• addEventListener ： 非 IE 7 8 的浏覽器
• attachEvent ： IE 7 8 浏覽器