您的位置：首页 > 其它

事件类型

2017-12-19 15:50 148 查看
DOM3级事件规定了下列几类事件

UI事件：当用户与页面上的元素交互时触发

焦点事件：当用户获得或失去焦点时触发

鼠标事件：当用户通过鼠标在页面上执行操作时触发

文本事件：当在文档中输入文本时触发

键盘事件，当用户通过键盘在页面上执行操作时触发

合成事件：当为IME输入字符时触发

变动事件：当DOM结构发生变化时触发

UI事件

UI事件 指的是那些不一定与用户操作有关的事件。比如Javascript中最常用的事件就是load，当页面加载完成后触发的事件。

这个事件支持
<body>, <frame>, <frameset>, <iframe>, <img>, <link>, <script>


1、在图像上触发的load事件比较常用，我们通过Javascript中动态创建的图片，可以为其指定一个事件处理程序，以便图像加载完毕后给出提示。

//之前的EventUtil对象
var EventUtil={
addHandler:function(element,func,type){
if (element.addEventListener) {
element.addEventListener(type,func,false);
}else if(element.attachEvent){
element.attachEvent("on"+type,func)
}else{
element["on"+type]=func;
}
},
removeHandler:function(element,func,type){
if (element.removeEventListener) {
element.removeEventListener(type,func,false)
}else if(element.detachEvent){
element.detachEvent("on"+type,func);
}else{
element["on"+type]=null;
}
},
getEvent:function(){
return event?event:window.event;
},
getTarget:function(){
return event.target||event.srcElement;
},
preventDefault:function(){
if (event.preventDefault) {
event.preventDefault();
}else if (event.returnValue) {
event.returnValue=false;
}
}
}
EventUtil.addHandler(window,function(){
var ul=document.getElementsByTagName("ul")[0];
var img=document.createElement("img");
EventUtil.addHandler(img,function(){
event=EventUtil.getEvent();
alert(EventUtil.getTarget().src)
},"load");
ul.appendChild(img);
img.src="magic.jpg"
},"load")


通过上面这种方式我们就给图片添加了onload事件，通过这种方法，我们能够在客户端中预先加载图像和样式

EventUtil.addHandler(window,"load",function(){
var img=new Image();
EventUtil.addHandler(img,"load",function(){
alert("img is loaded");
});
img.src="magic.jpg"
document.body.appendChild(img)
})
//CSS也是同理，但是别忘记指定rel和type


2、
resize
事件，当浏览器被调整到一个新的高度或宽度的时候触发的事件，在IE、Safari、Chrome、Opera中变化1px就会触发，但是在FireFox中每当用户停止调整时调用，所以不建议使用

3、
scroll
事件，虽然scroll是在window对象上发生的，但是它实际表示的则是页面中相应元素的变化。在混杂模式下(BackCompat)，我们可以通过
<body>
的scrollLeft和scrollTop来监控到这一个变化；而在标准模式(CSS1Compat)下，除了Safari会根据
<body>
滚动位置变化，之外所有的浏览器都会通过
<html>
来反映这一变化。

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


焦点事件

焦点事件会在元素失去或获得焦点时触发。利用这些事件并与document.hasFocus()方法以及document.activeElement属性配合，可以知晓用户在上面的行踪；

blur：在元素失去焦点时触发。这个事件不会冒泡而且被所有浏览器支持；

focus：在元素获得焦点时触发。这个事件不会冒泡而且被所有浏览器支持；

focusin：在元素获得焦点时触发，和上面的区别就是他会冒泡，IE5.5+以上可以支持

focusout：在元素失去焦点时触发，和blur的区别就是他会冒泡，同上IE5.5+支持

鼠标事件

鼠标事件时web开发中最常用的一类事件，笔记鼠标还是最主要的定位设备。

click
：在用户点击鼠标左键的时候触发的事件

dblclick
：在用户双击鼠标时触发的事件

mousedown
：在用户按下任意鼠标按钮时触发的事件。不能通过键盘触发这个事件

mouseenter
：在用户鼠标进入时触发的事件，DOM3级纳入规范

mouseleave
：在用户鼠标离开元素范围时触发的事件。这个事件不冒泡

mousemove
：在鼠标指针在元素内部移动时重复的触发

mouseout
：在鼠标指针位于一个元素上方，然后用户将其移入另一个元素时触发。

mouseover
：鼠标移入一个元素时触发

mouseup
：鼠标被施法时触发。

*当我们在同一元素上相继触发mousedown和mouseup事件，才会触发click事件,如果一个被取消，就不会触发click事件。类似的，只有触发两次click才会触发dblclick，如果有代码组织了连续两次触发click事件就不会触发dblclick事件

他们的触发顺序如下

1. 
mousedown


2. 
mouseup


3. 
click


4. 
mousedown


5. 
mouseup


6. 
click


7. 
dblclick


IE8之前的版本删除了4，6步骤，就能触发
dblclick
事件 IE9之后就变得正常了
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航