摘要：之前總結(jié)了事件捕獲和冒泡以及阻止事件傳播，今天寫一下事件代理方面的總結(jié)事件之捕獲冒泡阻止事件傳播事件代理監(jiān)聽列表中多項時，實現(xiàn)點擊控制臺打印對應(yīng)文本，如下蘋果香蕉葡萄首先想到的對每一個進行監(jiān)聽或者使用和的區(qū)別是屬性，是方法。

之前總結(jié)了事件捕獲和冒泡以及阻止事件傳播，今天寫一下事件代理方面的總結(jié)
DOM 事件之捕獲、冒泡：
阻止事件傳播：

監(jiān)聽列表中多項 li 時，實現(xiàn)點擊 li 控制臺打印對應(yīng)文本，如下：

  

    
蘋果
    
香蕉
    
葡萄
  

首先想到的對每一個 li 進行監(jiān)聽

let ct = document.querySelector(".ct"）
for(let i = 0; i < ct.children.length; i++){
  ct.children[i].onclick = function(e){
    console.log(e.target.textContent)
  }  
}

或者

let ct = document.querySelector(".ct"）
for(let i = 0; i < ct.children.length; i++){
  ct.children[i].addEventListener("click",function(e){
    console.log(e.target.textContent)    
  })
}

使用onclick和addEventListener的區(qū)別：onclick是屬性，addEventListener是方法。

簡單來說，如果使用onclick，如果此元素需要同時添加多個onclick事件，那么之前的onclick會被覆蓋，而使用addEventListener添加的事件相當于調(diào)用它，并傳遞相應(yīng)的參數(shù)。

如果此時 li 是動態(tài)生成的，每一個li 都要給它添加監(jiān)聽器，監(jiān)聽器多了會特別占內(nèi)存，從而影響性能，這里最好的方式是使用事件代理。

舉個簡單的例子：大學宿舍同學，買的快遞都到了，這時有兩種方法，一種是每個人都去取自己的快遞，另一種方法是大家找一個同學，讓他統(tǒng)一去取快遞，然后在發(fā)給每一個同學。

這里取快遞就是一個事件，第一種方法就是相當于給每個元素添加事件，第二種方法統(tǒng)一去取快遞的同學就是代理元素。

使用事件代理來實現(xiàn)它，監(jiān)聽的元素應(yīng)該是這些元素的父元素，當我點擊父元素內(nèi)的元素時，父元素都會得到響應(yīng)，并分發(fā)相應(yīng)的事件。e.target就是點擊的元素。

let ct = document.querySelector(".ct")
ct.addEventListener("click", function(e) {
  console.log(e.target.textContent)
})

用事件代理操作一些比較復(fù)雜的事情，比如下面代碼，當我點擊開頭添加，則在

  

    
蘋果
    
香蕉
    
葡萄
  
  

    
    開頭添加
    結(jié)尾添加
  

這里事件代理元素是content，如按照上面的方法，給每個子元素分發(fā)事件，那么當我點擊input時，也會觸發(fā)click事件，這就偏離了我們的需求。所以這里需要做一個判斷，只有點開頭添加或者結(jié)尾添加才能添加到相應(yīng)的位置，點其他地方一律不操作。

在這里需要注意e.currentTarget和e.target的區(qū)別：
e.currentTarget：添加事件的元素
e.target：執(zhí)行事件的元素
大部分事件中這兩者沒什么區(qū)別，但在click事件中，如果使用事件代理，這兩個指向的就不是同一個元素。

  let ct = document.querySelector(".ct")
  let addContent = document.querySelector(".ipt-add-content")
  let content = document.querySelector(".content")

  content.addEventListener("click", function(e) {
    let li = document.createElement("li")
    li.textContent = addContent.value
    if(e.target.textContent === "開頭添加"){    //只有點"開頭添加"才執(zhí)行
      ct.insertBefore(li,ct.firstChild)
    }else if(e.target.textContent === "結(jié)尾添加"){//只有點"結(jié)尾添加"才執(zhí)行
      ct.appendChild(li)
     }
  })

mousedown：鼠標按下觸發(fā)，其中button屬性監(jiān)測鼠標按下哪個鍵：0是鼠標左鍵，1鼠標中間的滾輪，2鼠標右鍵。
mouseup：鼠標松開觸發(fā)，其中button屬性監(jiān)測鼠標按下哪個鍵：0是鼠標左鍵，1鼠標中間的滾輪，2鼠標右鍵。
mousemove：鼠標移動觸發(fā)
click：點擊事件
dblclick：雙擊事件
mousewheel：鼠標滾動事件，wheelDelta可以判定鼠標滾動方向，180 向上滾動，-180 向下滾動
mouseover：鼠標進入觸發(fā)，會冒泡，如果監(jiān)聽的是父元素，鼠標移入到父元素內(nèi)的子元素也會觸發(fā)
mouseout：鼠標離開觸發(fā)，會冒泡，如果監(jiān)聽的是父元素，鼠標從父元素內(nèi)的子元素移出也會觸發(fā)
movseenter:鼠標進入觸發(fā)，不會冒泡
mouseleave:鼠標離開觸發(fā)，不會冒泡
注：

clientX,clientY客戶端坐標位置，當事件發(fā)生時，鼠標的位置

pageX,pageY頁面坐標位置，發(fā)生事件的頁面坐標

screenX,screenY事件發(fā)生時相對屏幕的坐標

修改鍵：shift、ctrl、alt、win對應(yīng)的修改鍵狀態(tài)shiftKey、ctrlKey、altKey、metaKey，他們是布爾值，按下為true，松開為false。

touchstart：手指點擊觸發(fā)，點擊坐標在touches[0]里面，因為手機支持多點觸控
touchend：手指離開觸發(fā)，同上
touchmove：手指移動觸發(fā)，同上

keydown：鍵盤上按下任意鍵觸發(fā)，按住不放會重復(fù)觸發(fā)，文本框變化之前觸發(fā)
keyup：鍵盤上釋放任意鍵觸發(fā)
keypress：鍵盤上按下任意字符鍵觸發(fā)，按住不放會重復(fù)觸發(fā)，文本框變化之前觸發(fā)
注：

textInput和keypress類似，書上說textInput只能在可編輯區(qū)域觸發(fā)，只能按下有效字鍵才能觸發(fā)(enter鍵無法觸發(fā)，ctrl+v可以觸發(fā))，keypress按下任何影響文本顯示的鍵都會觸發(fā)(enter鍵可以觸發(fā)，ctrl+v無法觸發(fā))，但我操作下來，發(fā)現(xiàn)這兩者并沒有什么區(qū)別。

location屬性4表示設(shè)備鍵盤

load：加載完成時觸發(fā)
move：瀏覽器窗口被移動時觸發(fā)
resize：瀏覽器的窗口大小被改變時觸發(fā)
scroll：滾動條位置發(fā)生變化時觸發(fā)

blur：元素失去焦點時觸發(fā)
change：元素失去焦點且元素內(nèi)容發(fā)生改變時觸發(fā)
focus：元素獲得焦點時觸發(fā)
reset：表單中reset屬性被激活時觸發(fā)
submit：表單被提交時觸發(fā)
input：在input元素內(nèi)容修改后立即被觸發(fā)

beforecopy：當頁面當前的被選擇內(nèi)容將要復(fù)制到瀏覽者系統(tǒng)的剪貼板前觸發(fā)此事件
beforecut：當頁面中的一部分或者全部的內(nèi)容將被移離當前頁面（剪貼）并移動到瀏覽者的系統(tǒng)剪貼板時觸發(fā)此事件
beforeeditfocus：當前元素將要進入編輯狀態(tài)
beforepaste：內(nèi)容將要從瀏覽者的系統(tǒng)剪貼板傳送（粘貼）到頁面中時觸發(fā)此事件
beforeupdate：當瀏覽者粘貼系統(tǒng)剪貼板中的內(nèi)容時通知目標對象
contextmenu：當瀏覽者按下鼠標右鍵出現(xiàn)菜單時或者通過鍵盤的按鍵觸發(fā)頁面菜單時觸發(fā)的事件
copy：當頁面當前的被選擇內(nèi)容被復(fù)制后觸發(fā)此事件
cut：當頁面當前的被選擇內(nèi)容被剪切時觸發(fā)此事件
losecapture：當元素失去鼠標移動所形成的選擇焦點時觸發(fā)此事件
paste：當內(nèi)容被粘貼時觸發(fā)此事件
select：當文本內(nèi)容被選擇時的事件
selectstart：當文本內(nèi)容選擇將開始發(fā)生時觸發(fā)的事件

drag：當某個對象被拖動時觸發(fā)此事件 （活動事件）
dragdrop：一個外部對象被鼠標拖進當前窗口時觸發(fā)
dragend：當鼠標拖動結(jié)束時觸發(fā)此事件
dragenter：當對象被鼠標拖動的對象進入其容器范圍內(nèi)時觸發(fā)此事件
dragleave：當對象被鼠標拖動的對象離開其容器范圍內(nèi)時觸發(fā)此事件
dragover：當某被拖動的對象在另一對象容器范圍內(nèi)拖動時觸發(fā)此事件
dragstart：當某對象將被拖動時觸發(fā)此事件
drop：在一個拖動過程中，釋放鼠標鍵時觸發(fā)此事件