Jquery揭秘系列：談談bind,one,live,delegate事件及實現

 

      在Jquery里面，我們用的最多的就是事件綁定了，事件綁定有多個函數。例如：bind，one,live,delegate等等。

      我們先看看他們的定義，直接進入主題：

bind( )方法用於將一個處理程序附加到每個匹配元素的事件上並返回jQuery對象。

.bind(eventType[, evnetData], Handler(eventObject))

其中，參數eventType是一個字符串，包含一個或多個javaScript事件類 型，例如click，submit或自定義事件的名稱，指定多個事件類型時用空格分隔各個類型；eventData為Map類型，給出要傳遞給事件處理程 序的數據，handler指定觸發該事件時要執行的函數，eventObject表示事件對象。

.bind()方法將事件處理程序handler附加到匹配元素集合中的每個元素的eventType事件上，如果需要，還可以向事件處理程序傳遞數據。

live( )方法將一個事件處理程序附加到與當前選擇器匹配的所有元素（包含現有的或將來添加的）的指定事件上並返回jQuery對象。

.live(eventType,[eventData],handler)

其中，參數eventType是一個字符串，包含一個或多個javaScript事件類 型，例如click，keydown或自定義事件的名稱，eventData是可選參數，為Map類型，給出要傳遞給事件處理程序的數據，該參數是在 jQuery1.4中添加的；handler是一個函數，當觸發該事件時將執行這些函數

.live()方法將事件處理程序handler附加到每個匹配元素（包含當前存在的和將來添加的）的eventType事件上，必要時還可以使用參加eventData向事件處理程序傳遞數據。

.live()方法是基本的.bind()方法的一個變形，后者可以將事件處理程序附加到 元素·，當調用.bind()時，jQuery對象匹配的元素將被附加上事件處理程序，但以后添加的元素並不會被附加該事件處理程序，因此，還需要對這些 元素再次調用.bind()方法。

.one()方法將事件處理程序附加到匹配元素的指定事件並返回jQuery對象。所附加的事件處理程序最多只能執行一次。

.one(eventType,[eventData],handler(eventObject))

其中，參數eventType是一個字符串，包含一個或多個javaScript事件類 型，例如click，submit或自定義事件的名稱，指定多個事件類型時用空格分隔各個類型；eventData為Map類型，給出要傳遞給事件處理程 序的數據，handler指定觸發該事件時要執行的函數，eventObject表示事件對象。

.one()方法與.bind()類似，所不同的是，使用.one()綁定的事件處理程序在執行一次之后將自動取消綁定。

.delegate()方法基於一組特定的根元素將處理程序附加到匹配選擇器的所有元素（現有的或將來的）的一個或多個事件上。

.delegate(selector,eventType[,eventData],handler)

其中，參數 selector是一個選擇器，用於篩選觸發事件的元素；eventType是一個字符串，指定一個或多個JavaScript事件類型（多個事件用空格 分隔），例如click,keydown或自定義事件名稱；eventData為映射類型，表示要傳遞給事件處理程序的數據；handler表示觸發該事 件時執行的函數。

.delegate()與.live()類似，可將每個事件的綁定委托給指定的DOM元素。

 

再說說區別：

• bind是在dom樹加載后，對元素的綁定，屬於后期綁定。

• one是在dom樹加載后，對元素的綁定，和bind一樣屬於后期綁定，但是會在事件執行之后移除元素的綁定事件，事件只執行一次。

• live 是先把事件綁定在document對象上面，通過事件冒泡，判斷當前處於目標狀態的元素是不是預綁定的那個元素對象，然后執行事件，屬於前期綁定，元素可以是已存在的，也可以是動態添加的。

• delegate綁定的元素可以是已經存在的，也可以是動態添加的。如果是已經存在的就會選定一個父元素，通過冒泡來觸發指定子元素的事件。如果是動態添加的，就以document為父元素來觸發冒泡事件。

• （注：這里所說的后期綁定指的是元素已經加載后，進行事件的綁定。前期綁定指的是元素尚未存在，為動態元素添加事件）

     這幾種方法推薦使用bind和delegate，因為live是綁定事件在document上面，然后通過冒泡查詢元素執行事件，很耗性能。

 

      它們的原生js實現 ：

     

        (function (context) {
            var _$ = function (selector) {
                return new _$.prototype.Init(selector);
            }
            _$.prototype = {
                Init: function () {
                    var arr = Array.prototype.slice.call(arguments);
                    if (arr.length > 0)
                    {
                        if (typeof arr[0] == "string") {
                            this.element = document.getElementById(arr[0]);
                        }
                        else if (Object.prototype.toString.call(arr[0])=="object Object") {
                            this.element = arr[0];
                        }
                    }

                },
                bind: function (type, fn) {
                    if (this.element) {
                        if (document.addEventListener) {
                            this.element.addEventListener(type, fn, false);
                        }
                        else if (document.attachEvent) {
                            this.element.attachEvent('on' + type, fn);
                        }
                        else {
                            this.element['on' + type] = fn;
                        }
                    }
                },
                unbind: function (type, fn) {
                    if (this.element) {
                        if (document.removeEventListener) {
                            this.element.removeEventListener(type, fn, false);
                        }
                        else if (document.attachEvent) {
                            this.element.detachEvent('on' + type, fn);
                        }
                        else {
                            this.element['on' + type] = null;
                        }
                    }
                },
                one: function (type, fn) {
                    var self = this;
                    if (this.element) {
                        if (document.addEventListener) {
                            this.element.addEventListener(type, function () {
                                self.element.removeEventListener(type, arguments.callee, false);
                                fn();
                            }, false);
                        }
                        else if (document.attachEvent) {
                            this.element.attachEvent('on' + type, function () {
                                self.element.detachEvent('on' + type, arguments.callee);
                                fn();
                            });
                        }
                        else {
                            this.element['on' + type] = function () {
                                self.element['on' + type] = null;
                                fn();
                            };
                        }
                    }

                },
                live: function (type, fn) {
                    var self = this;
                    if (document.addEventListener) {
                        document.addEventListener(type, function (e) {
                            var evt = e || window.event;
                            var target = evt.srcElement || evt.target;
                            if (target.id == self.element.id) {
                                fn();
                            }
                        }, false);
                    }
                    else if (document.attachEvent) {
                        document.attachEvent('on' + type, function (e) {
                            var evt = e || window.event;
                            var target = evt.srcElement || evt.target;
                            if (target.id == self.element.id) {
                                fn();
                            }
                        });
                    }
                    else {
                        document['on' + type] = function (e) {
                            var evt = e || window.event;
                            var target = evt.srcElement || evt.target;
                            if (target.id == self.element.id) {
                                document['on' + type] = null;
                                fn();
                            }
                        };
                    }
                },
                delegate: function (flag, type, fn) {
                    var self = this;
                    if (document.addEventListener) {
                        self.element.addEventListener(type, function (e) {
                            var evt = e || window.event;
                            var target = evt.srcElement || evt.target;
                            if (target.tagName.toLowerCase() == flag) {
                                fn();
                            }
                        }, false);
                    }
                    else if (document.attachEvent) {
                        self.element.attachEvent('on' + type, function (e) {
                            var evt = e || window.event;
                            var target = evt.srcElement || evt.target;
                            if (target.tagName.toLowerCase() == flag) {
                                fn();
                            }
                        });
                    }
                    else {
                        self.element['on' + type] = function (e) {
                            var evt = e || window.event;
                            var target = evt.srcElement || evt.target;
                            if (target.tagName.toLowerCase() == flag) {
                                fn();
                            }
                        };
                    }



                }

            }
            _$.prototype.Init.prototype = _$.prototype;

            context.$ = _$;
        })(window);

     這里就是一些兼容性代碼，閱讀起來沒啥難度，如果有描述不清楚的地方，可以留言。