jQuery.one()方法是jQuery中的一個事件綁定方法。當某個元素上的事件被觸發時,該方法會綁定一個事件處理函數,但是這個處理函數只會在第一次觸發事件時被執行。
jQuery.fn.one = function( types, selector, data, fn ) { var origFn, type; if ( typeof types === "object" ) { // types 可以是一個對象,格式為 { type: handler } if ( typeof selector !== "string" ) { // ( types-Object, data ) data = data || selector; selector = undefined; } for ( type in types ) { this.one( type, selector, data, types[ type ] ); } return this; } if ( data == null && fn == null ) { // ( types, fn ) fn = selector; data = selector = undefined; } else if ( fn == null ) { if ( typeof selector === "string" ) { // ( types, selector, fn ) fn = data; data = undefined; } else { // ( types, data, fn ) fn = data; data = selector; selector = undefined; } } if ( fn === false ) { fn = returnFalse; } else if ( !fn ) { return this; } // 省略了一些處理 data, selector 和 types 的代碼 return this.each( function() { var self = this; var one = jQuery._data( this, "events" ).one; // jQuery._data() 是jQuery私有方法,獲取元素上綁定的事件數據 if ( !one ) { jQuery.event.add( self, types, fn, data, selector ); } else { jQuery.event.add( self, types, function( event ) { // 事件處理函數執行完后,從元素上移除該事件處理函數 jQuery.event.remove( self, types, fn ); // 同時,把事件觸發后所執行的函數修改為‘returnFalse’函數,防止事件繼續傳播 jQuery.event.remove( self, types, arguments.callee ); // 最后,執行真正的事件處理函數 return one.apply( this, arguments ); }); } }); };
上面是jQuery.one()的源碼,我們可以看到,當元素第一次觸發事件時會將處理函數添加到該元素的事件列表中,當再次觸發該事件時,會直接從該元素上刪除該事件處理函數。這樣可以有效避免事件的多次觸發。