DOM3级事件详解-优快云博客

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