bind和on的區別

bind方法與on方法都是事件綁定,可是二者卻又有着一個大區別:事件委託jquery

jquery文檔中bind和on函數綁定事件的用法:app

.bind(events [,eventData], handler)函數

.on(events [,selector]  [,data], handler)性能

從文檔中能夠看出,.on方法比.bind方法多一個參數'selector'子類選擇器;spa

事件委託就是子類的事情委託給父類的去作,而這就讓咱們想起了冒泡事件,是的,這的確是委託事件的原型,而咱們的selector,則是判斷是否是那個子元素觸發的事件,若是不是,天然就忽略掉了;事件

好處資源

1.萬一子元素很是多,給每一個子元素都添加一個事件,會影響到性能;文檔

2.爲動態添加的元素也能綁上指定事件;原型

1好比一個有着1000條新聞的新聞列表,當咱們綁定1000次的時候,會耗費不少資源,而一次事件委託就足夠了;io

2.如:$('ul li').on('click', function(){console.log('click');})的綁定方式和$('ul li').bind('click', function(){console.log('click');})同樣;我經過js給ul添加了一個li:$('ul').append('<li>js new li<li>');');這個新加的li是不會被綁上click事件的

可是我用$('ul').on('click', 'li', function(){console.log('click');}方式綁定,而後動態添加li:$('ul').append('<li>js new li<li>');這個新生成的li被綁上了click事件

相關文章
相關標籤/搜索