摘要：有两种事件处理程序的方式。第一种第二种事件当调整浏览器的窗口到一个新的宽度或高度时，就会触发事件。事件在元素获得焦点时触发。这个事件冒泡某些浏览器不支持。事件在鼠标光标从元素外部首次移动到元素范围内时触发。事件这个事件跟踪鼠标滚轮。
JavaScript简单入门可以看看我丑丑的Github博客JavaScript简单入门
本文主要简单介绍以下几类事件：
UI事件
焦点事件
鼠标与滚轮事件
键盘与文本事件
UI事件
UI事件是指那些不一定与用户操作有关的事件。
load事件
此事件为当页面完全加载完之后（包括所有的图像、js文件、css文件等外部资源），就会触发window上面的load事件。
有两种onload事件处理程序的方式。
//第一种
EventUtil.addHandler(window, "load", function(){
alert("load");
});
//第二种
图像也可以触发load事件，无论是在DOM中的图像元素还是HTML中的图像元素。
//第一种
//第二种
var img=document.getElementById("img");
EventUtil.addHandler(img,"load",function(){
event=EventUtil.getEvent(event);
alert(EventUtil.getTarget(event).src);
});
unload事件
此事件在文档被完全卸载后触发。用户从一个页面切换到另一个页面就会被触发。
有两种定义onunload事件处理程序的方式。
//第一种
EventUtil.addHandler(window, "unload", function(){
alert("load");
});
//第二种
resize事件
当调整浏览器的窗口到一个新的宽度或高度时，就会触发resize事件。这个事件在window（窗口）上面触发。
EventUtil.addHandler(window, "resize", function(){
alert("resized");
});
scroll事件
这个事件会在文档被滚动期间重复被触发，所以应当尽量保持事件处理程序的代码简单。
//可以通过scrollLeft和scrollTop监控变化
EventUtil.addHandler(window, "scroll", function(){
alert(document.body.scrollTop);
});
焦点事件
焦点事件会在页面元素获得或失去焦点时触发。
blur事件
在元素失去焦点时触发。这个事件不冒泡，所有浏览器都支持。
focus事件
在元素获得焦点时触发。这个事件不冒泡，所有浏览器都支持。
focusin事件
在元素获得焦点时触发。这个事件冒泡,某些浏览器不支持。
focusout事件
在元素失去焦点时触发。这个事件冒泡，某些浏览器不支持。
注意：即使blur和focus不冒泡，也可以在捕获阶段侦听到他们。
鼠标与滚轮事件
click事件
用户单击鼠标左键或按下回车键触发
dbclick事件
用户双击鼠标左键触发。
mousedown事件
在用户按下了任意鼠标按钮时触发。
mouseup事件
在用户释放鼠标按钮时触发。
mouseenter事件
在鼠标光标从元素外部首次移动到元素范围内时触发。此事件不冒泡。
mouseleave事件
元素上方的光标移动到元素范围之外时触发。此事件不冒泡。
mousemove事件
光标在元素的内部不断的移动时触发。
mouseover事件
鼠标指针位于一个元素外部，然后用户将首次移动到另一个元素边界之内时触发。
mouseout事件
用户将光标从一个元素上方移动到另一个元素时触发。
mousewheel事件
这个事件跟踪鼠标滚轮。
一次click事件触发顺序
mousedown --> mouseup --> click
键盘与文本事件
keydown事件
当用户按下键盘上的任意键时触发。按住不放，会重复触发。
keypress事件
当用户按下键盘上的字符键时触发。按住不放，会重复触发。
keyup事件
当用户释放键盘上的键时触发。
用户按了一下键盘上的字符键时事件触发顺序 keydown --> keypress--> keyup
如果用户按下字符键不放时，就会重复触发keydown --> keypress
如果用户按下非字符键时，就会触发keydown --> keyup
键码
在触发事件时，event对象的keyCode属性会包含一个代码，与键盘上的一个特定键对应。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/89354.html
