UI事件之unload、resize和scroll

unload事件

  当页面卸载或用户从当前页面换到其他页面上时,会在window上触发unload事件。根据DOM2级规范规定,unload应该在body上触发,但所有浏览器都实现了在window上触发unload,以保证向后兼容。

  与load事件相同,也有两种绑定方式,推荐使用JavaScript方式:

<!-- html特性方式 -->
<html>
<head></head>
<body unload="alert(unloaded!)"></body>
</html>
//JavaScript方式
EventUtil.addEvent(window,'unload',function(event){
    alert('unloaded!');
});

resize事件

当浏览器窗口大小发生变化时,会在window上触发resize事件;注意,firefox浏览器会在窗口大小停止变化时才触发resize事件,而其他浏览器则在窗口发生1px的变化就触发,因此建议不要在你resize事件处理程序中有大量的计算。

scroll事件

当页面随滚动条滚动时会触发连续scroll事件;混杂模式下,基于body计算滚动距离,在标准模式下,基于document计算滚动距离:

EventUtil.addEvent(window,'scroll',function(event){
    var event = EventUtil.getEvent(event);
    if(document.compatMode=='CSS1Compat){
        alert(document.documentElement.scrollTop);    
    }else{
        alert(document.body.scrollTop);
    }
});

 

posted @ 2016-07-28 11:45  selina0526  阅读(422)  评论(0编辑  收藏  举报