1 . 是什么？
JavaScript与HTML之间的交互是通过事件实现的。事件，就是文档或浏览器窗口中发生的一些特定的交互瞬间。可以使用侦听器来预订事件，以便事件发生时执行相应的代码。这种在传统的软件工程中被称为观察员模式的模型。
2. 事件类型
- UI事件，当用户与页面上的元素交互时触发
- 焦点事件，当元素获得或失去焦点时触发
- 鼠标事件，当用户通过鼠标在页面上执行操作时触发
- 滚轮事件，当使用鼠标滚轮时触发
- 文本事件，当在文档中输入文本时触发
- 键盘事件，当用户通过键盘在页面上执行操作时触发
- 合成事件，当为IME输入字符时触发
- 变动事件，当底层DOM发生变化时触发
3. 关于各类的常用事件
一、UI事件
- load事件
JavaScript中最常用的一个事件就是load。当页面完全加载后，就会触发window上面的load事件。
EventUtil.addHandler(window,"load",function(event){
alert("Loaded!");
})
也可以使用JavaScript实现：
var image = document.getElementByid("my Image");
EventUtil.addhandler(image,"load",function(event){
event = EventUtil.getEvent(event);
alert(EventUtil.getTarget(event).src);
});
- unload事件
与load事件对应的是unload事件，这个事件在文档中被完全卸载后触发。只要用户从一个页面切换到另一个页面，就会发生unload事件。 - resize事件
当浏览器窗口被调整到一个新的高度或宽度时，就会触发resize事件。这个事件在window上触发，因此可以通过JavaScript或者元素中的onresize特性来指定事件处理程序。 - scroll事件
EventUtil.addHandler(window,scroll,function(event){
if(document.compatMode == "CSS1Compat"){
alert(document.documentElement.scrollTop);
}
else {
alert(document.body.scrollTop);
}
})
以上代码指定的事件处理程序会输出页面滚动位置 ——根据呈现模式不同使用了不同的元素。scroll会在文档被滚动期间重复被触发，所以有必要尽量保持事件处理程序的代码简单。
二、焦点事件
- blur：在元素失去焦点时触发，这个事件不会冒泡，所有浏览器都支持
- focus：在元素或得焦点时触发
三、鼠标与滚轮事件
- click：用户单击鼠标按钮或者按下回车时触发，onclick事件处理程序既可以通过键盘也可以通过鼠标执行
- dbclick：用户双击鼠标按钮时触发
- mousedown：用户按下任意鼠标按钮时触发，不能通过键盘触发
- mousemove：当鼠标指针在元素内部移动时重复地触发
- mouseover：在鼠标指针位于一个元素外部，然后用户将其首次移入另一元素边界之内时触发
- mouseup：在用户时方鼠标按钮时触发
- mousewheel：当用户通过鼠标滚轮与页面交互、在垂直方向滚动页面时，就会触发mousewheel事件。mousewheel事件对应的event对象包含一个特殊的wheelDelta属性。当用户向前滚动鼠标滚轮时，wheelDelta是120的倍数，反之，为-120的倍数。
//添加mousewheel事件
EventUtil.addHandler(document,"mousewheel",function(event){
event = EventUtil.getEvent(event);
alert(event.wheelDelta);
});
四、HTML5事件
- contextmenu事件：用以表示何时应该应该显示上下文菜单，以便开发人员取消默认的上下文菜单而提供自定义的菜单。
- beforeunload事件：为了让开发人员有可能在页面卸载前阻止这一操作
- DOMContentLoaded事件：window的load事件会在页面中的一切都加载完毕时触发，但这个过程可能会因为要加载的 外部资源过多而颇废周折，而DOMContentLoaded事件则在形成完整的DOM树之后就会触发
- readystatechange事件：提供与文档或元素加载有关的信息。
- hashchange事件：在URL的参数列表发生变化时通知开发人员。
网友评论