怎么理解JavaScript事件加载

发布时间:2021-11-18 14:44:24 作者:iii
来源:亿速云 阅读:112

这篇文章主要介绍“怎么理解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事件加载”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注亿速云网站,小编会继续努力为大家带来更多实用的文章!

推荐阅读:
  1. JavaScript页面加载事件实例讲解
  2. 带你快速理解javascript中的事件模型

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

javascript

上一篇:Web设计的大趋势有哪些

下一篇:怎样理解Azure Monitor

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》