事件物件(event)
是什麼是事件物件(event):通俗講就是一個記錄了事件各種資訊的一個物件。
btn.onclick = function(event){let e = event || window.event}
事件來源物件
#事件流
但如果細分的話在捕捉到冒泡階段會存在一個目標階段,即所具體操做的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中文網其他相關文章!