站長資訊網
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*/}
