在jQuery中，一個jq對象能一直連續調用各種方法，因為jQuery把這些方法掛載他自定義的一個對象中，但是使用原生的js獲取的DOM對象，只能使用一次addEventLisenter方法添加事件，如果要接著添加事件，還得再調用addEventLisenter。
var area = document.querySelector('.area');area.addEventListener('mouseenter', function(){ console.log( 'mouse enter' );});area.addEventListener('click', function(){ console.log( 'click' );});可是如果我想在area綁定mouseenter事件后，接著綁定click事件呢。我們也可以參考下jQuery的實現思路，但是沒jQuery這么完善。
;(function(){ window.G = function(selector){ return new _G(selector); } function _G(selector){ this.elements = document.querySelector(selector); return this; } _G.prototype = { constructor : _G, method : function(name, fn){ if(this.elements){ this.elements.addEventListener(name, fn, false); } return this; } }})();這樣我們就能實現一個簡單的鏈式調用了，給.area同時綁定兩個事件：
G('.area').method('mouseenter', function(){ console.log( 'mouse enter' );}).method('click', function(){ console.log( 'click' );})實現原理相信大家看到代碼也非常的清楚：
上面的代碼我們只是實現了如何為DOM對象連續添加事件，當然我們還可以在_G.prototype中添加別的方法，不過別忘記了return this：
_G.prototype = { constructor : _G, method : function(name, fn){ if(this.elements){ this.elements.addEventListener(name, fn, false); } return this; }, show : function(){ this.elements.style.display=''; return this; }, hide : function(){ this.elements.style.display='none'; return this; }}這樣G()就能使用show()和hide()了：
// 隱藏G('.area').hide();// 顯示并且綁定click事件G('.area').show().method('click', function(){ console.log( Date.now() );})注意：G('.area')不是原生的DOM對象，不能直接操作DOM對象上的屬性與方法，比如我想隱藏.area:
G('.area').style.display='none'; // 錯誤是不能這么操作的。DOM對象存儲在elements中，如果想直接在DOM對象上操作，可以：
G('.area').elements.style.display='none'; // 正確總結一下，這里我們也只是用原生js簡單的實現了下鏈式操作，更復雜的功能，比如對象緩存，異常處理等等，都需要后續再完善處理。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
