国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

簡(jiǎn)單說(shuō) JavaScript中的事件委托(下)

MasonEast / 1907人閱讀

摘要：說(shuō)明上次我們說(shuō)了一些，關(guān)于中事件委托的基礎(chǔ)知識(shí)，這次我們繼續(xù)來(lái)看。可選類型，一個(gè)選擇器，用于指定哪些后代元素可以觸發(fā)綁定的事件。類型，指定的事件處理函數(shù)。

說(shuō)明

上次我們說(shuō)了一些，關(guān)于 JavaScript中事件委托的 基礎(chǔ)知識(shí)，這次我們繼續(xù)來(lái)看。

解釋

先來(lái)一段代碼



 
 
    
    
        
  • 1
    • 
        
  • 2
    •

上面這段代碼，用了事件委托，把事件綁在了ul上，沒有給每個(gè) li 都去綁定事件，看上去也是實(shí)現(xiàn)效果了，但是如果 li 里面還有子元素，那么這么去綁定事件就不行了，當(dāng)點(diǎn)擊 li 里面的子元素時(shí)，就出現(xiàn)問(wèn)題了。
比如，我們把上面的代碼改成這樣，看看效果。



 

 
 
    
    
        
        
  • 1
    • 
        
  • 2
    •

效果圖

看圖，當(dāng)點(diǎn)擊 藍(lán)色 span 的時(shí)候，沒有打印 li 被點(diǎn)擊了 ，當(dāng)點(diǎn)擊 紅色 li 的時(shí)候，才都打印出來(lái)，這是因?yàn)楫?dāng)點(diǎn)擊 span 的時(shí)候，事件源是 span，雖然也能觸發(fā)事件，但是并沒有走 if判斷，所以就不會(huì)打印 li 被點(diǎn)擊了 ，當(dāng)點(diǎn)擊 li 的時(shí)候，事件源是 li ，所以就可以了，但是我們往往需要的是，不管是點(diǎn)擊li，還是點(diǎn)擊 了 li 的子元素，都需要執(zhí)行操作。
好的，我們來(lái)改改代碼。
這次我們需要 Element.matches( ) 這個(gè)方法，

作用：
判斷當(dāng)前DOM節(jié)點(diǎn)是否能完全匹配對(duì)應(yīng)的css選擇器規(guī)則；如果匹配成功，返回true，否則返回false。

語(yǔ)法：

let result = element.matches(selectorString);

result 的值為 true 或 false
selectorString 是個(gè)css選擇器字符串

舉例：

 這是一個(gè)div元素

至于更多關(guān)于 Element.matches( ) 方法的細(xì)節(jié)，和對(duì)于不支持 Element.matches( ) 方法的瀏覽器的替代方案，請(qǐng)到這里查看
Element.matches( )



 

 
 
    
    
        
        
  • 1
    • 
        
  • 2
    •

效果圖

看圖，現(xiàn)在這樣，不管是點(diǎn)擊 li 還是 li 的子元素，就都可以打印出內(nèi)容了。

jQuery中的事件委托
jQuery中事件委托主要是靠on( ) 方法，我們先來(lái)看看 on( ) 方法的使用說(shuō)明

on( ) 方法主要有以下兩種形式的用法
用法一

jQueryObject.on( events [, selector ] [, data ], handler )

用法二

jQueryObject.on( eventsMap [, selector ] [, data ] )
參數(shù) 描述
events String類型，一個(gè)或多個(gè)用空格分隔的事件類型和可選的命名空間，例如"click"、"focus click"、"keydown.myPlugin"。
eventsMap Object類型，一個(gè)Object對(duì)象，其每個(gè)屬性對(duì)應(yīng)事件類型和可選的命名空間(參數(shù)events)，屬性值對(duì)應(yīng)綁定的事件處理函數(shù)(參數(shù)handler)。
selector 可選/String類型，一個(gè)jQuery選擇器，用于指定哪些后代元素可以觸發(fā)綁定的事件。如果該參數(shù)為null或被省略，則表示當(dāng)前元素自身綁定事件(實(shí)際觸發(fā)者也可能是后代元素，只要事件流能到達(dá)當(dāng)前元素即可)。
data 可選/任意類型，觸發(fā)事件時(shí)，需要通過(guò)event.data傳遞給事件處理函數(shù)的任意數(shù)據(jù)。
handler Function類型，指定的事件處理函數(shù)。

我們?cè)儆胘Query的 on( ) 方法實(shí)現(xiàn)下，最開始的例子



 

 
 
    
    
        
        
  • 1
    • 
        
  • 2
    •

更加詳細(xì)的關(guān)于 JQuery中on( )方法的解釋，推薦看這里
jQuery.on() 函數(shù)詳解

總結(jié)

用到 事件委托 的地方，應(yīng)該還是比較多的，希望大家都能理解這個(gè)東西。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/51659.html

相關(guān)文章

  • 簡(jiǎn)單說(shuō) JavaScript中的事件委托（上）

    摘要：說(shuō)明這篇文章說(shuō)中的事件委托，這次先說(shuō)一些比較基本的知識(shí)。第一段綁定了兩次事件，第二段綁定了一次事件也就是說(shuō)，原來(lái)在上綁定的事件，現(xiàn)在委托在了父元素上，而在上只需要綁定一次就可以了。我們用事件委托的方式，再來(lái)改改。 說(shuō)明 這篇文章說(shuō)JavaScript中的事件委托，這次先說(shuō)一些比較基本的知識(shí)。 事件委托 是什么 先來(lái)看看事件委托的概念 事件委托就是利用事件冒泡，只指定一個(gè)事件處理程序，就...

    fireflow 評(píng)論0 收藏0

  • 簡(jiǎn)單說(shuō) JavaScript中的事件委托（上）

    摘要：說(shuō)明這篇文章說(shuō)中的事件委托，這次先說(shuō)一些比較基本的知識(shí)。第一段綁定了兩次事件，第二段綁定了一次事件也就是說(shuō)，原來(lái)在上綁定的事件，現(xiàn)在委托在了父元素上，而在上只需要綁定一次就可以了。我們用事件委托的方式，再來(lái)改改。 說(shuō)明 這篇文章說(shuō)JavaScript中的事件委托，這次先說(shuō)一些比較基本的知識(shí)。 事件委托 是什么 先來(lái)看看事件委托的概念 事件委托就是利用事件冒泡，只指定一個(gè)事件處理程序，就...

    SexySix 評(píng)論0 收藏0

  • 簡(jiǎn)單說(shuō) JavaScript中的事件委托(下)

    摘要：說(shuō)明上次我們說(shuō)了一些，關(guān)于中事件委托的基礎(chǔ)知識(shí)，這次我們繼續(xù)來(lái)看。可選類型，一個(gè)選擇器，用于指定哪些后代元素可以觸發(fā)綁定的事件。類型，指定的事件處理函數(shù)。 說(shuō)明 上次我們說(shuō)了一些，關(guān)于 JavaScript中事件委托的 基礎(chǔ)知識(shí)，這次我們繼續(xù)來(lái)看。 解釋 先來(lái)一段代碼 1 2 ul.onclick...

    lavnFan 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<