Web浏览器的事件类型（交互基础）——load事件

沃明
855 阅读2分钟

这是我参与更文挑战的第24天，活动详情查看：更文挑战

事件类型

  • UI事件
  • 焦点事件
  • 鼠标事件
  • 滚轮事件
  • 文本事件
  • 键盘事件
  • 合成事件
  • 变动事件

UI事件

UI事件指的是不一定与用户交互有关的事件。这些事件出现在DOM规范之前，为了向后兼容，现有的UI事件如下：

  • DOMActivate: 表示已被用户操作激活。（DOM3中已被废弃，但是FireFox 2+和Chrome仍然支持）不建议使用了。
  • load: 当页面完全加载后在window上面触发，当所有框架加载完之后在框架集上面触发，图片加载完之后在<img>元素上触发，或者当嵌入的内容加载完毕时在<object>元素上面触发。
  • unload: 当页面完全卸载后在window上面触发，当所有框架卸载完之后再框架集上面触发，或者当嵌入的内容卸载完毕时在<object>元素上面触发。
  • abort: 在用户停止下载过程时，如果嵌入的内容没有加载完，则在<object>上触发。
  • error: 当javascript出现错误时在window上面触发，图片无法加载在<img>元素上触发，当嵌入的内容无法加载在<object>元素上面触发，或者当有一个或者多个框架无法加载在框架集上面触发。
  • select: 当用户选择文本框中(<input>或<textarea>)的一个或者多个字符时触发。
  • resize: 当窗口或框架的大小变化时在window上面触发。
  • scroll: 当用户滚动可以滚动的元素，在该元素上面触发。<body>元素包含所加载页面的滚动条。

多数这些事件都和window对象或者表单控制相关。

load事件

javascript中最常用的一个事件就是load事件。当页面完全加载后（包括所有图像、javascript文件、css等外部资源文件），就会触发window上面的load事件。下面给出两种使用load事件的方式。

  • 第一种方式

使用如下的javascript代码：

// 先创建一个EventUtil来兼容DOM2和DOM0级和IE的事件方法
const EventUtil = {
    addHandler: (ele, type, handler) => {
        if(ele.addEventListener) {
            ele.addEventListener(type, handler, false);
        } else if(ele.attachEvent) {
            ele.attachEvent("on" + type, handler)
        } else {
            ele["on" + type] = hanlder;
        }
    },
    removeHandler: (ele, type, handler) => {
        if(ele.removeEventListener) {
            ele.removeEventListener(type, handler, false);
        } else if(ele.detachEvent) {
            ele.detachEvent("on" + type, handler)
        } else {
            ele["on" + type] = hanlder;
        }
    }
}

EventUtil.addHandler(window, 'load', (e) => {
    console.log('loaded', e);
});
  • 第二种方式

指定onload事件处理程序的方式为<body>元素添加一个onload特性，如下面的例子所示:

<!DOCTYPE html>
<html>
<head>
    <title>load example</title>
</head>
<body onload="alert('loaded!')">
</body>
</html>

这种方式因为是html的方式实现的，所以可以很好的兼容所有浏览器，而不需要我们自己去手动兼容，但不推荐使用这种方式。

// image也可以用这种方式
<img src="demo.png" onload="alert(loaded!)" >

也是一样，如果需要监听image是否加载完毕，推荐用下面的javascript方式：

EventUtil.addHandler(window, "load", () => {
    const image = new Image();
    EventUtil.addHandler(image, "load", () => {
        alert("image loaded!")
    });
    image.src = "demo.png";
});

引用

[1] javascript高级程序设计

avatar
文章
阅读
粉丝