Event對象

Event 對象

Event 對象表示有關事件的信息。
Event 對象的屬性提供了有關事件的細節（例如，事件在其上發生的元素）。Event 對象的方法能夠控制事件的傳播。

標準 Event 屬性

屬性	描述
bubbles	返回布爾值，指示事件是不是起泡事件類型。
cancelable	返回布爾值，指示事件是否可擁可取消的默認動做。
currentTarget	返回其事件監聽器觸發該事件的元素。
eventPhase	返回事件傳播的當前階段。
target	返回觸發此事件的元素（事件的目標節點）。
timeStamp	返回事件生成的日期和時間。
type	返回當前 Event 對象表示的事件的名稱。

例子：

//chrome點擊事件對象
MouseEvent {
    altKey: false
    bubbles: true
    button: 0
    buttons: 0
    cancelBubble: false
    cancelable: true
    clientX: 237
    clientY: 558
    composed: true
    ctrlKey: false
    currentTarget: null
    defaultPrevented: false
    detail: 1
    eventPhase: 0
    fromElement: null
    isTrusted: true
    layerX: 237
    layerY: 32
    metaKey: false
    movementX: 0
    movementY: 0
    offsetX: 77
    offsetY: 33
    pageX: 237
    pageY: 558
    path:
        (9)[div.contact - btn, div.btm - box, div.page, body, shadow, document - fragment, html, document, Window]
    relatedTarget: null
    returnValue: true
    screenX: 454
    screenY: 746
    shiftKey: false
    sourceCapabilities: InputDeviceCapabilities {
        firesTouchEvents: true
    }
    srcElement: div.contact - btn
    target: div.contact - btn
    timeStamp: 196913.30000001471
    toElement: div.contact - btn
    type: "click"
    view: Window {
        postMessage: ƒ,
        blur: ƒ,
        focus: ƒ,
        close: ƒ,
        frames: Window,
        …
    }
    which: 1
    x: 237
    y: 558
}

標準 Event 方法

preventDefault() 通知瀏覽器不要執行與事件關聯的默認動做。
stopPropagation() 終止事件在傳播過程的捕獲、目標處理或起泡階段進一步傳播。調用該方法後，該節點上處理該事件的處理程序將被調用，事件再也不被分派到其餘節點。

Event對象哪來的

流是具備方向的數據。
事件流所描述的就是從頁面中接受事件的順序。

DOM事件流

DOM事件流包括三個階段:
1.事件捕獲階段
2.處於目標階段
3.事件冒泡階段
ps:事件冒泡即事件開始時，由最具體的元素接收（也就是事件發生所在的節點），而後逐級傳播到較爲不具體的節點。

上圖代表DOM處理事件流的三個階段，而Event對象就是這個過程當中產生的 瞭解詳情

註冊事件監聽器

1.EventTarget.addEventListener

// 假設 myButton 是一個按鈕
myButton.addEventListener('click', function(){alert('Hello world');}, false);
//addEventListener最後一個參數， 
//爲true則表明使用事件捕獲模式 ，
//false則表示使用事件冒泡模式。

2.HTML屬性

<button onclick="alert('Hello world!')">

3.DOM元素屬性

// 假設 myButton 是一個按鈕
myButton.onclick = function(event){alert('Hello world');};

ps: 阻止事件冒泡 stopPropagation()

button.addEventListener('click', function(event) {
  event.stopPropagation();
}, false);