一文詳解js中的事件物件、事件來源物件和事件流

js中事件物件、事件來源物件、事件流分析理解

事件物件（event）

# #什麼是事件：事件就是指js中所有可以發生的有並且有監聽的事件，例如：(滑鼠、鍵盤以及瀏覽器視窗變化等）

• 
  是什麼是事件物件（event）：通俗講就是一個記錄了事件各種資訊的一個物件。

  這裡要注意的是：事件物件會有相容性問題，在除IE的瀏覽器中為event，而非瀏覽器中為window.event，

btn.onclick = function(event){let e = event || window.event}

事件來源物件

簡單來說，就是指事件具體是在那個物件上發生的，對於element元素來說，事件來源物件就是指你所點擊的元素。同樣存在瀏覽器相容問題：
• 在fireFox中為event.srcElement
  
在IE中為event.target

相容寫入事件物件

#事件流

事件流主要分為兩類：1.捕獲事件2.冒泡事件觸發順序是先捕獲在冒泡

但如果細分的話在捕捉到冒泡階段會存在一個目標階段，即所具體操做的dom元素要進行的操作階段##捕獲事件

#先由最上一層的節點先接收事件，然後向下傳播到具體的節點。 eg：當使用者點擊了p元素，採用事件捕獲，則click事件將按照document>htm>body>p的順序進行傳播。傳遞方式是由外向內傳遞。

冒泡事件

和擷取事件相反，它是由內向外傳遞，當使用者點擊p時它會向父級傳遞，p>body>html 。 ***由於這種特性常用於事件委託。

事件委託

我們將所有子元素要觸發的相同事件綁定到父元素身上，這樣可以減少對DOM操作提高效能。具體使用方法是使用事件來源物件的方法。

<ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>

要對li綁定點擊事件，通常我們的做法是循環給li田間點擊事件

 let oLi = document.querySelectorAll("li")
 for(let i; i < oLi.length; i++){
            oLi[i].onclick = function(){
                console.log("i")
            }
        }

而使用事件委託的方法是

let oUl = document.querySelector("ul")
  oUl.onclick = function(event){
            let e = event || window.event
            console.log(e.target.innerHTML)
        }

#優點

提高效能，不需要循環所有元素一個一個綁定事件。

靈活，有動態建立進來的新元素不需要重新綁定事件。

阻止事件冒泡和阻止預設事件

#阻止事件冒泡的操作（相容性寫法）

***有些事件不需要進行冒泡操作

function stopBubble(event){
    var e = event||window.event //事件对象兼容写法
    e.stopProgation() ? e.stopProgation() : e.cancelBubble = true //IE兼容写法}

阻止預設事件（相容寫法）

***阻止a標籤以及滑鼠右鍵預設跳轉和選單事件

function cancelHandle(event){
    var e = event||window.event
    e.preventDefault() ? e.preventDefault() : e.returnValue = false/*ie*/}

相關推薦：【JavaScript影片教學】 ###

以上是一文詳解js中的事件物件、事件來源物件和事件流的詳細內容。更多資訊請關注PHP中文網其他相關文章！