jquery 事件綁定on bind delegate區別

W3C事件模型中的事件，首先進入捕獲階段由外向內直達目標元素，再進入冒泡階段。支持W3C模型的瀏覽器傳統的事件綁定屬於冒泡。

jquery事件綁定中on bind delegate區別聯繫

bind和delegate都是由on實現的，jquery文檔也推薦使用on

bind: function( types, data, fn ) {
     return this.on( types, null, data, fn );
    },
    unbind: function( types, fn ) {
     return this.off( types, null, fn );
    },
    delegate: function( selector, types, data, fn ) {
     return this.on( types, selector, data, fn );
    }
    undelegate: function( selector, types, fn ) {
 // ( namespace ) or ( selector, types [, fn] )
     return arguments.length === 1 ? this.off( selector, "**" ) : this.off( types, selector || "**", fn );
    }

那麼如今就bind和delegate區別

bind方法使用

$("div p").bind("click", function () {
    alert($(this).text());
})

或

$("div p").click(function () {
    alert($(this).text());
})

此方法只能爲已存在元素綁定事件，在動態添加節點出現事件失效（需爲新元素從新綁定事件，而且已有事件最好手動移除，否則會堆積佔內存）。

delegate方法使用

$("div").delegate("p", "click", function () {
    alert($(this).text());
});

此方法使用事件委託方式將事件委託給上層節點處理，很好的避免了動態添加節點重複綁定解綁，但須要注意節點綁定委託不要太深否則影響性能。