理解jquery on 委託事件的機制

2022-01-19 05:42:23 字數 1937 閱讀 1520

前兩天做了乙個點選任意位置,都能關閉選單的功能,因為選單裡面的每乙個a,的點選事件都是用on繫結的。所以在阻止冒泡的時候不管用,今天特意來理解一下on的機制

on 是委託事件,利用的就是冒泡原理

$(selector).on(event,[selector],handler);

selector 如果為空,表示的就是目標元素就是所選元素,如果有值代表的是符合所選元素的所有後代元素

實際上,事件委託的事件處理函式是當被委託的元素上的事件觸發時判斷e.target後執行,而不是目標元素上的事件被觸發後就立即執行,在沒有阻止冒泡的情況下,事件還是一層層傳播的,只是處理函式在事件到達那一層被觸發的問題。根據事件**的規則,點選li元素後,click事件是從li至ul至ul父元素一層層冒泡上去的,沿途觸發各個元素上的事件處理函式。如果我們將事件委託在ul上,呼叫了stoppropagation,就阻止了事件從ul繼續向上冒泡,而不是阻止事件從li向上冒泡。這樣從ul開始,ul及其祖先元素上的事件冒泡被阻止。

重要說明

如果傳遞了selector引數,那麼on()函式並不是為當前jquery物件匹配的元素繫結事件處理函式,而是為它們的後代元素中符合選擇器selector引數的元素繫結事件處理函式on()函式並不是直接為這些後代元素挨個繫結事件,而是委託給當前jquery物件的匹配元素來處理。由於dom 2級的事件流機制,當後代元素selector觸發事件時,該事件會在事件冒泡中傳遞給其所有的祖輩元素,當事件流傳遞到當前匹配元素時,jquery會判斷是哪個後代元素觸發了事件,如果該元素符合選擇器selector,jquery就會捕獲該事件,從而執行繫結的事件處理函式

通俗易懂地說,如果我們希望給頁面上所有的標籤繫結click事件處理函式,我們可以在每個p標籤上直接分別繫結click事件處理函式。例如:

// 為所有p元素分別繫結click事件處理函式handler

$("p").on("click",handler);

我們也可以在這些p標籤的任意乙個公共祖輩元素上繫結事件委託機制,利用dom的事件冒泡機制來統一委託處理。當我們觸發了某個元素的click事件,js會依次通知該元素及其"父輩"元素、"爺爺輩"元素……直到最頂部的document物件為止,如果這些元素上繫結了click事件處理函式就會依次執行。

// 在body元素上繫結click事件處理函式handler,如果這個click事件是由其後代的p元素觸發的,就執行handler

$(document.body).on("click","p",handler);

在這裡的示例中,事件委託機制就是,我們不為每個p元素直接繫結click事件處理函式,而是委託給其某個公共的祖輩元素(此處示例中為document.body),"告訴"他:如果接收到了click事件觸發通知,並且這個click事件是由我們這些p元素其中之一觸發的,就執行祖輩元素上委託繫結的事件處理函式。

如果在後代元素中阻止了冒泡,他就不會傳遞到祖輩,

直接在後代中為每個後代元素執行事件和函式

例子$("ul").on('click',function())

$('ul').on('click','li',function(e))

如果是實現點選任意地方關閉的話,要這樣寫

$(document).on('click','li',function(e))

這樣之後點選li元素本身的話,他不會冒泡到document上。也就不會關閉 li .

$(document).on('click',function())

jquery on 事件委託

功能 在選擇元素上繫結乙個或多個事件的事件處理函式 on函式原型 on events,selector data fn 引數說明 events 乙個或多個用空格分隔的事件型別和可選的命名空間,如 click 或 keydown.myplugin selector 乙個選擇器字串用於過濾器的觸發事件的...

委託 事件的個人理解

事件 乙個用event進行了封裝的委託型別的變數,使得在進行註冊的時候只能使用 或者 需要乙個觸發者和乙個執行者,類似於observer模式中的subject和observer 當乙個物件的狀態發生改變時,所有依賴於他的物件都會得到通知並被自動更新。觸發者 對委託 事件進行定義,並觸發事件的執行。s...

c 委託事件

1,什麼是委託 委託是什麼?從生活理解就像是你是乙個c 程式設計師,你對c 並不了解,當需要進行c 分析的時候你委託給你的一位懂c 的同事幫你來完成 在c 中,委託的作用是這樣描述的 委託就像乙個函式的指標,在程式執行時可以使用它們來呼叫不同的函式。簡單點說,委託能夠引用函式,通過傳遞位址的機制完成...