前面我们通过《结合实例详细介绍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 属性。
指定事件处理程序的第二种方式,也是为
无论使用哪种方式,都要小心编写 onunload 事件处理程序中的代码。既然 unload 事件是在一切
都被卸载之后才触发,那么在页面加载后存在的那些对象,此时就不一定存在了。此时,操作 DOM节 点或者元素的样式就会导致错误。
2.resize 事件
当浏览器窗口被调整到一个新的高度或宽度时,就会触发 resize 事件。这个事件在 window(窗
口)上面触发,因此可以通过 JavaScript 或者元素中的 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 对象上发生的,但它实际表示的则是页面中相应元素的变化。在混
杂模式下,可以通过元素的 scrollLeft 和 scrollTop 来监控到这一变;;而在标准模式下,
除 Safari 之外的所有浏览器都会通过元素来反映这一变化(Safari 仍然基于跟踪滚动位 置),如下面的例子所示:
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/如转载请注明出处!