免费很黄无遮挡的视频,免费看黄a级毛片

快捷導(dǎo)航

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

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

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

在jQuery中，一個(gè)jq對(duì)象能一直連續(xù)調(diào)用各種方法，因?yàn)閖Query把這些方法掛載他自定義的一個(gè)對(duì)象中，但是使用原生的js獲取的DOM對(duì)象，只能使用一次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的實(shí)現(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;
 }
 }
})();

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

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

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

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

上面的代碼我們只是實(shí)現(xiàn)了如何為DOM對(duì)象連續(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對(duì)象，不能直接操作DOM對(duì)象上的屬性與方法，比如我想隱藏.area:

G('.area').style.display='none'; // 錯(cuò)誤

是不能這么操作的。DOM對(duì)象存儲(chǔ)在elements中，如果想直接在DOM對(duì)象上操作，可以：

G('.area').elements.style.display='none'; // 正確

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

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

您可能感興趣的文章:

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

相關(guān)文章

最新評(píng)論

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

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

常用在線小工具