在使用jQuery開發網頁的時候,我們經常需要用到事件綁定,使用on方法可以很方便地綁定事件。在事件處理函數中獲取事件源this的方式也有很多種,本文將介紹在使用on方法時怎樣獲取this。
首先,我們來看一下on方法的語法:
$(selector).on(event, childSelector, data, function(eventObject))
其中,event參數是必須的,用于指定要綁定的事件,另外三個參數都是可選的。data用于向事件處理函數傳遞自定義數據,childSelector用于指定要綁定事件的子元素選擇器。
在處理事件的時候,eventObject是事件對象,可以用來獲取事件的相關信息。而this則是指向當前事件所在的DOM元素。但是由于我們通常會在事件處理函數里使用其他函數,這時候this就有可能發生了改變,因此我們需要在事件處理函數外先把this保存起來。
我們可以使用jQuery提供的$.proxy()方法來改變事件處理函數內部的this指向。具體語法如下:
$(selector).on(event, childSelector, data, $.proxy(function, context))
其中,context參數用于指定this的新指向,function是原來的事件處理函數。這樣,如果在事件處理函數里調用其他函數,this也不會改變了。
除了使用$.proxy()方法之外,我們也可以使用匿名函數將this保存起來。
$(selector).on(event, childSelector, data, function(){ var that = this; //此時,that就指向當前事件所在的DOM元素 });
總之,在使用on方法綁定事件的時候,我們需要時刻注意獲取事件源this的方式,以便正確地處理事件。