標籤:功能 tor doc 事件冒泡 int ret dom on() 元素
前兩天做了一個點擊任意位置,都能關閉菜單的功能,因為菜單裡面的每一個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就會捕獲該事件,從而執行綁定的事件處理函數。
通俗易懂地說,如果我們希望給頁面上所有的<P>標籤綁定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元素其中之一觸發的,就執行祖輩元素上委託綁定的事件處理函數。
如果在後代元素中阻止了冒泡,他就不會傳遞到祖輩,
直接在後代中為每個後代元素執行事件和函數
理解jquery on 委託事件的機制