c調用按鈕點選事件_DOM事件委托

事件委托

事件委托,本質其實很好了解

就是「監聽祖先元素」,可以想象為中介幫忙租房子

場景一

你要給100個按鈕添加點選事件,咋辦?

答案:監聽這100個按鈕的祖先,等冒泡的時候再判斷target是不是這100個按鈕中的一個

JS Bin​js.jirengu.com

拓展API

data-id

dataset擷取

dataset(API)可以擷取以"data-"開頭的屬性的值

更多相關data使用技巧連結:

HTMLElement.dataset​developer.mozilla.org

js中的dataset問題_qq_39579242的部落格-CSDN部落格_dataset​blog.csdn.net

場景二

你要監聽目前不存在的元素的點選是事件,咋辦?

答案:監聽祖先,等點選的時候看看是不是我想要監聽的元素即可

• 優點:

省監聽數量(省記憶體)

可以監聽動态元素

■ 封裝事件委托

要求:

1. 寫出這樣一個函數on('click','#testDiv','li',fn)
2. 當使用者點選#testDiv裡的li元素時,調用fn函數
3. 要求用到事件委托

• 答案一

判斷target是否比對'li'

示例代碼:

JS Bin​js.jirengu.com

拓展:matches()API

matches()API：檢視是否為對應的選擇器

官方:如果元素被指定的選擇器字元串,選擇Element.matches()方法傳回true,否則false

如果為true則比對，為false則不比對

Element.matches()​developer.mozilla.org

t.matches(selector) 相等 t.tagName.toLowCase===selector

• 注意:on函數中參數element有可能為字元串或Element(元素對象)

是以要加前提條件

if(!(element instanceof Element)){
element=document.querySelector(element)
}
           

插曲

剛剛我們通過on函數實作了事件委托

實際上這個答案是錯的

但是這個答案會在面試的時候是可以的

面試題：什麼是事件委托？

答案：給元素添加監聽，檢視target是否滿足selector（選擇器），滿足則調用函數fn，不滿足則跳過！

寫法一：
div1.addEventListener('click',(e)=>{
  const t=e.target
  if(t.matches(selector)){
    console.log('button被點選了')//符合則列印
  }
})
————————————————————
寫法二：
div1.addEventListener('click',(e)=>{
  const t=e.target
  if(t.tagName.toLowerCase()==='button'){
    console.log('button被點選了')//符合則列印
  }
})
           

為什麼是錯的呢？

變态：如<button>标簽内有放入<span>,<span>标簽才是click1文本，這時點選後則失敗

因為這是的target從'button'變成了'span'，'span'不等于'button'(selector),是以會失敗。

那麼如何解決呢？

答案二：

遞歸判斷 target兒/target爸/target爺(一層層向上查找)

JS Bin​js.jirengu.com

整合進jQuery

有興趣可以自己實作$('#xxx').on('click','li',fn)

JS支援事件嗎

答案：支援，也不支援。本文章講的DOM事件不屬于JS的共呢個，屬于浏覽器提供DOM的功能（DOM事件與JS是平級）

JS隻是調用了DOM提供的addEventListener而已

• 追問

如何當JS支援事件？請手寫一個事件系統？

後期回講