jQuery的live()方法是一個優秀的事件代理工具,但是在jQuery 1.7版本后,它被廢棄了。為了了解這個被廢棄的方法,下面我們一起來看看它的源碼。
$('a').live('click', function(){ alert('clicked!'); });
以上代碼會在頁面中的所有a標簽上觸發一個click事件,并彈出一個警告框。在jQuery 1.7版本之前,該方法是非常常用的。但是為什么這個方法被廢棄了呢?
讓我們來看一下live()方法的源碼:
jQuery.fn.live = function( types, data, fn ) { jQuery(this.context).on( types, this.selector, data, fn ); return this; };
可以看到,live()方法本質上只是對on()方法的封裝。它把this.context作為事件委托的目標,this.selector作為選擇器,并調用on()方法。on()方法也可以實現事件委托,所以在1.7版本后,live()方法被廢棄了。
下面是on()方法的源碼:
jQuery.fn.on = function( types, selector, data, fn, one ) { var origFn, type; if ( typeof types === "object" ) { if ( typeof selector !== "string" ) { data = data || selector; selector = undefined; } for ( type in types ) { this.on( type, selector, data, types[ type ], one ); } return this; } if ( data == null && fn == null ) { fn = selector; data = selector = undefined; } else if ( fn == null ) { if ( typeof selector === "string" ) { fn = data; data = undefined; } else { fn = data; data = selector; selector = undefined; } } //.... };
從這段代碼中,我們可以看到on()方法非常靈活,可以替代live()方法,并且配合off()方法使用,可以更好的管理事件的綁定和解綁。
總之,雖然live()方法被廢棄了,但是通過學習它的源碼,我們可以更好地了解jQuery的事件委托機制,也能更好地使用on()和off()等相關方法。
上一篇apiclou vue
下一篇react vue 組合