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>
![](https://img.laitimes.com/img/__Qf2AjLwojIjJCLyojI0JCLicmbw5SZ1EmZ2IjZlRTNiZWN1E2MzMmYmVjNzETYyM2M0QTYj9CX0JXZ252bj91Ztl2Lc52YucWbp5GZzNmLn9Gbi1yZtl2Lc9CX6MHc0RHaiojIsJye.png)
相對于浏覽器視窗你點選的坐标點
-
和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
- 在我點選某一個按鍵的時候判斷一下這三個鍵有沒有按下,有就是組合了,沒有就是沒有組合
- 事件對象裡面也為我們提供了三個屬性
-
:alt 鍵按下得到 true,否則得到 falsealtKey
-
:shift 鍵按下得到 true,否則得到 falseshiftKey
-
:ctrl 鍵按下得到 true,否則得到 falsectrlKey
-
- 我們就可以通過這三個屬性來判斷是否按下了
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 裡面要使用
事件監聽
-
: 非 IE 7 8 下使用addEventListener
- 文法:
元素.addEventListener('事件類型', 事件處理函數, 冒泡還是捕獲)
oDiv.addEventListener('click', function () {
console.log('我是第一個事件')
}, false)
oDiv.addEventListener('click', function () {
console.log('我是第二個事件')
}, false)
-
- 當你點選 div 的時候,兩個函數都會執行,并且會按照你注冊的順序執行
- 先列印
再列印我是第一個事件
我是第二個事件
- 注意: 事件類型的時候不要寫 on,點選事件就是 click,不是 onclick
-
:IE 7 8 下使用attachEvent
- 文法:
元素.attachEvent('事件類型', 事件處理函數)
oDiv.attachEvent('onclick', function () {
console.log('我是第一個事件')
})
oDiv.attachEvent('onclick', function () {
console.log('我是第二個事件')
})
-
- 當你點選 div 的時候,兩個函數都會執行,并且會按照你注冊的順序倒叙執行
- 先列印
再列印我是第二個事件
我是第一個事件
- 注意: 事件類型的時候要寫 on,點選事件就行 onclick
兩個方式的差別
- 注冊事件的時候事件類型參數的書寫
-
: 不用寫 onaddEventListener
-
: 要寫 onattachEvent
-
- 參數個數
-
: 一般是三個常用參數addEventListener
-
: 兩個參數attachEvent
-
- 執行順序
-
: 順序注冊,順序執行addEventListener
-
: 順序注冊,倒叙執行attachEvent
-
- 适用浏覽器
-
: 非 IE 7 8 的浏覽器addEventListener
-
: IE 7 8 浏覽器attachEvent
-
千鋒HTML5學院:JavaScript學習筆記(十六)-- Event事件(下)zhuanlan.zhihu.com