講這一節之前,先回顧之前一段程式碼:
(function (win) { var _$ = function (selector, context) { return new _$.prototype.Init(selector, context); } _$.prototype = { Init: function (selector, context) { this.elements = []; var context = context || document; if (context.querySelectorAll) { var arr = context.querySelectorAll(selector); for (var i = 0; i < arr.length; i++) { this.elements.push(arr[i]); } } ////这一块是选择器的实现,没有写完,可以自己实现 }, each: function (callback) { if (this.elements.length > 0) { for (var i = 0; i < this.elements.length; i++) { callback.call(this, i, this.elements[i]); } } } } _$.prototype.Init.prototype = _$.prototype; window.$ = _$; })(window || global);
上面我們實作了節點的查找,今天要講的是對節點的事件綁定。
熟悉Jquery 原始碼的TX應該知道:我們上面的程式碼少了ready事件,只是針對節點進行查詢,並沒有將document物件考慮進去。我之前單獨講過window.onload和 document. ready的差別,也擴充了document.ready事件。
現在我們把擴充方法加到這裡面:
我們的Init方法要改正一下:
Init: function (selector, context) { this.elements = []; if (typeof selector === "function") { this.elements.push(document); this.ready(selector); } else { var context = context || document; var isDocument = function (ele) { var tostring = Object.prototype.toString; return tostring.call(ele) == "[object HTMLDocument]" || "[object Document]"; } if (isDocument(selector)) { this.elements.push(selector); } else if (context.querySelectorAll) { var arr = context.querySelectorAll(selector); for (var i = 0; i < arr.length; i++) { this.elements.push(arr[i]); } } } }
這段程式碼的大致意思是:如果傳入的參數selector是function類型,就執行ready事件。如果是document就將document物件插入this.elements陣列裡面(這個傳入之後,會在ready事件裡面進行判斷)。如果是字元竄,就查詢出節點,循環插入到this.elements陣列裡面,沒什麼難度。主要考慮到$(document).ready和$(function(){})這兩種ready事件的寫法。
我們接下來把ready函數加進來:
ready: function (callback) { var isDocument = function (ele) { var tostring = Object.prototype.toString; return tostring.call(ele) == "[object HTMLDocument]" | "[object Document]"; } if (isDocument(this.elements[0])) { if (document.addEventListener) { document.addEventListener('DOMContentLoaded', function () { document.removeEventListener('DOMContentLoaded', arguments.callee, false); callback(); }, false); } else if (document.attachEvent) { document.attachEvent('onreadystatechange', function () { if (document.readyState == "complete") { document.detachEvent('onreadystatechange', arguments.callee); callback(); } }); } else if (document.lastChild == document.body) { callback(); } } }
這段程式碼我之前其實講過了(onload和ready的差別),不知道的可以看看。
現在ready事件,我們實作了。然後就可以針對節點進行事件註冊了。
我們來實作bind函數,程式碼如下:
bind: function (type, callback) { if (document.addEventListener) { this.each(function (i, item) { item.addEventListener(type, callback, false); }); } else if (document.attachEvent) { this.each(function (i, item) { item.attachEvent('on' + type, callback); }); } else { this.each(function (i, item) { tem['on' + type] = callback; }); } }
這裡面都是些相容性程式碼,實作節點的事件註冊。之前的each,大家可能不知道是要幹嘛的。現在在這裡面就用到了。
主要作用是針對節點循環做一些操作。
完整程式碼,來一份:
(function (win) { var _$ = function (selector, context) { return new _$.prototype.Init(selector, context); } _$.prototype = { Init: function (selector, context) { this.elements = []; if (typeof selector === "function") { this.elements.push(document); this.ready(selector); } else { var context = context || document; var isDocument = function (ele) { var tostring = Object.prototype.toString; return tostring.call(ele) == "[object HTMLDocument]" | "[object Document]"; } if (isDocument(selector)) { this.elements.push(selector); } else if (context.querySelectorAll) { var arr = context.querySelectorAll(selector); for (var i = 0; i < arr.length; i++) { this.elements.push(arr[i]); } } } }, each: function (callback) { var length = this.elements.length; if (length > 0) { for (var i = 0; i < length; i++) { callback.call(this, i, this.elements[i]); } } }, ready: function (callback) { var isDocument = function (ele) { var tostring = Object.prototype.toString; return tostring.call(ele) == "[object HTMLDocument]" | "[object Document]"; } if (isDocument(this.elements[0])) { if (document.addEventListener) { document.addEventListener('DOMContentLoaded', function () { document.removeEventListener('DOMContentLoaded', arguments.callee, false); callback(); }, false); } else if (document.attachEvent) { document.attachEvent('onreadystatechange', function () { if (document.readyState == "complete") { document.detachEvent('onreadystatechange', arguments.callee); callback(); } }); } else if (document.lastChild == document.body) { callback(); } } }, bind: function (type, callback) { if (document.addEventListener) { this.each(function (i, item) { item.addEventListener(type, callback, false); }); } else if (document.attachEvent) { this.each(function (i, item) { item.attachEvent('on' + type, callback); }); } else { this.each(function (i, item) { tem['on' + type] = callback; }); } } } _$.prototype.Init.prototype = _$.prototype; window.$ = _$; })(window);
這幾個函數基本上可以實現對節點的事件註冊了。其餘的一些特效,還需要擴充。如果有興趣的話可以自己在 _$.prototype物件裡面加方法。
以上就是本文的全部內容,希望能夠幫助大家。