事件代理及常用的 HTML 事件

xavier 發(fā)布于2019-08-23 10:57 / 1433人閱讀

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

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

事件代理

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

  
    蘋果
    香蕉
    葡萄

首先想到的對(duì)每一個(gè) li 進(jìn)行監(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是方法。

簡(jiǎn)單來(lái)說(shuō)，如果使用onclick，如果此元素需要同時(shí)添加多個(gè)onclick事件，那么之前的onclick會(huì)被覆蓋，而使用addEventListener添加的事件相當(dāng)于調(diào)用它，并傳遞相應(yīng)的參數(shù)。

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

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

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

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

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

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

蘋果

前添加input內(nèi)的內(nèi)容，如果我點(diǎn)結(jié)尾添加葡萄
后添加input內(nèi)的內(nèi)容。

  
    蘋果
    香蕉
    葡萄

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

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

  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 === "開頭添加"){    //只有點(diǎn)"開頭添加"才執(zhí)行
      ct.insertBefore(li,ct.firstChild)
    }else if(e.target.textContent === "結(jié)尾添加"){//只有點(diǎn)"結(jié)尾添加"才執(zhí)行
      ct.appendChild(li)
     }
  })

常用的 HTML 事件 鼠標(biāo)事件

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

clientX,clientY客戶端坐標(biāo)位置，當(dāng)事件發(fā)生時(shí)，鼠標(biāo)的位置

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

screenX,screenY事件發(fā)生時(shí)相對(duì)屏幕的坐標(biāo)

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

觸摸事件

touchstart：手指點(diǎn)擊觸發(fā)，點(diǎn)擊坐標(biāo)在touches[0]里面，因?yàn)槭謾C(jī)支持多點(diǎn)觸控
touchend：手指離開觸發(fā)，同上
touchmove：手指移動(dòng)觸發(fā)，同上

鍵盤事件：

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

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

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

頁(yè)面相關(guān)事件：

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

表單相關(guān)事件

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

編輯事件

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

拖動(dòng)事件

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