久久男人av资源网站无码软件,久久久久久毛片免费播放,久久亚洲av无码西西人体

快捷導(dǎo)航

原生js實現(xiàn)簡單的鏈?zhǔn)讲僮?/h1>

更新時間：2017年07月04日 14:40:38 作者：Wenzi

這篇文章主要介紹了原生js實現(xiàn)簡單的鏈?zhǔn)讲僮鳎哂幸欢ǖ膮⒖純r值，感興趣的小伙伴們可以參考一下

在jQuery中，一個jq對象能一直連續(xù)調(diào)用各種方法，因為jQuery把這些方法掛載他自定義的一個對象中，但是使用原生的js獲取的DOM對象，只能使用一次addEventLisenter方法添加事件，如果要接著添加事件，還得再調(diào)用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的實現(xiàn)思路，但是沒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;
 }
 }
})();

這樣我們就能實現(xiàn)一個簡單的鏈?zhǔn)秸{(diào)用了，給.area同時綁定兩個事件：

G('.area').method('mouseenter', function(){
  console.log( 'mouse enter' );
}).method('click', function(){
  console.log( 'click' );
})

實現(xiàn)原理相信大家看到代碼也非常的清楚：

輸出一下G('.area')，他返回的就是一個_G的實例對象；
在_G的內(nèi)部，把DOM對象存儲在elements上，然后prototype上實現(xiàn)了method方法，就是給elements添加對應(yīng)的事件，每次調(diào)用后，都把this返回，供下次使用；
G(‘.area')就能使用使用method方法來添加事件了，同時每次method都會把this返回，這樣就能連續(xù)添加事件

上面的代碼我們只是實現(xiàn)了如何為DOM對象連續(xù)添加事件，當(dāng)然我們還可以在_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'; // 正確

總結(jié)一下，這里我們也只是用原生js簡單的實現(xiàn)了下鏈?zhǔn)讲僮?，更?fù)雜的功能，比如對象緩存，異常處理等等，都需要后續(xù)再完善處理。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

相關(guān)文章

最新評論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具