簡單說 JavaScript中的事件委托(下)

bang590 發布于2019-08-21 18:30 / 993人閱讀

摘要：說明上次我們說了一些，關于中事件委托的基礎知識，這次我們繼續來看。可選類型，一個選擇器，用于指定哪些后代元素可以觸發綁定的事件。類型，指定的事件處理函數。

說明

上次我們說了一些，關于 JavaScript中事件委托的基礎知識，這次我們繼續來看。

解釋

先來一段代碼

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

效果圖

看圖，當點擊藍色 span 的時候，沒有打印 li 被點擊了，當點擊紅色 li 的時候，才都打印出來，這是因為當點擊 span 的時候，事件源是 span，雖然也能觸發事件，但是并沒有走 if判斷，所以就不會打印 li 被點擊了，當點擊 li 的時候，事件源是 li ，所以就可以了，但是我們往往需要的是，不管是點擊li，還是點擊了 li 的子元素，都需要執行操作。
好的，我們來改改代碼。
這次我們需要 Element.matches( ) 這個方法，

作用：
判斷當前DOM節點是否能完全匹配對應的css選擇器規則；如果匹配成功，返回true，否則返回false。

語法：

let result = element.matches(selectorString);

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

舉例：

 這是一個div元素

至于更多關于 Element.matches( ) 方法的細節，和對于不支持 Element.matches( ) 方法的瀏覽器的替代方案，請到這里查看
Element.matches( )

效果圖

看圖，現在這樣，不管是點擊 li 還是 li 的子元素，就都可以打印出內容了。

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

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

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

用法二

jQueryObject.on( eventsMap [, selector ] [, data ] )

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

我們再用jQuery的 on( ) 方法實現下，最開始的例子

更加詳細的關于 JQuery中on( )方法的解釋，推薦看這里
jQuery.on() 函數詳解

總結

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

云服務器 GPU云服務器 javascript事件委托委托事件事件委托事件委托c

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

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

簡單說 JavaScript中的事件委托（上）

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

fireflow 2019-08-29 14:07 評論0 收藏0
簡單說 JavaScript中的事件委托（上）

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

SexySix 2019-08-21 18:29 評論0 收藏0
簡單說 JavaScript中的事件委托(下)

摘要：說明上次我們說了一些，關于中事件委托的基礎知識，這次我們繼續來看。可選類型，一個選擇器，用于指定哪些后代元素可以觸發綁定的事件。類型，指定的事件處理函數。說明上次我們說了一些，關于 JavaScript中事件委托的基礎知識，這次我們繼續來看。解釋先來一段代碼 1 2 ul.onclick...

MasonEast 2019-08-01 18:20 評論0 收藏0
簡單說 JavaScript中的事件委托(下)

摘要：說明上次我們說了一些，關于中事件委托的基礎知識，這次我們繼續來看。可選類型，一個選擇器，用于指定哪些后代元素可以觸發綁定的事件。類型，指定的事件處理函數。說明上次我們說了一些，關于 JavaScript中事件委托的基礎知識，這次我們繼續來看。解釋先來一段代碼 1 2 ul.onclick...

lavnFan 2019-08-29 14:09 評論0 收藏0