on 的高階用法

2022-01-19 19:53:35 字數 1393 閱讀 9361

針對自己處理機制中,不僅有on方法,還有根據on演變出來的live方法(1.7後去掉了),delegate方法等等。這些方法的底層實現部分 還是on方法,這是利用了on的另乙個事件機制委託的機制衍變而來的

委託機制

.on( events ,[ selector ] ,[ data ], handler(eventobject) )
在on的第二引數中提供了乙個selector選擇器,簡單的來描述下

參考下面3層結構

目標節點 //點選在這個元素上

給出如下**:

$("div").on("click","p",fn)
事件繫結在最上層div元素上,當使用者觸發在a元素上,事件將往上冒泡,一直會冒泡在div元素上。如果提供了第二引數,那麼事件在往上冒泡的過程中遇到了選擇器匹配的元素,將會觸發事件**函式

class="

left

">

class="

aaron

">

點選這裡

慕課網上的一節,感覺挺有趣,看了下面很多同學的理解,我覺的有幾個說的很好:

1.本來事件繫結在body上,點a會冒泡到body,但指定了第二個引數是a,也就不往上冒了。

2.借鑑其他大牛的乙個例子:收快遞例子 有三個同事預計會在周一收到快遞。為簽收快遞,有兩種辦法:一是三個人在公司門口等快遞;二是委託給前台mm代為簽收。現實當中,我們大都採用委託的方案(公司也不會容忍那麼多員工站在門口就為了等快遞)。前台mm收到快遞後,她會判斷收件人是誰,然後按照收件人的要求簽收,甚至代為付款。這種方案還有乙個優勢,那就是即使公司裡來了新員工(不管多少),前台mm也會在收到寄給新員工的快遞後核實並代為簽收。

兩層意思:

1.現在委託前台的同事是可以簽收的,即程式中的現有的dom節點是有事件的;

2.新員工也是可以被前台mm代為簽收的,即程式中新新增的dom節點也是有事件的;

簡單的講, 加了第二個引數( selector )後, 如果觸發了事件( event ), 就呼叫函式(fn) ,並逐級向上冒泡查詢還有沒有這個選擇器.

$('body').on('click', 'div', function(e) )

// aaron

// left

我們將第二個引數替換成div, 並顯示div的類名就很容易懂了

我的個人理解就是先從過濾元素開始網上冒泡,找到所有過濾元素。

這時候只彈出p,因為選擇器選擇了p,然後往上冒泡找到所有p,改成a,彈出a

如果我改成div,則**兩次函式,依次彈出aaron,left.

python高階用法 Python高階用法

python高階用法 三元表示式 x 10 y 20 print x if x y else y x 100 y 20 print x if x y else y 列表推導式和生成器 列表推導式 print i for i in range 10 print i 2 for i in range 1...

sscanf的高階用法

sscanf的高階用法 printf或者sprintf一定是任何乙個c程式設計師最常見到的函式,與sprintf的作用相反,sscanf通常被用來解析並轉換字串,其格式定義靈活多變,可以實現很強大的字串解析功能。sscanf的原型很簡單,定義如下 include int sscanf const c...

awk的高階用法

2 awk的key 這就是awk陣列的有意思之處了,陣列實際上也是map,雜湊,各種強大 如awk end test 用 1 t 2組成一維陣列的key 3 awk 的範圍模板 範圍模板匹配從第乙個模板的第一次出現到第二個模板的第一次出現之間所有行。如果有乙個模板沒出現,則匹配到開頭或末尾。如 aw...