JavaScript中的事件详解

事件

JavaScript与HTML之间的交互是通过事件实现的。事件，就是文档或浏览器窗口中发生的一些特定的交互瞬间。

事件流

事件流描述的是从页面中接收事件的顺序。
IE的事件流是事件冒泡流，Netscape的事件流是事件捕获流。

事件冒泡

IE的事件流叫做事件冒泡，即事件开始时由最具体的元素（文档中嵌套层次最深的那个节点）接收，然后逐级向上传播到较为不具体的节点（文档）。

事件捕获

事件捕获是不太具体的节点应更早接收到事件，而最具体的节点应该最后接收到事件。由于老版本的浏览器不支持，因此很少有人使用事件捕获。

DOM事件流

“DOM2级事件”规定的事件流包括三个阶段：事件捕获阶段、处于目标阶段、事件冒泡阶段。

事件处理程序

事件就是用户或浏览器自身执行的某种动作，如click、load、mouseover，都是事件。而响应某个事件的函数就是事件处理函数（或事件侦听器）。事件处理程序的名字以”on”开头，因此click事件的事件处理程序就是onclick、load事件的事件处理程序就是onload。

HTML事件处理程序

某个元素支持的每种事件，都可以使用一个与相应事件处理程序同名的HTML特性来指定，这个特性的值应该是能够执行的JavaScript代码。例如：

<script type="text/javascript">
 function showMessage(){
 alert（"hello world!"）
 }
</script>
<input type="button" value="Click me" onclick="showMessage()"/>

DOM0级事件处理程序

每个元素（包括window和document）都有自己的事件处理程序属性，这些属性通常全部小写，例如onclick，将这种属性的值设置为一个函数，就可以指定事件处理程序。例如：

var btn = document.getElementById("myBtn");
btn.onclick = function(){
    alert("clicked");
};

使用DOM0级方法指定的事件处理程序被认为是元素的方法。这时候的事件处理程序是在元素的作用域中运行，换句话说，程序中的this引用当前元素。
也可以通过删除DOM0级方法指定的事件处理程序，例如：

btn.click = null;

DOM2级事件处理程序

“DOM2级事件”定了两个方法，用于指定和删除事件处理程序的操作：addEventListener()、removeEventListener()。所有DOM节点中都包含这两个方法，并且他们都接收3个参数：要处理的事件名、作为事件处理程序的函数和布尔值。布尔值为true，表示在捕获阶段调用事件处理函数；布尔值为false，表示在冒泡阶段调用事件处理函数。例如：

var btn = document.getElementById("myBtn");
btn.addEventListener("click",function(){
    alert(this.id);
},false);

通过addEventListener()添加的事件处理程序只能用removeEventListener()来移除，移除时传入的参数与添加事件处理程序时使用的参数相同，这也意味着addEventListener()添加的匿名函数无法移除。例如：

var btn = document.getElementById("myBtn");
var handler = function(){
    alert(this.id);
}
btn.addEventListener("click",handler,false);
btn.removeEventListener("click",handler,false);

大多数情况下，都是将事件处理程序添加到事件流的冒泡阶段，这样可以最大限度地兼容各种浏览器。

IE事件处理程序

IE实现了与DOM中类似地两个方法：attachEvent()和detachEvent()。这两个方法接收相同地两个参数：事件处理程序名称，事件处理程序函数。通过attachEvent()添加地事件处理程序都会添加到冒泡阶段。例如：

var btn = document.getElementById("myBtn");
btn.attachEvent("onclick",function(){
    alert("clicked");
});

在使用attachEvent()方法的情况下，事件处理程序会在全局作用域中运行，因此this等于window。

跨浏览器的事件处理程序

var EventUtil = {
    addHandler : function(element,type,handler){
        if(element.addEventListener){
            element.addEventListener(type,handler,false);
        }else(element.attachEvent){
            element.attachEvent("on"+type,handler);
        }else{
            element["on"+type] = handler;
        }
    },
    removeHandler : function(element,type,handler){
        if(element.removeEventListener){
            element.removeEventListener(type,handler,false);
        }else(element.detachEvent){
            element.detachEvent("on"+type,handler);
        }else{
            element["on"+type] = null;
        }
    }
}

var btn = document.getElementById("myBtn");
var handler = function(){
    alert("Clicked");
};
EventUtil.addHandler(btn,"click",handler);
EventUtil.removeHandler(btn,"click",handler);

事件对象

在触发DOM上的某个事件时，会产生一个事件对象Event，这个对象中包含着所有与事件有关的信息。

DOM中的事件对象

type属性用于获取事件类型
target属性用于获取事件目标
stopPropagation()用于阻止事件冒泡
preventDefault()阻止事件的默认行为

IE中的事件对象

type属性用于获取事件类型
srcElement属性用于获取事件目标
cancelBubble属性用于阻止事件冒泡
returnValue属性用于阻止事件的默认行为

跨浏览器的事件对象

var EventUtil = {
    addHandler : function(element,type,handler){
        if(element.addEventListener){
            element.addEventListener(type,handler,false);
        }else(element.attachEvent){
            element.attachEvent("on"+type,handler);
        }else{
            element["on"+type] = handler;
        }
    },
    removeHandler : function(element,type,handler){
        if(element.removeEventListener){
            element.removeEventListener(type,handler,false);
        }else(element.detachEvent){
            element.detachEvent("on"+type,handler);
        }else{
            element["on"+type] = null;
        }
    },
    getEvent:function(event){
        return event?event:window.event;
    },
    getTarget:function(event){
        return event.target||event.srcElement;
    },
    preventDefault:function(event){
        if(event.preventDefault){
            event.preventDefault();
        }else{
            event.returnValue = false;//取消事件默认行为
        }
    },
    stopPropagation:function(event){
        if(event.stopPropagation){
            event.stopPropagation();
        }else{
            event.cancelBubble = true;  //取消事件冒泡
        }
    }
};

事件类型

UI事件，当用户与页面上的元素交互时触发
焦点事件，当元素获得或失去焦点时触发
鼠标事件，当用户通过鼠标在页面执行操作时触发
滚轮事件，当使用鼠标滚轮时触发
文本事件，当在文档中输入文本时触发
键盘事件，当用于通过键盘在页面执行操作时触发
合成事件，当为IME输入字符时触发
变动事件，当底层DOM发生变化时触发

UI事件

load：当页面完全加载后在window触发
unload：当页面完全卸载后在window触发
resize：当窗口或框架的大小变化时在window或框架上面触发
scroll：当用户滚动带滚动条的元素中的内容时，在该元素上面触发
焦点事件
blur：在元素失去焦点时触发
DOMFocusIn：在元素获得焦点时触发
DOMFocusOut：在元素失去焦点时触发
focus：在元素获得焦点时触发
focusin：在元素获得焦点时触发
focusout：在元素失去焦点时触发

鼠标与滚轮事件

click：在用户单击主鼠标按钮或者按下回车键时触发
dblclick：在用户双击主鼠标时触发
mousedown：在用户按下任意鼠标按钮时触发
mouseenter：在鼠标光标从元素外部首次移动到元素范围之内时触发
mouseleave：在位于元素上方的鼠标光标移动到元素范围之外时触发
mousemove：当鼠标指针在元素内部移动时重复触发
mouseout：在鼠标指针位于一个元素上方，然后用户将其移入另一个元素时触发
mouseover：在鼠标指针位于一个元素外部，然后用户将其首次移入另一个元素边界之内时触发
mouseup：在用户释放鼠标按钮时触发

事件

事件流