怎么理解JavaScript事件加載

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

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

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

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

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

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

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

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);  //更多加載事件

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

(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.$ = $;  })()

報錯，說找不到節點。為什么找不到呢？因為我們在調用它的時候，DOM樹還沒有建立起來！不會吧，網頁是如此完整地顯示我們眼前了。這與閉包的運作有關，當JS引擎解析到閉包的***一個“}”，就把里面的東西鎖到一個密封的環境中，JS繼續向下執行，就修正不了閉包中的window的屬性了。window有一個出名的屬性，叫做document，它引用著整個DOM樹(當然還有其他操作)。DOM樹是一個復雜的鍵值對，當JS不斷向下解析時，就不斷往document添加相應的節點。但當它塞進閉包后，里面的時間就靜止了，因此它還停留在解析head的階段，document是殘缺的，想獲取body中的節點，當然是返回null了。于是問題的關鍵是如何讓閉包內的document重新繼續向下解析。 方法有兩個，一個是利用偵聽器(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函數有一個可選參數，判斷圖片是否加載完畢。我們知道JS引擎會在完成DOM樹后才開始處理圖片與音頻等東西，但如果我們的頁面嚴重依賴于腳本布局呢？！我們想盡快讓頁面呈現出大體形態，這就用到domReady了。我們在原基礎上改進它。

(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標準瀏覽器用DOMContentLoaded，這是非常正現的W3C論DOM方法，與FF的DOMMouseScroll 不一樣，基本上所有非IE內核的瀏覽器***版都支持它了。IE下我們可以通過偵聽document. documentElement. doScroll()來判斷DOM樹是否完成，原理是IE下只有當DOM樹構建完成后才能doScroll。但它還不是盡善盡美，它在IE下無法判定iframe的內容是否加載完畢。我們繼續改進它。

(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.$ = $;  })()

我們簡直是在重新實現jquery的$(document).ready(function(){ })！它功能非常強悍，配合利用閉包做成的命名空間，基本刀槍不入。而且它就只污染一個全局變量“JS”，可以與YUI媲美了（笑）。不過對于一般應用來說，我們用不著做到如此面面俱到。假如我們不需要對圖片進行處理，頁面也沒有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.$ = $;  })()

到此，關于“怎么理解JavaScript事件加載”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！