javascript
JavaScript 复习之 事件模型 和 Event对象
事件模型
一、監(jiān)聽函數(shù)
js 有三種方法,可以為事件綁定監(jiān)聽函數(shù)
上面三種方法,第一種違反了 HTML 和 JavaScript 相分離原則,不推薦。第二種方法,如果多次定義了同個屬性,后者會覆蓋前者,不推薦。
第三種方法有點:
- 同一事件可以添加多個監(jiān)聽函數(shù)
- 能夠指定在哪個階段(捕獲階段還是冒泡階段)觸發(fā)監(jiān)聽函數(shù)
- 除了 DOM 節(jié)點,其他對象(如window,XMLHttpRequest等)也有這個接口,它等于是整個 JavaScript 統(tǒng)一的監(jiān)聽函數(shù)接口。
二、this 指向
監(jiān)聽函數(shù)內(nèi)部的this指向觸發(fā)事件的那個元素節(jié)點。
<button id="btn" onclick="console.log(this.id)">點擊</button>// btn 復制代碼三、事件的傳播
一個事件發(fā)生后,會在子元素和父元素之間傳播,分為三個階段:
- 第一階段:從window對象傳導到目標節(jié)點(上層傳到底層),稱為“捕獲階段”(capture phase)
- 第二階段:在目標節(jié)點上觸發(fā),稱為“目標階段”(target phase)
- 第三階段:從目標節(jié)點傳導回window對象(從底層傳回上層),稱為“冒泡階段”(bubbling phase)
四、事件代理
由于事件會在冒泡階段向上傳播到父節(jié)點,因此可以把子節(jié)點的監(jiān)聽函數(shù)定義在父節(jié)點上,由父節(jié)點的監(jiān)聽函數(shù)統(tǒng)一處理多個子元素的事件。這種方法叫做事件的代理(delegation)。
阻止事件冒泡使用event.stopPropagation
Event 對象
事件發(fā)生以后,會產(chǎn)生一個事件對象,作為參數(shù)傳給監(jiān)聽函數(shù)。
一、實例屬性
-
Event.bubbles返回布爾值,表示當前事件是否會冒泡
-
Event.eventPhase返回一個整數(shù)常量,表示事件目前所處階段
- 0,事件目前沒有發(fā)生。
- 1,事件目前處于捕獲階段,即處于從祖先節(jié)點向目標節(jié)點的傳播過程中。
- 2,事件到達目標節(jié)點,即Event.target屬性指向的那個節(jié)點。
- 3,事件處于冒泡階段,即處于從目標節(jié)點向祖先節(jié)點的反向傳播過程中。
-
Event.cancelable返回布爾值,表示事件可否取消。屬性只讀
-
Event.preventDefault當上面的值為true時可以調(diào)用,用來取消事件。
-
Event.cancelBubble屬性是一個布爾值,如果設(shè)為true,相當于執(zhí)行Event.stopPropagation(),可以阻止事件的傳播。
-
Event.currentTarget返回事件當前所在的節(jié)點,即正在執(zhí)行監(jiān)聽函數(shù)所綁定的節(jié)點。Event.target返回原始觸發(fā)事件的那個節(jié)點。
-
Event.type返回一個表示事件類型的字符串
-
Event.timeStamp返回一個毫秒時間戳,表示事件發(fā)生的時間。
-
Event.isTrusted返回一個布爾值,表示事件是否由真實的用戶行為產(chǎn)生。
-
Event.detail屬性只有瀏覽器的 UI 事件才具有,返回一個數(shù)值,表示事件的某種信息。
二、實例方法
- Event.preventDefault()取消瀏覽器對當前事件的默認行為。
- Event.stopPropagation()阻止事件冒泡
- Event.stopImmediatePropagetion阻止同一個事件的其他監(jiān)聽函數(shù)被調(diào)用,不管監(jiān)聽函數(shù)定義在當前節(jié)點還是其他節(jié)點。也就是說,該方法阻止事件的傳播,比Event.stopPropagation()更徹底。
- Event.composedPath()返回一個數(shù)組,成員是事件的最底層節(jié)點和依次冒泡經(jīng)過的所有上層節(jié)點。
轉(zhuǎn)載于:https://juejin.im/post/5c7bb39fe51d453ed235edc8
總結(jié)
以上是生活随笔為你收集整理的JavaScript 复习之 事件模型 和 Event对象的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: [NOI2017]泳池
- 下一篇: 重学JavaScript(1)--Jav