jQuery原始碼學習10 和事件相關的方法

jquery的事件系統給每個通過jquery.event.add()方式繫結事件的dom物件生成了下面這種結構

從這張圖中可以看出，我們除了可以給元素新增像click mouseover mouseout這樣的原生事件之外

還可以新增selfevent這樣的自定義事件

自定義事件需要手動通過trigger觸發

jquery.macros =,

unbind: 
function
( type, fn ) ,
trigger: 
function
( type, data ) }};

再來看擴充套件的一些更頂層的方法

new

function
(); jquery.fn["un"+o] = function(f);
jquery.fn["one"+o] = function
(f));
});}; };}

而$("#div1").click()就是手動觸發繫結的事件，click裡面通過判斷是否有引數採取不同的操作

但是類似unclick這個方法貌似是不能移除繫結的匿名方法的

類似oneclick的這種方法是在呼叫add的時候又包裝了一層，通過count來保證了它只呼叫一次

_toggle: jquery.fn.toggle,

toggle: 
function
(a,b) ) :
, arguments );
},

hover: function

(f,g) 
return
this
.mouseover(handlehover).mouseout(handlehover);
},

通過乙個例子說明問題：

<

script
>
$(function
(),function
());
});script
>
<
div 
id="div1"
>
<
div 
id="div2"
>
<
div 
id="div3"
>
div>
div>
div>

的時候變成紅色，移出的時候變成綠色

以移出(onmouseout)為例，從#div1移出的時候如果移到了#div1外面肯定是會觸發onmouseout事件的

但是移到#div2或#div3的話也會觸發onmouseout事件的

而後一種情況往往是不希望出現的

也就是說移動到#div1的子元素上我們不希望觸發onmouseout事件

在hover內部我們可以看到當觸發onmouseout事件的時候(e.type為"mouseout")變數p儲存的是e.toelement||e.relatedtarget(這種寫法必定是為了相容了)

從toelement名字上可以猜測，p儲存的應該是移動到了哪個元素上面，在這個例子中p可能是document.body，可能是#div2，可能是#div3

接下來是乙個while迴圈，看當前的p是不是等於this，this即觸發onmouseout的元素，在這裡自然是#div1

第一次迴圈不論是移動到了document.body上、還是#div2上、還是#div3上都不會等於this

所以執行迴圈體裡面的內容p=p.parentnode

接下來的迴圈我們通過分析可以明白：如果p是document.body的話迴圈會直接結束

而且往下走也不會滿足p==this的條件，那就直接執行我們mouseout繫結的函式

如果p是#div2或#div3的時候p最終會指向#div1

再往下走就滿足了p==this的條件，從而直接return false回去

什麼都不執行

mouseout到此為止就分析完了，mouseover和它同理

jQuery原始碼學習

jquery框架學習 1 定義變數和函式 2 給jq物件，新增一些方法和屬性 3 extend jq的繼承方法 4 jq.extend 擴充套件jq的一些工具方法 5 jq複雜的選擇功能 6 callbacks 回函物件,函式的統一管理 7 deferred 延遲物件,對非同步的乙個統一管理 8 s...

jQuery原始碼學習筆記

整個jquery是乙個自呼叫的匿名函式 1 function global,factory 9return factory w 10 11 else 14 typeof window undefined window this,function window,noglobal 自呼叫函式大家都不陌生...

jquery和js原始碼

1，有關註冊時驗證的jquery view code document.oncontextmenu function e function getkeycode e function var k getkeycode e if k 96 k 105 k 48 k 57 k 65 k 90 k 8 k...