事件类型

来源：互联网发布：丁建中知乎编辑：程序博客网时间：2024/05/29 10:29

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之后就变得正常了

阅读全文

0 0