event -- 事件對象 · 前端知識 -- 學習整理

>[success] # event 事件對象 1. 當事件被觸發時候，點擊事件一些信息會被封裝到一個**Event**對象中，這個對象由瀏覽器創建，稱之為**event對象** 2. `event` 通過事件回調函數的參數獲取 >[danger] ##### event 屬性和方法 * **屬性** 1. **type**：事件的類型； 2. **target**：當前事件發生的元素； 3. **currentTarget**：當前處理事件的元素； 4. **eventPhase**：事件所處的階段； 5. **offsetX、offsetY**：事件發生在元素內的位置； 6. **clientX、clientY**：事件發生在客戶端內的位置； 7. **pageX、pageY**：事件發生在客戶端相對于document的位置； 8. **screenX、screenY**：事件發生相對于屏幕的位置； ![](https://img.kancloud.cn/3b/17/3b172eb6f8e92245cc3370334c3b9dfd_1308x844.png) ~~~ <!DOCTYPE html> <html lang="en" style="height: 200%"> <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> .box { width: 100px; height: 100px; background-color: aquamarine; } </style> </head> <body> <div class="box"> <span>點擊</span> </div> <script> const spanDom = document.querySelector('span') spanDom.onclick = function (event) { // 1.偶爾會使用 console.log('事件類型:', event.type) console.log('事件階段:', event.eventPhase) // 冒泡被觸發事件 3 / 自己被觸發是2/ 捕獲被觸發 1/ https://developer.mozilla.org/zh-CN/docs/Web/API/Event/eventPhase // 2.比較少使用 console.log('事件元素中位置', event.offsetX, event.offsetY) console.log('事件客戶端中位置', event.clientX, event.clientY) console.log('事件頁面中位置', event.pageX, event.pageY) console.log('事件在屏幕中位置', event.screenX, event.screenY) // 3.target/currentTarget console.log(event.target) // 元素本身 console.log(event.currentTarget) // 如果是冒泡或者是捕獲觸發此時是冒泡和捕獲元素對象 console.log(event.currentTarget === event.target) } </script> </body> </html> ~~~ * currentTarget/target ~~~ <!DOCTYPE html> <html lang="en" style="height: 200%"> <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> .box { width: 100px; height: 100px; background-color: aquamarine; } </style> </head> <body> <div class="box"> <span>點擊</span> </div> <script> const divDom = document.querySelector('div') const spanDom = document.querySelector('span') divDom.onclick = function (event) { console.log(event.target) // 元素本身 console.log(event.currentTarget) // 如果是冒泡或者是捕獲觸發此時是冒泡和捕獲元素對象 console.log(event.currentTarget === event.target) } spanDom.onclick = function () {} </script> </body> </html> ~~~ ![](https://img.kancloud.cn/52/d2/52d2eaaa5b7e7096d8c72d964d95e5bd_690x509.png) * 事件 1. **preventDefault**：取消事件的默認行為； 2. **stopPropagation**：阻止事件的進一步傳遞（冒泡或者捕獲都可以阻止）； >[danger] ##### 事件處理中的this 1. 可以通過this來獲取當前的發生元素 ![](https://img.kancloud.cn/28/d0/28d09910882fb0158581e9b2e41fefde_764x110.png) ~~~ <!DOCTYPE html> <html lang="en" style="height: 200%"> <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> .box { width: 100px; height: 100px; background-color: aquamarine; } </style> </head> <body> <div class="box"> <span>點擊</span> </div> <script> const divDom = document.querySelector('div') const spanDom = document.querySelector('span') divDom.onclick = function (event) { console.log(event.target) // 元素本身 console.log(event.currentTarget) // 如果是冒泡或者是捕獲觸發此時是冒泡和捕獲元素對象 console.log(event.currentTarget === event.target) console.log(this) // div class="box" } spanDom.onclick = function () { console.log(this) // span } </script> </body> </html> ~~~