18. 文档加载事件

1. load 事件
当页面完全加载后（包括所有图像、JavaScript 文件、CSS 文件等外部资源），就会触发 window 上面的 load 事件。

<xmp>
var EventUtil = {
    addHandler: function(element, type, handler){
    //省略的代码
    },

    getEvent: function(event){
        return event ? event : window.event;
    },

    getTarget: function(event){
        return event.target || event.srcElement;
    },

    preventDefault: function(event){
        if (event.preventDefault){
            event.preventDefault();
        } else {
            event.returnValue = false;
        }
    },

    removeHandler: function(element, type, handler){
    //省略的代码
    },

    stopPropagation: function(event){
        if (event.stopPropagation){
            event.stopPropagation();
        } else {
            event.cancelBubble = true;
        }
    }
};

EventUtil.addHandler(window, "load", function(event){
  alert("Loaded!");
});
</xmp>

通过 JavaScript 来指定事件处理程序的方式.

<xmp>
<!DOCTYPE html>
<html>
<head>
<title>Load Event Example</title>
</head>
<body onload="alert('Loaded!')">
</body>
</html>
</xmp>

指定 onload 事件处理程序的方式是为 body元素添加一个 onload 特性.

根据“DOM2 级事件”规范，应该在 document 而非 window 上面触发 load 事件。但是，所有浏览器都在 window 上面实现了该事件，以确保向后兼容。

2. unload 事件
与 load 事件对应的是 unload 事件，这个事件在文档被完全卸载后触发。

<xmp>
<!DOCTYPE html>
<html>
<head>
<title>Load Event Example</title>
</head>
<body onunload="alert('Unloaded!')">
</body>
</html>
</xmp>

3. resize 事件
当浏览器窗口被调整到一个新的高度或宽度时，就会触发 resize 事件。

<xmp>
EventUtil.addHandler(window, "resize", function(event){
    alert("Resized");
});

window.resize(function(){

})
</xmp>

4. scroll 事件
scroll 事件也会在文档被滚动期间重复被触发.

<xmp>
EventUtil.addHandler(window, "scroll ", function(event){
    alert("Resized");
});

window.scroll (function(){

})
</xmp>

<<上一篇

下一篇>>

共0 条评论