首页手记 JavaScript事件类型：UI事件之Load事件

JavaScript事件类型：UI事件之Load事件

标签：

Html/CSS JavaScript 深度学习

Load事件定义方式

１、通过JavaScript指定事件处理程序

例子：

window.addEventListener('load',
function(event) {
        alert('loaded');
})
//输出：loaded

*这个event对象不包含有关这个事件的任何附加信息，但在兼容Dom的浏览器中，event.target的属性值为document，而IE不会为这个事件设置srcElement属性。

２、为<body>元素添加一个属性

例子：

<body ``='alert("loaded")'></body>
//输出：loaded

*一般来说，在window上面发生的任何事件都可以在body元素中通过相应的属性来指定，因为在HTML中无法访问window元素。

Load事件触发方式

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

例子：

window. = function(event) {
        alert('loaded')
}
//输出：loaded

２、当图像加载完毕时在img元素上触发load事件。

例子：

<img id='myImage' src='javascript.jpg'>

var image = document.getElementById('myImage') 
image.addEventListener('load',
function(event) {
        alert('loaded');
})
//输出：loaded

新创建的图像元素不一定要从添加到文档后才开始下载，只要设置了src属性就会开始下载。所以要在指定src属性之前先指定load事件。

例子：

window. = function() {
        var image = document.createElement('img');
        image.addEventListener('load',
        function(event) {
                alert('loaded')
        });
        document.body.appendChild(image);
        image.src = 'javascript.jpg ';
}
//输出：loaded

在Dom出现之前，经常使用image对象在客户端预先加载图像。有的浏览器将image对象实现为img元素，但并非所有浏览器都如此，所以不要将其添加到Dom中。

例子：

window. = function() {
        var image = new Image();
        image.addEventListener('load',
        function(event) {
                alert('loaded');
        });
        image.src = 'javascript.jpg';
}
//输出：loaded

３、script元素会触发load事件，以便开发人员确定动态加载的JavaScript文件是否加载完毕。与图像不同，只有在设置了script元素src属性并将该元素添加到文档后，才开始下载JavaScript文件。

例子：

window.=function(){
    var script=document.createElement('script');
        script.=function(){
        alert('loaded')
        };
        document.body.appendChild(script);
        script.src='javascript.js';
}
//输出：loaded

４、link元素也会触发load事件，以便开发人员确定样式表是否加载完毕。

例子：

window. = function() {
        var link = document.createElement('link');
        link.type = 'text/css';
        link.rel = 'stylesheet';
        link. = function() {
                alert('loaded')
        };　　
        document.getElementsByTagName('head')[0].appendChild(link);
        link.href = 'style.css';
}
//输出：loaded

文中的代码部分，带有“例子”和“测试代码”字样的，只是用来学习或测试某一功能用的代码，不可以直接用于项目的开发中。带有“代码如下”字样的，都是经过本人测试，简单修改即可用于项目开发中的代码，如有错误，欢迎指出。

点击查看更多内容