實例方法和便捷方法是指jQuery可以直接通過鏈接操作的方法，是通過調用$.event上的方法(上一節介紹的底層方法)來實現的，常用的如下: on(types,selector,data,fn,one) ;為匹配元素集合中的每個元素綁定一個或多個類型的事件監聽函數 types ;事件類型字元串，多個 ...
實例方法和便捷方法是指jQuery可以直接通過鏈接操作的方法，是通過調用$.event上的方法(上一節介紹的底層方法)來實現的，常用的如下:
- on(types,selector,data,fn,one) ;為匹配元素集合中的每個元素綁定一個或多個類型的事件監聽函數
- types ;事件類型字元串，多個事件類型之間用空格隔開
- selector ;可選，是一個選擇器表達式字元串，用於綁定代理事件。
- data ;傳遞給事件監聽函數的自定義數據，可以是任何類型。
- fn ;待綁定的監聽函數
- one ;該事件是否只執行一次,為方法.one()提供支持
writer by:大沙漠 QQ:22969969
- off(types,selector,fn) ;移除匹配元素中每個元素上綁定的一個或多個類型的監聽函數，參數如下:
- types ;一個或多個以空格分隔的事件類型和可選的命名空間
- selector ;可選的選擇器表達式字元串，用於移除代理事件
- fn ;待移除的監聽函數，可以設置為false，表示內部定義的只返回false的函數
- off(types,selector,fn) ;移除匹配元素中每個元素上綁定的一個或多個類型的監聽函數
- types ;一個或多個以空格分隔的事件類型和可選的命名空間
- selector ;可選的選擇器表達式字元串，用於移除代理事件
- fn ;待移除的監聽函數，可以設置為false
- bind(types,data,fn) ;綁定一個普通事件
- trigger(type, data) 執行每個匹配元素上綁定的監聽函數和預設行為，並模擬冒泡過程
- one(types,selector,data,fn) ;為匹配元素集合中的每個元素綁定最多執行一次的事件監聽函數
- hover(fnOver, fnOut) ;用於在匹配元素上綁定一個或兩個監聽函數，當滑鼠指針進入和離開時，綁定的監聽函數被執行
我們還是以上一節的實例為例，用實例方法改寫一下，如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="http://libs.baidu.com/jquery/1.7.1/jquery.min.js"></script> <style>div{width: 200px;padding-top:50px;height: 150px;background: #ced;}div button{margin:0 auto;display: block;}</style> </head> <body> <div> <button id="button">按鈕1</button> </div> <script> $("div").on('click',()=>console.log('div普通單擊事件')); $('div').on('click','button',()=>console.log('d1代理事件')) </script> </body> </html>
渲染如下:
和上一節一樣，我們在div上綁定了一個普通事件和代理事件，當點擊div時觸發普通事件，點擊按鈕時分別觸發普通事件和代理事件。
另外為了更方變使用事件，jQuery還定義了很多的便捷事件方法，可以直接在jQuery實例上調用,註意:便捷方法不能綁定代理事件，只能綁定普通事件，所有的便捷方法如下:
blur focus focusin focusout load resize scroll unload click dblclick mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave change select submit keydown keypress keyup error contextmenu
我們將上面的例子改寫一下，用便捷方法來實現，如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="http://libs.baidu.com/jquery/1.7.1/jquery.min.js"></script> <style>div{width: 200px;padding-top:50px;height: 150px;background: #ced;}div button{margin:0 auto;display: block;}</style> </head> <body> <div> <button id="button">按鈕1</button> </div> <script> $("div").click(()=>console.log('div普通單擊事件')); //用便捷事件來實現 $('div').on('click','button',()=>console.log('d1代理事件')) //代理事件不能用便捷方法來操作，因此我們用實例方法來實現 </script> </body> </html>
效果和上面是一樣的。
源碼分析
實例方法是定義在jQuery.fn上的,on主要對參數做一些判斷，以支持多種格式的調用方法，實現如下:
jQuery.fn.extend({ on: function( types, selector, data, fn, /*INTERNAL*/ one ) { //該方法主要是修正參數。為匹配元素集合中的每個元素綁定一個或多個類型的事件監聽函數。 var origFn, type; // Types can be a map of types/handlers //如果types是對象時，即參數格式是.on(Object,selector,data,one)或.one(Object,data,one)則 if ( typeof types === "object" ) { // ( types-Object, selector, data ) if ( typeof selector !== "string" ) { // ( types-Object, data ) data = selector; selector = undefined; } for ( type in types ) { //遍歷參數types，遞歸調用方法.on(types,selector,data,fn,one)綁定事件。 this.on( type, selector, data, types[ type ], one ); } return this; } if ( data == null && fn == null ) { //如果沒有參數3、4，則認為格式是.on(types,fn) // ( types, fn ) fn = selector; //把第二個參數修正為fn。 data = selector = undefined; } else if ( fn == null ) { //傳入了三個參數時 if ( typeof selector === "string" ) { //如果第二個參數是字元串，則認為格式是:.on(types,selector,fn) 忽略參數data，並把第三個參數作為參數fn。 // ( types, selector, fn ) fn = data; data = undefined; } else { //否則則認為忽略參數selector，並把第而個參數作為參數data，並把第三個參數作為參數fn。格式是.on(types,data,fn) // ( types, data, fn ) fn = data; data = selector; selector = undefined; } } if ( fn === false ) { //如果參數fn是布爾值false,則把它修正為總返回false的函數returnFalse()。 fn = returnFalse; } else if ( !fn ) { //如果fn沒有值則直接返回。 return this; } if ( one === 1 ) { //當方法one()調用.on()時，該參數為1，就會把監聽函數fn重新封裝為一個只會執行一次的新監聽函數。 origFn = fn; fn = function( event ) { // Can use an empty set, since event contains the info jQuery().off( event ); return origFn.apply( this, arguments ); }; // Use same guid so caller can remove using origFn fn.guid = origFn.guid || ( origFn.guid = jQuery.guid++ ); } return this.each( function() { //遍歷當前的this jQuery.event.add( this, types, fn, data, selector ); //調用add()綁定事件 }); }, one: function( types, selector, data, fn ) { //為匹配元素集合中的每個元素綁定一個或多個類型的事件監聽函數，每個監聽函數在每個匹配元素上最多執行一次。該方法簡單的通過調用.on(types,selector,data,fn,one)來實現。 return this.on.call( this, types, selector, data, fn, 1 ); }, /*略*/ })
對於便捷方法來說，他就是在$.fn上定義每一個屬性，值為一個函數，內部還是調用$.fn.on來實現添加事件的，如下:
jQuery.each( ("blur focus focusin focusout load resize scroll unload click dblclick " +
"mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave " +
"change select submit keydown keypress keyup error contextmenu").split(" "), function( i, name ) { //參數1是一個數組 參數2是個函數，其中name是值，比如blur、focus
// Handle event binding
jQuery.fn[ name ] = function( data, fn ) { //初始化事件便捷方法，在jQuery.fn對象上添加元素，這樣jQuery實例就可以直接訪問了
if ( fn == null ) { //修正參數，如果只傳入一個參數，則把該參數視為fn參數，把data視為null
fn = data;
data = null;
}
return arguments.length > 0 ? //根據參數個數決定是綁定事件還是觸發事件
this.on( name, null, data, fn ) : //如果參數個數大於1，則調用方法.on()綁定事件監聽函數
this.trigger( name ); //如果沒有參數，則調用方法.trigger()觸發事件監聽函數和預設行為
};
if ( jQuery.attrFn ) { //記錄事件便捷方法名，在調用jQuery.attr()讀取或設置HTML屬性時，如果屬性名與事件便捷方法名同名，則會改為調用同名的事件便捷方法a
jQuery.attrFn[ name ] = true;
}
if ( rkeyEvent.test( name ) ) {
jQuery.event.fixHooks[ name ] = jQuery.event.keyHooks;
}
if ( rmouseEvent.test( name ) ) {
jQuery.event.fixHooks[ name ] = jQuery.event.mouseHooks;
}
});
可以看到，如果執行便捷方法時不傳遞參數將觸發該事件，例如:$('div').click()將會觸發在該div上綁定的普通事件。
