事件代理及常用的 HTML 事件

xavier 發布于2019-08-23 10:57 / 1441人閱讀

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

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

事件代理

監聽列表中多項 li 時，實現點擊 li 控制臺打印對應文本，如下：

  
    蘋果
    香蕉
    葡萄

首先想到的對每一個 li 進行監聽

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的區別：onclick是屬性，addEventListener是方法。

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

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

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

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

使用事件代理來實現它，監聽的元素應該是這些元素的父元素，當我點擊父元素內的元素時，父元素都會得到響應，并分發相應的事件。e.target就是點擊的元素。

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

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

蘋果

前添加input內的內容，如果我點結尾添加葡萄
后添加input內的內容。

  
    蘋果
    香蕉
    葡萄

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

在這里需要注意e.currentTarget和e.target的區別：
e.currentTarget：添加事件的元素
e.target：執行事件的元素
大部分事件中這兩者沒什么區別，但在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 === "開頭添加"){    //只有點"開頭添加"才執行
      ct.insertBefore(li,ct.firstChild)
    }else if(e.target.textContent === "結尾添加"){//只有點"結尾添加"才執行
      ct.appendChild(li)
     }
  })

常用的 HTML 事件 鼠標事件

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

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

pageX,pageY頁面坐標位置，發生事件的頁面坐標

screenX,screenY事件發生時相對屏幕的坐標

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

觸摸事件

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

鍵盤事件：

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

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

location屬性4表示設備鍵盤

頁面相關事件：

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

表單相關事件

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

編輯事件

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

拖動事件

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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/96845.html

前端面試（知識點）整理（一）

摘要：接受個參數事件類型，是否冒泡，是否阻止瀏覽器的默認行為觸發上綁定的自定義事件觸發元素上綁定事件事件的委托代理的原理以及優缺點。委托代理事件是那些被綁定到父級元素的事件，但是只有當滿足一定匹配條件時才會被挪。一、頁面布局 1.問題：假設高度已知，請寫出三欄布局，其中左欄、右欄寬度各為300px，中間自適應。解決方案一：使用浮動布局` Document ...

zhichangterry 2019-08-22 11:06 評論0 收藏0
前端面試（知識點）整理（一）

摘要：接受個參數事件類型，是否冒泡，是否阻止瀏覽器的默認行為觸發上綁定的自定義事件觸發元素上綁定事件事件的委托代理的原理以及優缺點。委托代理事件是那些被綁定到父級元素的事件，但是只有當滿足一定匹配條件時才會被挪。一、頁面布局 1.問題：假設高度已知，請寫出三欄布局，其中左欄、右欄寬度各為300px，中間自適應。解決方案一：使用浮動布局` Document ...

Songlcy 2019-08-01 17:36 評論0 收藏0
前端面試（知識點）整理（一）

摘要：接受個參數事件類型，是否冒泡，是否阻止瀏覽器的默認行為觸發上綁定的自定義事件觸發元素上綁定事件事件的委托代理的原理以及優缺點。委托代理事件是那些被綁定到父級元素的事件，但是只有當滿足一定匹配條件時才會被挪。一、頁面布局 1.問題：假設高度已知，請寫出三欄布局，其中左欄、右欄寬度各為300px，中間自適應。解決方案一：使用浮動布局` Document ...

ThreeWords 2019-08-29 13:26 評論0 收藏0
異步、DOM、事件、頁面加載和優化面試題及知識點簡單總結

摘要：異步編程，不同于同步編程的請求響應模式，其是一種事件驅動編程，請求調用函數或方法后，無需立即等待響應，可以繼續執行其他任務，而之前任務響應返回后可以通過狀態通知和回調來通知調用者。異步與單線程知識點：什么是異步(對比同步) 同步：一行一行按順序依次執行代碼，當前代碼任務耗時執行會阻塞后續代碼的執行。這是一種典型的請求-響應模型，當請求調用一個函數或方法后，需等待其響應返回，然后執...

jasperyang 2019-08-21 16:57 評論0 收藏0
百度網盤文件夾框選功能

摘要：案例說明使用原生完成桌面操作級應用，對于原生的掌握情況而言，是一個較為全面的綜合型案例。本次課從事件相關的功能入手，給大家帶來詳細的分享。 showImg(https://segmentfault.com/img/bVbh1qw); 案例說明：使用原生 JS 完成桌面操作級應用，對于原生 JS 的掌握情況而言，是一個較為全面的綜合型案例。本次課從事件（event）相關的功能入手，給大家...

jkyin 2019-08-29 16:55 評論0 收藏0