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：在用户释放鼠标按钮时触发