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
- 是相對于你點選的元素的邊框内側開始計算
<style>
* {
margin: 0;
padding: 0;
}
div {
width: 300px;
height: 300px;
padding: 20px;
border: 10px solid #333;
margin: 20px 0 0 30px;
}
</style>
<body>
<div></div>
<script>
var oDiv = document.querySelector('div')
// 注冊點選事件
oDiv.onclick = function (e) {
// 事件對象相容寫法
e = e || window.event
console.log(e.offsetX)
console.log(e.offsetY)
}
</script>
</body>
相對于浏覽器視窗你點選的坐标點
-
clientX
clientY
- 是相對于浏覽器視窗來計算的，不管你頁面滾動到什麼情況，都是根據視窗來計算坐标
<style>
* {
margin: 0;
padding: 0;
}
body {
width: 2000px;
height: 2000px;
}
div {
width: 300px;
height: 300px;
padding: 20px;
border: 10px solid #333;
margin: 20px 0 0 30px;
}
</style>
<body>
<div></div>
<script>
var oDiv = document.querySelector('div')
// 注冊點選事件
oDiv.onclick = function (e) {
// 事件對象相容寫法
e = e || window.event
console.log(e.clientX)
console.log(e.clientY)
}
</script>
</body>
相對于頁面你點選的坐标點
-
pageX
pageY
- 是相對于整個頁面的坐标點，不管有沒有滾動，都是相對于頁面拿到的坐标點
<style>
* {
margin: 0;
padding: 0;
}
body {
width: 2000px;
height: 2000px;
}
div {
width: 300px;
height: 300px;
padding: 20px;
border: 10px solid #333;
margin: 20px 0 0 30px;
}
</style>
<body>
<div></div>
<script>
var oDiv = document.querySelector('div')
// 注冊點選事件
oDiv.onclick = function (e) {
// 事件對象相容寫法
e = e || window.event
console.log(e.pageX)
console.log(e.pageY)
}
</script>
</body>
- 根據頁面左上角來說
- 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
- 為滑鼠左鍵，
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
-
shiftKey
-
ctrlKey
-
- 我們就可以通過這三個屬性來判斷是否按下了
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
- 這個方法不相容，在 IE 裡面要使用
事件監聽
-
addEventListener
- 文法：
元素.addEventListener('事件類型'， 事件處理函數， 冒泡還是捕獲)
oDiv.addEventListener('click', function () {
console.log('我是第一個事件')
}, false)
oDiv.addEventListener('click', function () {
console.log('我是第二個事件')
}, false)
-
- 當你點選 div 的時候，兩個函數都會執行，并且會按照你注冊的順序執行
- 先列印
我是第一個事件
我是第二個事件
- 注意： 事件類型的時候不要寫 on，點選事件就是 click，不是 onclick
-
attachEvent
- 文法：
元素.attachEvent('事件類型'， 事件處理函數)
oDiv.attachEvent('onclick', function () {
console.log('我是第一個事件')
})
oDiv.attachEvent('onclick', function () {
console.log('我是第二個事件')
})
-
- 當你點選 div 的時候，兩個函數都會執行，并且會按照你注冊的順序倒叙執行
- 先列印
我是第二個事件
我是第一個事件
- 注意： 事件類型的時候要寫 on，點選事件就行 onclick
兩個方式的差別
- 注冊事件的時候事件類型參數的書寫
-
addEventListener
-
attachEvent
-
- 參數個數
-
addEventListener
-
attachEvent
-
- 執行順序
-
addEventListener
-
attachEvent
-
- 适用浏覽器
-
addEventListener
-
attachEvent
-
此文轉載自：千鋒HTML5學院
原文連結：JavaScript學習筆記（十五）-- Event事件（上）
Eric：JavaScript學習筆記（十四）-- DOM(下）zhuanlan.zhihu.com