十年专注于品牌网站建设 十年专注于品牌网站建设,低调、有情怀的网络应用服务商!
南昌百恒网络微信公众号 扫一扫关注
小程序
tel-icon全国服务热线:400-680-9298,0791-88117053
扫一扫关注百恒网络微信公众号
扫一扫打开百恒网络微信小程序

百恒网络

南昌百恒网络

结合实例介绍unload事件、resize事件、scroll事件的使用方法及注意事项

百恒网络 2016-12-05 855

前面我们通过《结合实例详细介绍javascript中load事件使用方法》介绍过页面在加载过程中响应的load事件如何使用,load的事件我们也是经常用到的,例如:常用的计时器就是页面一加载就开始计时,接下来南昌网站制作公司百恒网络开发工程师向大家介绍unload事件、resize事件、scroll事件几个常用的事件。
       1.unload 事件
      与 load 事件对应的是 unload 事件,这个事件在文档被完全卸载后触发。只要用户从一个页面切
换到另一个页面,就会发生 unload 事件。而利用这个事件最多的情况是清除引用,以避免内存泄漏。 与 load 事件类似,也有两种指定 onunload 事件处理程序的方式。第一种方式是使用 JavaScript,如
下所示:
      EventUtil.addHandler(window, "unload", function(event){
            alert("Unloaded");
      });
      此时生成的 event 对象在兼容 DOM的浏览器中只包含 target 属性(值为 document)。IE8 及之
前版本则为这个事件对象提供了 srcElement 属性。
      指定事件处理程序的第二种方式,也是为<body>元素添加一个特性(与 load 事件相似),如下面的例子所示:
      <!DOCTYPE html>
      <html>
      <head>
            <title>Unload Event Example</title>
      </head>
      <body onunload="alert('Unloaded!')">
      </body>
      </html>
      无论使用哪种方式,都要小心编写 onunload 事件处理程序中的代码。既然 unload 事件是在一切
都被卸载之后才触发,那么在页面加载后存在的那些对象,此时就不一定存在了。此时,操作 DOM节 点或者元素的样式就会导致错误。
2.resize 事件
      当浏览器窗口被调整到一个新的高度或宽度时,就会触发 resize 事件。这个事件在 window(窗
口)上面触发,因此可以通过 JavaScript 或者<body>元素中的 onresize 特性来指定事件处理程序。如前所述,我们还是推荐使用如下所示的 JavaScript 方式:
      EventUtil.addHandler(window, "resize", function(event){
            alert("Resized");
      });
      与其他发生在 window 上的事件类似,在兼容 DOM 的浏览器中,传入事件处理程序中的 event 对 象有一个 target 属性,值为 document;而 IE8 及之前版本则未提供任何属性。
      关于何时会触发 resize 事件,不同浏览器有不同的机制。IE、Safari、Chrome 和 Opera 会在浏览
器窗口变化了 1 像素时就触发 resize 事件,然后随着变化不断重复触发。Firefox 则只会在用户停止调 整窗口大小时才会触发 resize 事件。由于存在这个差别,应该注意不要在这个事件的处理程序中加入 大计算量的代码,因为这些代码有可能被频繁执行,从而导致浏览器反应明显变慢。
scroll 事件
      虽然 scroll 事件是在 window 对象上发生的,但它实际表示的则是页面中相应元素的变化。在混
杂模式下,可以通过<body>元素的 scrollLeft 和 scrollTop 来监控到这一变;;而在标准模式下,
除 Safari 之外的所有浏览器都会通过<html>元素来反映这一变化(Safari 仍然基于<body>跟踪滚动位 置),如下面的例子所示:
      EventUtil.addHandler(window, "scroll", function(event){
            if (document.compatMode == "CSS1Compat"){
                  alert(document.documentElement.scrollTop);
            } else {
                  alert(document.body.scrollTop);
            }
   });
      以上代码指定的事件处理程序会输出页面的垂直滚动位置——根据呈现模式不同使用了不同的元 素。由于 Safari 3.1 之前的版本不支持 document.compatMode,因此旧版本的浏览器就会满足第二个 条件。
      与 resize 事件类似,scroll 事件也会在文档被滚动期间重复被触发,所以有必要尽量保持事件
处理程序的代码简单。
  本文仅限内部技术人员学习交流,不得作于其他商业用途.希望此文对广技人员有所帮助。原创文章出自:南昌网站建设公司-百恒网络http://www.jxbh.cn/如转载请注明出处!

400-680-9298,0791-88117053
扫一扫关注百恒网络微信公众号
扫一扫打开百恒网络小程序

欢迎您的光顾,我们将竭诚为您服务×

售前咨询 售前咨询
 
售前咨询 售前咨询
 
售前咨询 售前咨询
 
售前咨询 售前咨询
 
售前咨询 售前咨询
 
售后服务 售后服务
 
售后服务 售后服务
 
备案专线 备案专线
 
×