HTML DOM event對象學習記錄

時間 2019-12-06

標籤 html dom event 對象學習記錄欄目 HTML 简体版

原文原文鏈接

標準event屬性

bubbles(只讀) 返回布爾值，指示事件是不是起泡時間類型
語法：
```
event.bubbles
```
cancelable（只讀）返回一個布爾值，指示事件是否可擁有可取消的默認動做。若是用 preventDefault() 方法能夠取消與事件關聯的默認動做，則爲 true，不然爲 fasle。
語法：
```
event.cancelable
```
cancelBubble evnt.stopPropagation()之前的別名。經過在一個事件處理程序返回前設置這個屬性的值爲真，來阻止事件冒泡。
若是一個事件是可冒泡的,則它的cancelBubble屬性的默認值爲 false,表明容許該事件向上冒泡. 將cancelBubble屬性設置爲true之後,能夠阻止該事件的進一步冒泡行爲.
該特性已經從 Web 標準中刪除，雖然一些瀏覽器目前仍然支持它，但也許會在將來的某個時間中止支持，請儘可能不要使用該特性。
語法：
```
event.cancelBubble
```
currentTarget (只讀) 返回其事件監聽器觸發該事件的元素。
語法：
```
event.currentTarget
```

eventPhase(只讀) 返回事件傳播的當前階段。它的值是下面的三個常量之一，它們分別表示捕獲階段、正常事件派發和起泡階段。
html

常量	值	描述
Event.NONE	0	這個時間，沒有事件正在被處理
Event.CAPTURING_PHASE	1	事件正在被目標元素的祖先對象處理. 這個處理過程從window開始，而後Document,而後是HTMLHtmlElement, 一直這樣，直到目標元素的父元素。經過EventTarget.addEventListener() 註冊爲捕獲模式的Event listeners被調用。
Event.AT_TARGET	2	事件對象已經抵達the event's target. 爲這個階段註冊的事件監聽被調用。若是 Event.bubbles 的值爲false, 對事件對象的處理在這個階段後就會結束.
Event.BUBBLING_PHASE	3	事件對象逆向向上傳播回目標元素的祖先元素, 從父親元素開始，而且最終到達包含元素window . 這就是冒泡，而且只有 Event.bubbles值爲true的時候纔會發生。爲這個階段註冊的Event listeners在這個過程當中被觸發.

target（只讀）返回觸發此事件的元素（事件的目標節點）。 target與currentTarget的區別https://www.jianshu.com/p/1dd668ccc97a
語法：
```
event.target
```
timeStamp(只讀) 返回事件生成的日期和時間。
指示發生事件的日期和時間（從 epoch 開始的毫秒數）。epoch 是一個事件參考點。在這裏，它是客戶機啓動的時間。並不是全部系統都提供該信息，所以，timeStamp 屬性並不是對全部系統/事件都是可用的。
語法：瀏覽器
```
event.timeStamp
```
type （只讀）返回當前 Event 對象表示的事件的名稱。即當前 Event 對象表示的事件的名稱。它與註冊的事件句柄同名，或者是事件句柄屬性刪除前綴 "on" 好比 "submit"、"load" 或 "click"。函數
語法：
```
event.type
```

標準的event方法spa

initEvent() 初始化新建立的 Event 對象的屬性。
該方法將初始化 Document.createEvent() 方法建立的合成 Event 對象的 type 屬性、bubbles 屬性和 cancelable 屬性。只有在新建立的 Event 對象被 Document 對象或 Element 對象的 dispatchEvent() 方法分派以前，才能調用 Event.initEvent() 方法。
該特性已經從 Web 標準中刪除，雖然一些瀏覽器目前仍然支持它，但也許會在將來的某個時間中止支持，請儘可能不要使用該特性。
語法：

參數	描述
eventType	字符串值。事件的類型。
canBubble	事件是否起泡。
cancelable	是否能夠用 preventDefault() 方法取消事件。

event.initEvent(eventType,canBubble,cancelable

// 建立事件.
var event = document.createEvent('Event');

// 初始化一個點擊事件，能夠冒泡，沒法被取消
event.initEvent('click', true, false);

// 設置事件監聽.
elem.addEventListener('click', function (e) {
  // e.target 就是監聽事件目標元素
}, false);

// 觸發事件監聽
elem.dispatchEvent(event);

preventDefault() 取消事件的默認動做。
語法：
```
event.preventDefault()
```
stopPropagation() 阻止捕獲和冒泡階段中當前事件的進一步傳播。終止事件在傳播過程的捕獲、目標處理或起泡階段進一步傳播。調用該方法後，該節點上處理該事件的處理程序將被調用，事件再也不被分派到其餘節點。
語法：code
```
event.stopPropagation()
```

stopImmediatePropagation() 阻止調用相同事件的其餘偵聽器。若是某個元素有多個相同類型事件的事件監聽函數,則當該類型的事件觸發時,多個事件監聽函數將按照順序依次執行.若是某個監聽函數執行了 event.stopImmediatePropagation()方法,則除了該事件的冒泡行爲被阻止以外(event.stopPropagation方法的做用),該元素綁定的後序相同類型事件的監聽函數的執行也將被阻止.

<!DOCTYPE html>
<html>
    <head>
        <style>
            p { height: 30px; width: 150px; background-color: #ccf; }
            div {height: 30px; width: 150px; background-color: #cfc; }
        </style>
    </head>
    <body>
        <div>
            <p>paragraph</p>
        </div>
        <script>
            document.querySelector("p").addEventListener("click", function(event)
            {
                alert("我是p元素上被綁定的第一個監聽函數");
            }, false);
            document.querySelector("p").addEventListener("click", function(event)
            {
                alert("我是p元素上被綁定的第二個監聽函數");
                event.stopImmediatePropagation();
                //執行stopImmediatePropagation方法,阻止click事件冒泡,而且阻止p元素上綁定的其餘click事件的事件監聽函數的執行.
            }, false);
            document.querySelector("p").addEventListener("click", function(event)
            {
                alert("我是p元素上被綁定的第三個監聽函數");
                //該監聽函數排在上個函數後面,該函數不會被執行.
            }, false);
            document.querySelector("div").addEventListener("click", function(event)
            {
                alert("我是div元素,我是p元素的上層元素");
                //p元素的click事件沒有向上冒泡,該函數不會被執行.
            }, false);
        </script>
    </body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。