怎么理解JavaScript事件加載

這篇文章主要介紹“怎么理解JavaScript事件加載”，在日常操作中，相信很多人在怎么理解JavaScript事件加載問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”怎么理解JavaScript事件加載”的疑惑有所幫助！接下來，請跟著小編一起來學(xué)習(xí)吧！

JavaScript事件加載本身并不是什么復(fù)雜的功能，通常來說，window.onload就夠用了。如果想加載多個事件，我們可以采取以下方式：

window.onload = function(){  func1();  func2();  func3();  //更多加載事件………………  }

但如果由于某種特殊需要，我們不能合在一起寫嗎？如當(dāng)前區(qū)域是面向管理員，后臺生成頁面時只有當(dāng)用戶是管理員，頁面才生成這部分，而這部分也用到一些特殊的腳本，上面的方法就歇菜了！

JavaScript事件加載：前臺與后臺的尷尬

//后臺代碼  < script type="text/javascript">  window.onload = function(){  func1();  func2();  //加載普通用戶用到的腳本……  }  < /script>  < %# 以下腳本是為管理員準(zhǔn)備的 %>  < % if @user.role == "manager"   %>  window.onload = function(){  func1();  func2();  //加載機(jī)密腳本……  }  < % end %>

這種情況生成出來的頁面擁有兩個window.onload代碼塊，很顯然，第二個覆蓋掉***個。這時，輪到loadEvent函數(shù)出場了。

var loadEvent = function(fn) {  var oldonload = window.onload;  if (typeof window.onload != 'function') {  window.onload = fn;  }else {  window.onload = function() {  oldonload();  fn();  }  }  }

它非常***地解決了互相覆蓋的問題，用法如下：

loadEvent(func1);  loadEvent(func2);  loadEvent(func3);  //更多加載事件

但現(xiàn)實(shí)的問題總是如此出奇不意，也如此刁鉆邪門。最近我想把所有的函數(shù)放到一個閉包中，以免除命名沖突之苦，比如那個有名的$的DOM選擇器。JQuery，Prototype，mootool都用它做選擇器的名字，共存成了個嚴(yán)重的問題。

(function(){  if(!window.JS){  window['JS'] = {}  }  var onReady = function(fn){  var oldonload = window.onload;  if (typeof window.onload != 'function') {  window.onload = fn;  }else {  window.onload = function() {  oldonload();  fn();  }  }  }  JS.onReady = onReady;  var $ = function(id){  return document.getElementById(id);  }  JS.$ = $;  })()

報(bào)錯，說找不到節(jié)點(diǎn)。為什么找不到呢？因?yàn)槲覀冊谡{(diào)用它的時候，DOM樹還沒有建立起來！不會吧，網(wǎng)頁是如此完整地顯示我們眼前了。這與閉包的運(yùn)作有關(guān)，當(dāng)JS引擎解析到閉包的***一個“}”，就把里面的東西鎖到一個密封的環(huán)境中，JS繼續(xù)向下執(zhí)行，就修正不了閉包中的window的屬性了。window有一個出名的屬性，叫做document，它引用著整個DOM樹(當(dāng)然還有其他操作)。DOM樹是一個復(fù)雜的鍵值對，當(dāng)JS不斷向下解析時，就不斷往document添加相應(yīng)的節(jié)點(diǎn)。但當(dāng)它塞進(jìn)閉包后，里面的時間就靜止了，因此它還停留在解析head的階段，document是殘缺的，想獲取body中的節(jié)點(diǎn)，當(dāng)然是返回null了。于是問題的關(guān)鍵是如何讓閉包內(nèi)的document重新繼續(xù)向下解析。 方法有兩個，一個是利用偵聽器(addEventListener與attachEvent)，一個是利用基于時間軸的setTimeout與setInterval。

(function(){  if(!window.JS){  window['JS'] = {}  }  var addEvent = function( obj, type, fn ) {  if (obj.addEventListener)  obj.addEventListener( type, fn, false );  else if (obj.attachEvent) {  obj["e"+type+fn] = fn;  obj.attachEvent( "on"+type, function() {  obj["e"+type+fn]();  } );  }  };  var onReady = function(loadEvent,waitForImages) {  if(waitForImages) {  return addEvent(window, 'load', loadEvent);  }  }  JS.onReady = onReady;  var $ = function(id){  return document.getElementById(id);  }  JS.$ = $;  })()

OK，沒問題。上面的onReady函數(shù)有一個可選參數(shù)，判斷圖片是否加載完畢。我們知道JS引擎會在完成DOM樹后才開始處理圖片與音頻等東西，但如果我們的頁面嚴(yán)重依賴于腳本布局呢？！我們想盡快讓頁面呈現(xiàn)出大體形態(tài)，這就用到domReady了。我們在原基礎(chǔ)上改進(jìn)它。

(function(){  if(!window.JS){  window['JS'] = {}  }  var addEvent = function( obj, type, fn ) {  if (obj.addEventListener)  obj.addEventListener( type, fn, false );  else if (obj.attachEvent) {  obj["e"+type+fn] = fn;  obj.attachEvent( "on"+type, function() {  obj["e"+type+fn]();  } );  }  };  var onReady = function(loadEvent,waitForImages) {  if(waitForImages) {  return addEvent(window, 'load', loadEvent);  }  var init = function() {  if (arguments.callee.done) return;  arguments.callee.done = true;  loadEvent.apply(document,arguments);  };  if(!+"\v1"){  (function(){  try {  document.documentElement.doScroll("left");  } catch(e) {  setTimeout( arguments.callee, 0 );  return;  }  init();  })();  }else{  document.addEventListener( "DOMContentLoaded", function(){  document.removeEventListener( "DOMContentLoaded", arguments.callee, false );  init();  }, false );  }  return true;  }  JS.onReady = onReady;  var $ = function(id){  return document.getElementById(id);  }  JS.$ = $;  })()

dom標(biāo)準(zhǔn)瀏覽器用DOMContentLoaded，這是非常正現(xiàn)的W3C論DOM方法，與FF的DOMMouseScroll 不一樣，基本上所有非IE內(nèi)核的瀏覽器***版都支持它了。IE下我們可以通過偵聽document. documentElement. doScroll()來判斷DOM樹是否完成，原理是IE下只有當(dāng)DOM樹構(gòu)建完成后才能doScroll。但它還不是盡善盡美，它在IE下無法判定iframe的內(nèi)容是否加載完畢。我們繼續(xù)改進(jìn)它。

(function(){  if(!window.JS){  window['JS'] = {}  }  var addEvent = function( obj, type, fn ) {  if (obj.addEventListener)  obj.addEventListener( type, fn, false );  else if (obj.attachEvent) {  obj["e"+type+fn] = fn;  obj.attachEvent( "on"+type, function() {  obj["e"+type+fn]();  } );  }  };  var onReady = function(loadEvent,waitForImages) {  if(waitForImages) {  return addEvent(window, 'load', loadEvent);  }  var init = function() {  if (arguments.callee.done) return;  arguments.callee.done = true;  loadEvent.apply(document,arguments);  };  if(!+"\v1"){  if(window.self == window.top){  (function(){  try {  document.documentElement.doScroll("left");  } catch(e) {  setTimeout( arguments.callee, 0 );  return;  }  init();  })();  }else{  document.attachEvent("onreadystatechange", function(){  if ( document.readyState === "complete" ) {  document.detachEvent( "onreadystatechange", arguments.callee );  init();  }  });  }  }else{  document.addEventListener( "DOMContentLoaded", function(){  document.removeEventListener( "DOMContentLoaded", arguments.callee, false );  init();  }, false );  }  return true;  }  JS.onReady = onReady;  var $ = function(id){  return document.getElementById(id);  }  JS.$ = $;  })()

我們簡直是在重新實(shí)現(xiàn)jquery的$(document).ready(function(){ })！它功能非常強(qiáng)悍，配合利用閉包做成的命名空間，基本刀槍不入。而且它就只污染一個全局變量“JS”，可以與YUI媲美了（笑）。不過對于一般應(yīng)用來說，我們用不著做到如此面面俱到。假如我們不需要對圖片進(jìn)行處理，頁面也沒有iframe，我們可以搞下面這個微縮版出來。

(function(){  if(!window.JS){  window['JS'] = {}  }  var onReady = function(loadEvent) {  if(!+"\v1"){  (function(){  try {  document.documentElement.doScroll("left");  } catch(e) {  setTimeout( arguments.callee, 0 );  return;  }  loadEvent();  })();  }else{  document.addEventListener( "DOMContentLoaded", loadEvent, false );  }  }  JS.onReady = onReady;  var $ = function(id){  return document.getElementById(id);  }  JS.$ = $;  })()

到此，關(guān)于“怎么理解JavaScript事件加載”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識，請繼續(xù)關(guān)注億速云網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬?shí)用的文章！