事件(四)：事件类型

事件类型

web浏览器中可能发生的事件有很多类型：
UI事件：当用户与页面上的元素交互时触发；
焦点事件：当元素获得或失去焦点时触发；
鼠标事件：当用户通过鼠标在页面上执行操作时触发；
滚轮事件：当使用鼠标滚轮（或类似设备）时触发；
文本事件：当在文档中输入文本时触发；
键盘事件：当用户通过键盘在页面上执行操作时触发；
合成事件：当为IME(input method editor，输入法编辑器)输入字符时触发；
变动事件：当底层dom结构发生变化时触发。
变动名称事件：当元素或属性名变动时触发。此类事件已经被废弃，没有任何浏览器实现它们

UI事件

1、load事件

<body onload="alert('Loaded')">
    <input type='button' value='click me' id='myBtn'/>
</body>

图像也可以触发load事件

<img  src="https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png"  onload="alert('image Loaded')">

2、unload事件与load事件对应的是unload事件，这是事件在文档被完全卸载后触发。只要用户从一个页面切换到另一个页面，就会发生unload事件。而利用这个事件最多的情况是清除引用，以避免内存泄漏。

<body onunload="alert('unloaded!')"></body>

或者

EventUtil.addhandler(window,'unload',function(){
    alert('unloaded');
})

无论是用哪种方式，都要小心编写onunload事件处理程序中的代码，既然unload是在一切都被卸载之后才触发，那么在页面加载后存在的那些对象，此时就不一定存在了。

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

EventUtil.addHandler(window,'resize',function(){
    alert('Resized');
})

关于何时触发resize事件，不同的浏览器不同的机制，IE,Safari,Chrome和Opera会在浏览器窗口变化了1px就会触发resize事件，然后随着变化不断重复被触发。FireFox则只会在用户停止调整窗口大小时才会触发resize事件。由于这个差别，应该注意不要在这个事件的处理程序中加入大计算量的代码，因为这些代码有可能被频繁执行，从而导致浏览器反应明显变慢。

4、scroll事件

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

在标准模式下，除Safari之外的所有浏览器都会通过元素来反映这一变化（Safari仍然基于body跟踪滚动位置），以上代码根据模式不同而用了不同当元素，由于safari之前的版本不支持document.compatMode,因此旧版本的浏览器就会满足第二个条件。
与resize类似，scroll事件也会在文档滚动期间重复被触发，所以有必要尽量保持事件处理程序的代码简单