前言
- 從事多年開發(fā)禁炒，也經(jīng)常性的給元素添加事件而咆，但是最多的就是
click事件，回想起來很多事件都沒有仔細(xì)的用過幕袱，也沒有添加過屬性暴备。 - 所以，最近整理一些javascript原生的事件们豌，希望能夠和大家一起學(xué)習(xí)涯捻。
基礎(chǔ)：事件的三個(gè)階段
- 1?? 事件捕獲階段
- 2?? 執(zhí)行階段（執(zhí)行當(dāng)前元素的注冊(cè)事件）
- 3?? 事件冒泡階段。本節(jié)通過一個(gè)示例玛痊，對(duì)三個(gè)階段加以總結(jié)
1.添加事件監(jiān)聽 addEventListener
addEventListener(type,listener,userCapture)可以向window或者想要添加監(jiān)聽的dom元素添加事件監(jiān)聽
- type:事件名稱 click mouseover mouseout
- listener:事件注冊(cè)函數(shù)
- userCapture：可選汰瘫，bool類型，默認(rèn)為false
示例：頁(yè)面中嵌套三個(gè)盒子擂煞，box1,box2,box3(從外到內(nèi)混弥，依次是紅色，綠色对省，藍(lán)色),給三個(gè)盒子都注冊(cè)點(diǎn)擊事件蝗拿，輸出三個(gè)盒子的id，
盒子類型
當(dāng)userCapture屬性為false時(shí)候蒿涎，點(diǎn)擊藍(lán)色盒子時(shí)哀托，結(jié)果如下：
事件冒泡
當(dāng)
userCapture屬性為true時(shí)候，點(diǎn)擊藍(lán)色盒子時(shí)劳秋，結(jié)果如下：
事件捕獲
分析：
當(dāng)userCapture屬性為false時(shí)候仓手，從里往外執(zhí)行，這種執(zhí)行效果稱為事件冒泡玻淑，就像一個(gè)氣泡從水里最深處往外冒一樣嗽冒。事件冒泡從里面往外面泡， box3-->box2-->box1.
給addEventListener的userCapture屬性賦值為true补履，選執(zhí)行最外層的box1,再執(zhí)行box2,box3添坊，這種從外向里的過程是事件捕獲。
結(jié)論：
在上述代碼中箫锤，給addEventListener的userCapture屬性賦值為true贬蛙，此時(shí)事件階段是事件捕獲階段雨女。
當(dāng)addEventListener的userCapture屬性賦值為false時(shí)，此時(shí)事件階段是事件冒泡階段阳准。
只要是某個(gè)元素的監(jiān)聽被觸發(fā)了氛堕，都會(huì)經(jīng)歷事件的三個(gè)階段，只不過監(jiān)聽的位置不一樣而已野蝇。
相關(guān)代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#box1 {
width: 200px;
height: 200px;
background-color: red;
}
#box2 {
width: 150px;
height: 150px;
background-color: green;
}
#box3 {
width: 90px;
height: 90px;
background-color: blue;
}
</style>
</head>
<body>
<div id="box1">
<div id="box2">
<div id="box3"></div>
</div>
</div>
</body>
<script>
let box1 = document.getElementById('box1')
let box2 = document.getElementById('box2')
let box3 = document.getElementById('box3')
var boxs = [box1, box2, box3];
for (var i = 0; i < boxs.length; i++) {
boxs[i].addEventListener('click', outPut, true); //設(shè)置觸發(fā)階段
}
//點(diǎn)擊事件函數(shù)
function outPut(event) {
console.log(event,'===event');
console.log(this.id);
}
</script>
</html>
1.2事件冒泡的好處就是能夠進(jìn)行事件委托
2. event對(duì)象常用的屬性和方法
addEventListener(type,listener,userCapture) 在增加監(jiān)聽的時(shí)候岔擂，listener參數(shù)是可以獲取到event參數(shù)的，里面除了包含基本的信息之外浪耘，還有很多的屬性乱灵，那這些屬性都有什么意思呢？
event屬性
2.1 Event屬性說明
| 屬性名 | 值類型 | 描述 |
|---|---|---|
| altKey | Boolean | 觸發(fā)事件時(shí)是否按下alt鍵【可做組合鍵事件】 |
| bubbles | Boolean | 指的是該事件是否冒泡七冲。和事件處理機(jī)制無關(guān)痛倚。 |
| buttom | Number | 返回當(dāng)事件被觸發(fā)時(shí)，哪個(gè)鼠標(biāo)按鈕被點(diǎn)擊【0 指定鼠標(biāo)左鍵澜躺。2 指定鼠標(biāo)右鍵蝉稳。4指定鼠標(biāo)中鍵】 |
| buttoms | Number | 表示一個(gè)數(shù)字，它表示在鼠標(biāo)事件中哪些按鈕被按下【1 指定鼠標(biāo)左鍵掘鄙。2 指定鼠標(biāo)中鍵耘戚。4 指定鼠標(biāo)右鍵〔倌】 |
這些值可以組合使用收津，例如同時(shí)按下左鍵和右鍵會(huì)得到 3（1 + 2），同時(shí)按下左鍵浊伙、右鍵和滾輪按鈕會(huì)得到 7（1 + 2 + 4）撞秋。??示例：3.1.1
|
||
| cancelable | Boolean | 用于表示事件是否可以被取消。??示例：3.1.2
|
| clientX | Number | 表示鼠標(biāo)事件發(fā)生時(shí)的鼠標(biāo)指針相對(duì)于瀏覽器窗口（視口）左上角的水平坐標(biāo)位置嚣鄙。 |
| clientY | Number | 表示鼠標(biāo)事件發(fā)生時(shí)的鼠標(biāo)指針相對(duì)于瀏覽器窗口（視口）左上角的垂直坐標(biāo)位置吻贿。 |
| ctrlKey | Boolean | 觸發(fā)事件時(shí)是否按下ctrl鍵【可做組合鍵事件】 |
| currentTarget | any | 用于表示事件當(dāng)前正在被處理的元素（可以理解為觸發(fā)事件的元素的父級(jí)元素，事件委托相關(guān)哑子。 而觸發(fā)事件的元素屬性是event.target）舅列。 |
| defaultPrevented | Boolean | 表示事件的默認(rèn)行為是否被取消 該屬性是只讀屬性，不能直接修改其值卧蜓。它僅用于指示事件的默認(rèn)行為是否被取消 ??示例：3.1.3
|
| detail | Number | 表示與鼠標(biāo)事件或滾輪事件相關(guān)的附加信息帐要，【1.對(duì)于點(diǎn)擊事件，則表示連續(xù)點(diǎn)擊的次數(shù)】【2.對(duì)于滾動(dòng)事件來說則表示鼠標(biāo)滾輪事件的滾動(dòng)量烦却，通常表示為正值或負(fù)值】??示例：3.1.4
|
| deltaMode | Number | deltaMode 是 WheelEvent 對(duì)象的一個(gè)屬性宠叼，在 JavaScript 中用于表示鼠標(biāo)滾輪事件中滾動(dòng)量的單位先巴。 |
| deltaX | Number | WheelEvent 對(duì)象的一個(gè)屬性其爵，在 JavaScript 中用于表示鼠標(biāo)滾輪事件中水平方向上的滾動(dòng)量冒冬。 |
| deltaY | Number | WheelEvent 對(duì)象的一個(gè)屬性，在 JavaScript 中用于表示鼠標(biāo)滾輪事件中垂直方向上的滾動(dòng)量摩渺。 |
| deltaZ | Number | WheelEvent 對(duì)象的一個(gè)屬性简烤，在 JavaScript 中用于表示鼠標(biāo)滾輪事件中Z軸方向上的滾動(dòng)量 |
| eventPhase | Number | 表示事件當(dāng)前所處的階段∫』茫【0表示事件尚未觸發(fā)横侦，1表示事件正在處于事件捕獲階段。2示事件正在處于事件捕獲階段绰姻。3.表示事件正在處于事件冒泡階段枉侧。】 |
| isTrusted | Boolean | 表示事件是否由用戶操作觸發(fā)狂芋，并且是否可以被認(rèn)為是可信的 |
| metaKey | Boolean | 用于表示在觸發(fā)事件時(shí)是否按下了操作系統(tǒng)特定的 Meta 鍵（如 Command 鍵或 Windows 鍵）榨馁。【在 macOS 系統(tǒng)中帜矾，Meta 鍵是 Command 鍵翼虫；在 Windows 系統(tǒng)中，Meta 鍵是 Windows 鍵】 |
| movementX | Number | 只讀屬性屡萤，用于獲取鼠標(biāo)從上一個(gè) mousemove 事件到當(dāng)前 mousemove 事件中鼠標(biāo)在水平方向上的移動(dòng)距離珍剑。這個(gè)屬性可以在mousemove事件的事件處理函數(shù)中通過事件對(duì)象（比如 event 或e）來訪問
|
| movementY | Number | 只讀屬性，用于獲取鼠標(biāo)從上一個(gè) mousemove 事件到當(dāng)前 mousemove 事件中鼠標(biāo)在垂直方向上的移動(dòng)距離死陆。這個(gè)屬性可以在mousemove事件的事件處理函數(shù)中通過事件對(duì)象（比如 event 或e）來訪問
|
| pageX | Number | 鼠標(biāo)在頁(yè)面水平坐標(biāo)位置上的位置,從頁(yè)面左上角開始,即是以頁(yè)面為參考點(diǎn),不隨滑動(dòng)條移動(dòng)而變化, |
| pageY | Number | 鼠標(biāo)在頁(yè)面垂直坐標(biāo)位置上的位置,從頁(yè)面左上角開始,即是以頁(yè)面為參考點(diǎn),不隨滑動(dòng)條移動(dòng)而變化, |
| relatedTarget | any |
relatedTarget是一個(gè)事件屬性招拙，用于獲取與事件相關(guān)的目標(biāo)元素或移出的元素。它主要用于鼠標(biāo)事件（如 mouseover 和 mouseout）和焦點(diǎn)事件（如 focusin和focusout） |
| screenX | Number | 鼠標(biāo)相對(duì)于用戶顯示器屏幕左上角的X軸的位置措译。??示例：3.1.5
|
| screenY | Number | 鼠標(biāo)相對(duì)于用戶顯示器屏幕左上角的Y軸的位置迫像。 |
| shiftKey | Boolean | 觸發(fā)事件時(shí)是否按下shift鍵【可做組合鍵事件】 |
| target | any | 該事件被傳送的對(duì)象。??詳情查看表target詳解
|
| timeStamp | Number | 用于獲取事件發(fā)生的時(shí)間戳瞳遍。時(shí)間戳表示從特定的參考點(diǎn)（通常是1970年1月1日UTC時(shí)間午夜）開始計(jì)算的毫秒數(shù)闻妓。 |
| type | String | 監(jiān)聽事件的類型 |
| view | Wiindow | 用于獲取觸發(fā)事件的窗口的相關(guān)信息。 |
| getModifierState | Function | 是 鍵盤事件對(duì)象的一個(gè)方法掠械，在 JavaScript 中用于檢查鍵盤事件中的修改鍵（如 Shift由缆、Ctrl、Alt 和 Meta/Command 鍵）的狀態(tài)猾蒂。??示例：3.1.9
|
| isDefaultPrevented | Function | 用于檢查事件是否調(diào)用了preventDefault()方法來阻止默認(rèn)行為均唉。調(diào)用event.isDefaultPrevented()會(huì)返回一個(gè)布爾值，如果默認(rèn)行為已被阻止肚菠，則返回true舔箭，否則返回false。??示例：3.1.10
|
| isPropagationStopped | Function | 用于檢查事件是否已經(jīng)停止了事件傳播。??示例：3.1.11
|
2.2 target 屬性說明
- target 事件屬性可返回事件的目標(biāo)節(jié)點(diǎn)（觸發(fā)該事件的節(jié)點(diǎn)）层扶，如生成事件的元素箫章、文檔或窗口
- target 內(nèi)是目標(biāo)節(jié)點(diǎn)的屬性有很多，這里截取最常用的幾個(gè)
| 屬性名 | 值類型 | 描述 |
|---|---|---|
| nodeName | String | 獲取事件觸發(fā)元素的標(biāo)簽 |
| id | String | 觸發(fā)元素的id名稱 |
| className | string | 觸發(fā)元素的類名 |
| innerHTML | String | 觸發(fā)元素的內(nèi)容,包括子元素的dom |
| innerText | String | 觸發(fā)元素內(nèi)部的text文本 |
| baseURI | String | 觸發(fā)元素當(dāng)前的url路徑 |
3 此處放置event屬性的示例
3.1 屬性示例
3.1.1 buttoms 屬性示例
element.addEventListener('mousedown', function(event) {
if (event.buttons === 1) {
console.log("左鍵被按下了");
} else if (event.buttons === 2) {
console.log("右鍵被按下了");
} else if (event.buttons === 4) {
console.log("中間按鈕被按下了");
} else if (event.buttons === 3) {
console.log("左鍵和右鍵被按下了");
} else if (event.buttons === 7) {
console.log("左鍵镜会、右鍵和中間按鈕被按下了");
}
});
3.1.2 cancelable 示例
如果 cancelable 屬性為 true檬寂，則事件可以被取消，即可以調(diào)用 event.preventDefault() 方法取消默認(rèn)行為戳表。取消事件的默認(rèn)行為意味著阻止瀏覽器執(zhí)行與事件相關(guān)的默認(rèn)操作桶至。例如，阻止表單的提交匾旭、禁止鏈接的跳轉(zhuǎn)等镣屹。
如果 cancelable 屬性為 false，則事件不可被取消价涝，無法調(diào)用 event.preventDefault() 方法野瘦。
element.addEventListener('click', function(event) {
if (event.cancelable) {
event.preventDefault(); // 取消事件的默認(rèn)行為
console.log("事件已被取消");
}
});
3.1.3 defaultPrevented示例
當(dāng)調(diào)用 event.preventDefault()方法取消事件的默認(rèn)行為時(shí)，defaultPrevented 屬性的值將變?yōu)?code>true飒泻。如果事件的默認(rèn)行為沒有被取消或事件不支持取消默認(rèn)行為鞭光，defaultPrevented屬性的值將為 false。
element.addEventListener('click', function(event) {
event.preventDefault(); // 取消事件的默認(rèn)行為
console.log("事件的默認(rèn)行為已被取消：" + event.defaultPrevented);
});
3.1.4 detail 示例
element.addEventListener('click', function(event) {
console.log("點(diǎn)擊事件發(fā)生的次數(shù)：", event.detail);
});
element.addEventListener('wheel', function(event) {
console.log("滾動(dòng)量：", event.detail);
});
當(dāng)用戶點(diǎn)擊元素時(shí)泞遗，會(huì)輸出點(diǎn)擊事件發(fā)生的次數(shù)惰许，以及當(dāng)用戶滾動(dòng)鼠標(biāo)滾輪時(shí)，會(huì)輸出滾動(dòng)的量（正向滾動(dòng)為正值史辙，負(fù)向滾動(dòng)為負(fù)值）汹买。
需要注意的是，`detail` 屬性在一些瀏覽器中已經(jīng)被廢棄聊倔，可以使用 `event.deltaX` 或 `event.deltaY` 替代晦毙，具體取決于事件類型。
3.1.5 screenX示例
注意：當(dāng)你的瀏覽器窗口和你的屏幕大小一樣大的時(shí)候耙蔑，pageX 见妒、screenX、clientX的值是一樣大的甸陌，但是须揣，當(dāng)你改變?yōu)g覽器窗口的大小改變?yōu)g覽器位置的時(shí)候， screenX的值就會(huì)有所變變化
screenX介紹
3.1.6 cancelable 示例
3.1.9 getModifierState示例
getModifierState 方法接受一個(gè)參數(shù)钱豁，即指定要檢查的修改鍵的字符串表示形式耻卡。常見的參數(shù)值包括：
- Shift：用于檢查 Shift 鍵的狀態(tài)。
- Control：用于檢查 Ctrl 鍵的狀態(tài)牲尺。
- Alt：用于檢查 Alt 鍵的狀態(tài)卵酪。
- Meta 或 Command：用于檢查 Meta/Command 鍵（通常是 Windows 鍵或 Command 鍵）的狀態(tài)。
document.addEventListener('keydown', function(event) {
if (event.getModifierState('Shift')) {
console.log("Shift 鍵按下");
}
if (event.getModifierState('Control')) {
console.log("Ctrl 鍵按下");
}
if (event.getModifierState('Alt')) {
console.log("Alt 鍵按下");
}
if (event.getModifierState('Meta') || event.getModifierState('Command')) {
console.log("Meta/Command 鍵按下");
}
});
- 在上面的示例中，當(dāng)用戶按下鍵盤上的某個(gè)鍵時(shí)溃卡，
getModifierState方法被用來檢查修改鍵的狀態(tài)溢豆。對(duì)于處于按下狀態(tài)的修改鍵，相應(yīng)的消息將被輸出到控制臺(tái)塑煎。 - 需要注意的是，不同的瀏覽器可能在檢測(cè)鍵盤事件和修改鍵狀態(tài)時(shí)有所不同臭蚁，因此在使用
getModifierState方法時(shí)最铁，最好先進(jìn)行測(cè)試和兼容性檢查。
3.1.10 isDefaultPrevented 方法示例：
document.getElementById('myLink').addEventListener('click', function(event) {
event.preventDefault();
console.log(event.isDefaultPrevented()); // true
});
- 在這個(gè)示例中垮兑，當(dāng)點(diǎn)擊具有ID為
myLink的元素時(shí)冷尉，事件處理程序會(huì)調(diào)用preventDefault()方法來阻止默認(rèn)的點(diǎn)擊行為。然后系枪，isDefaultPrevented()方法被調(diào)用雀哨，并且返回true，表示默認(rèn)行為已被阻止私爷。
3.1.11 isPropagationStopped 方法示例：
- 在JavaScript中雾棺，事件傳播包括捕獲階段、目標(biāo)階段和冒泡階段衬浑。調(diào)用
event.stopPropagation()方法可以停止事件在這些階段的傳播捌浩。isPropagationStopped方法可用于檢查事件是否已經(jīng)停止了傳播。
document.getElementById('myDiv').addEventListener('click', function(event) {
event.stopPropagation();
console.log(event.isPropagationStopped()); // true
});
document.body.addEventListener('click', function(event) {
console.log(event.isPropagationStopped()); // false
});
