-
過一下index.html就行查看全部
-
index.html的執行結果有待通過后邊的課程分析一下查看全部
-
內部冒泡與外部冒泡獨立處理,相互不會影響,但是又有千絲萬縷的關系??? 初看 trigger 源碼部分真有點暈,處理的 hack 太多了: 命名空間的過濾 模擬事件對象 制作一個觸發的路徑隊列eventPath 對 eventPath 進行模擬冒泡的觸發 在一個層級調用 dispatch 處理各自的內部事件關系(委托)查看全部
-
while ((matched = handlerQueue[i++]) && !event.isPropagationStopped()) { event.currentTarget = matched.elem; j = 0; while ((handleObj = matched.handlers[j++]) && !event.isImmediatePropagationStopped()) { ret = handleObj.handler.apply(matched.elem, args); //如果返回了false if (ret !== undefined) { if ((event.result = ret) === false) { event.preventDefault(); event.stopPropagation(); } 總的來說 jQuery.event.handlers 做的事情: 將有序地返回當前事件所需執行的所有事件處理程序。 這里的事件處理程序既包括直接綁定在該元素上的事件處理程序,也包括利用冒泡機制委托在該元素的事件處理程序(委托機制依賴于 selector)。 在返回這些事件處理程序時,委托的事件處理程序相對于直接綁定的事件處理程序在隊列的更前,委托層次越深,該事件處理程序則越靠前。查看全部
-
那么事件的執行就需要有個先后,jQuery要如何排序呢? 依賴委托節點在 DOM 樹的深度安排優先級,委托的 DOM 節點層次越深,其執行優先級越高,委托的事件處理程序相對于直接綁定的事件處理程序在隊列的更前面,委托層次越深,該事件處理程序則越靠前。 index.html執行結果: test 委托到p觸發 被阻止了 mousedown body查看全部
-
總的來說 jQuery.event.fix 做的事情: 1.將原生的事件對象 event 修正為一個新的可寫 event 對象,并對該 event 的屬性以及方法統一接口 2.該方法在內部調用了 jQuery.Event(event) 構造函數查看全部
-
如上結構,currentTarget 是 aaron 的 div 元素 , target 是 p 元素,事件對象是有作用域的 currentTarget 是等于 this 的。 事件對象的基礎大家都是知道了,jQuery為了實現統一的事件對象調用與委托的的處理,將事件對象單獨重寫,這樣如果用戶做了任何的行為處理,jQuery 內部都能獲取到狀態值,從而用來處理同一個元素綁定多個模擬事件的判斷處理。這也是重寫后的一個重要意義。查看全部
-
某些事件類型的有特殊行為和屬性,換句話說就是某些事件不是大眾化的事件不能一概處理。此時就需要用到Special Event機制了。如果有興趣更多了解,可以看一下index.html jQuery.event.add 方法在第一次初始化處理器的時候,會檢查是否為自定義事件,如果存在則將會把控制權限交給自定義事件的事件初始化函數,同樣事件卸載的 jQuery.event.remove 方法在刪除處理器前也會檢查此處。查看全部
-
本節在index.html中通過special模擬了input 和 textarea事件查看全部
-
本節學習,一個是下邊總結的結構,另一個是index.html的注釋 理解 jQuery.event.add 代碼結構: 第一步:獲取數據緩存 -> elemData = data_priv.get( elem ); 第二步:創建編號 -> handler.guid= jQuery.guid++; 主要目的是用來尋找或者刪除handler,因為這個東東是緩存在緩存對象上的,沒有直接跟元素節點發生關聯。 第三步:給緩存增加事件處理句柄 -> events,eventHandle 都是 elemData 緩存對象內部的 1. 一個是 events,是jQuery內部維護的事件列隊 2. 一個是 handle,是實際綁定到elem中的事件處理函數 之后的代碼無非就是對這 2 個對象的篩選、分組、填充了。 第四步: 填充事件名(events)與事件句柄(handle) 通過那個圖片的內容取理解,那個圖片非常到位查看全部
-
本節學習,一個是下邊總結的結構,另一個是index.html的注釋 理解 jQuery.event.add 代碼結構: 第一步:獲取數據緩存 -> elemData = data_priv.get( elem ); 第二步:創建編號 -> handler.guid= jQuery.guid++; 第三步:給緩存增加事件處理句柄 1. 一個是 events,是jQuery內部維護的事件列隊 2. 一個是 handle,是實際綁定到elem中的事件處理函數 之后的代碼無非就是對這 2 個對象的篩選、分組、填充了。 第四步: 填充事件名(events)與事件句柄(handle) 通過那個圖片的內容取理解,那個圖片非常到位查看全部
-
本節學習方法: index.html代碼理解清楚了,上邊現在注釋補的也差不多了。 左邊文檔大概過一下,知道說的什么,然后接著往下看。查看全部
-
$('#element).delegate('a', 'click', function() { alert("!!!") }); 任何時候只要有事件冒泡到$(‘#element)上,它就查看該事件是否是click事件,以及該事件的目標元素是否與CCS選擇器相匹配。如果兩種檢查的結果都為真的話,它就執行函數。 可以注意到,這一過程與.live()類似,但是其把處理程序綁定到具體的元素而非document這一根上。那么 (′a′).live()==(document).delegate('a') 總結 在下列情況下,應該使用 .live()或 .delegate(),而不能使用 .bind(): 1. 為DOM中的很多元素綁定相同事件; 2. 為DOM中尚不存在的元素綁定事件; 3. 用.bind()的代價是非常大的,它會把相同的一個事件處理程序hook到所有匹配的DOM元素上 4. 不要再用.live()了,它已經不再被推薦了,而且還有許多問題 5. .delegate()會提供很好的方法來提高效率,同時我們可以添加事件處理方法到動態添加的元素上 我們可以用.on() 來代替上述的 3 種方法。 不足點也是有的: 1. 并非所有的事件都能冒泡,如load, change, submit, focus, blur 2. 加大管理復雜 3. 不好模擬用戶觸發事件 4. 如何取舍就看項目實際中運用了查看全部
-
事件委托就是事件目標自身不處理事件,而是把處理任務委托給其父元素或者祖先元素,甚至根元素(document) 事件傳送可以分為3個階段。 (1)在事件捕捉(Capturing)階段,事件將沿著DOM樹向下轉送,目標節點的每一個祖先節點,直至目標節點。例如,若用戶單擊了一個超鏈接,則該單擊事件將從document節點轉送到html元素,body元素以及包含該鏈接的p元素。在此過程中,瀏覽器都會檢測針對該事件的 捕獲事件監聽器,并運行這個 捕獲事件監聽器。 (2)在目標(target)階段,瀏覽器在查找到已經指定給目標事件的事件監聽器之后,就會運行該事件監聽器。目標節點就是觸發事件的 DOM 節點。例如,如果用戶單擊一個超鏈接,那么該鏈接就是目標節點(此時的目標節點實際上是超鏈接內的文本節點)。 (3)在冒泡(Bubbling)階段,事件將沿著DOM樹向上轉送,再次逐個訪問目標元素的祖先節點到document節點。該過程中的每一步。瀏覽器都將檢測那些不是捕捉事件監聽器的事件監聽器,并執行它們。查看全部
-
我們參考右邊的代碼,整個流程如下: 分解類型,jQuery對象,節點對象,文本,字符串,腳本 引入nodes收集各種分解的類型數據 針對html節點,兼容IE的處理,先過濾空白,然后補全tr,td等 創建文檔碎片的div包含節點,把html結構給innerHTML進去 取出創建的節點,jQuery.merge(nodes, tmp.childNodes),因為靠div包裝過查看全部
舉報
0/150
提交
取消