web事件總結

這裏主要記錄在平常中對知識的學習，經過結合筆記與自身理解的方式嘗試寫下總結
文章對細節可能不會一一介紹解釋，內容僅做參考
複製代碼

今天抽空複習了一下web事件，將一些要點記錄下來

在Web中, 事件在瀏覽器窗口中被觸發而且一般被綁定到窗口內部的特定部分
多是一個元素、一系列元素、被加載到這個窗口的 HTML 代碼或者是整個瀏覽器窗口。舉幾個可能發生的不一樣事件:

• 用戶在某個元素上點擊鼠標或懸停光標。
• 用戶在鍵盤中按下某個按鍵。
• 用戶調整瀏覽器的大小或者關閉瀏覽器窗口。
• 一個網頁中止加載。
• 提交表單。
• 播放、暫停、關閉視頻。
• 發生錯誤

每一個可用的事件都會有一個事件處理器，也就是事件觸發時會運行的代碼塊。當咱們定義了一個用來回應事件被激發的代碼塊的時候，咱們說咱們註冊了一個事件處理器

1、事件綁定

主要的事件綁定方式有：

1. 事件處理屬性

var btn = document.querySelector('button')
btn.onclick = function() {
    console.log('hello')
}
複製代碼

2. addEventListener/removeEventListener

var btn = document.querySelector('button')

function bgChange() {
    console.log()
}
btn.addEventListener('click', bgChange)
//btn.removeEventListener('click', bgChange)
複製代碼

---

二者區別：onclick(還有其餘屬性)賦值方式會覆蓋以前設置的，而使用addEventListener能夠向同一類型的元素添加多個監聽器

2、阻止默認行爲

有時你會遇到一些狀況，你但願事件不執行它的默認行爲，此時可使用 e.preventDefault() 來達到效果

form.onsubmit = function(e) {
  e.preventDefault()
  console.log('hello')
}
複製代碼

3、事件冒泡及捕獲

事件冒泡和捕捉是兩種機制，主要描述當在一個元素上有兩個相同類型的事件處理器被激活會發生什麼

1. 捕獲階段

事件觸發順序爲html元素(document)到目標元素

• 瀏覽器檢查元素的最外層祖先，是否在捕獲階段中註冊了一個onclick事件處理程序，若是是則運行它
• 而後，它移動到中單擊元素的下一個祖先元素，並執行相同的操做，而後是單擊元素再下一個祖先元素，依此類推，直到到達實際點擊的目標元素

2. 冒泡階段

事件觸發順序爲目標元素到html(document)元素

• 瀏覽器檢查實際點擊的元素是否在冒泡階段中註冊了一個onclick事件處理程序，若是是則運行它
• 而後它移動到下一個直接的祖先元素，並作一樣的事情，而後是下一個，直到它到達元素

---

在現代瀏覽器中，默認狀況下全部事件處理程序都在冒泡階段進行註冊

若是想變成爲捕獲階段進行註冊，可以使用addEventListener(event, function, true)

4、阻止冒泡

在通常狀況下事件冒泡並非咱們想要的效果，而是想要它只會讓當前事件處理程序運行，但事件不會在冒泡鏈上進一步擴大。此時可使用**e.stopPropagation()**來達到效果

button.onclick = function(e) {
  console.log('hello')
  e.stopPropagation()
}
複製代碼

5、事件委託

也叫作事件代理，是javascript中經常使用綁定事件的技巧。把本來須要綁定在子元素的響應事件委託給父元素，讓父元素擔當事件監聽的職務

原理爲利用DOM元素的事件冒泡機制

優勢：

• 能夠大量節省內存佔用，減小事件註冊
• 能夠實現當新增子對象時無需再次對其綁定(動態綁定事件)

基本實現：

<ul id="ul">
  <li id="1">1</li>
  <li id="2">2</li>
  <li id="3">3</li>
  <li id="4">4</li>
</ul>

複製代碼

var ul = document.getElementById("ul")
 
ul.addEventListener("click", function (event) {
  var target = event.target;
  switch (target.id) {
    case "1": {
        console.log('i am 1')
        break;
    }
    case "2": {
        console.log('i am 2')
        break;
    }
    case "3": {
        console.log('i am 1')
        break;
    }
    default: {
        console.log('haha')
        break
    }
  }
})
複製代碼

使用事件委託時，並非說把事件委託給的元素越靠近頂層就越好。事件冒泡的過程也須要耗時，越靠近頂層，事件的事件傳播鏈越長，也就越耗時

若是DOM嵌套結構很深，事件冒泡經過大量祖先元素會致使性能損失