事件

1. 事件流
   描述从页面中接收事件的顺序

• 事件冒泡
  事件开始时由最具体的元素接收，然后逐级向上传播到较为不具体的节点
• 事件捕获
  不太具体的节点应该更早收到事件，最具体的节点应该最后收到事件
• DOM事件流
  包括三个阶段：事件捕获阶段、处于目标阶段和事件冒泡阶段。首先发生的事件捕获，为截获事件提供了机会，然后是实际目标接收到了事件，最后一个阶段是冒泡阶段，在这个阶段对事件作出响应

2. 事件处理程序

• DOM0级事件处理程序

var btn = document.getElementById("myBtn");
btn.onclick = function(){
    alert(this.id);    //"myBtn"
};
btn.onclick = null;//删除事件处理程序

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

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

好处：可以给一个元素添加多个事件处理程序
注意是click而不是onclick
通过addEventListener()添加的事件处理程序必须用removeEventListener()来移除-----相同的函数

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

• IE事件处理程序
  IE定义了两个方法，attachEvent()和detachEvent(),接收两个参数，事件处理程序名称和事件处理程序函数

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

• 跨浏览器的事件处理程序

var EventUtil = {
    addHandler: function(element, type, handler){
        if (element.addEventListener){
            element.addEventListener(type, handler, false);
        } else if (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 if (element.detachEvent){
            element.detachEvent("on" + type, handler);
        } else {
            element["on" + type] = null;
} }
};

3. 事件对象

• DOM中的事件对象

var btn = document.getElementById("myBtn");
btn.onclick = function(event){ alert(event.type); //"click"
};
btn.addEventListener("click", function(event){
alert(event.type); //"click" }, false);

event的属性和方法

属性/方法	类型	说明
bubbles	Boolean	表明事件是否冒泡
cancelable	Boolean	表示是否可以取消事件的默认行为
currentTarget	Element	其事件处理程序当前正在处理事件的那个元素
defaultPrevented	Boolean	为true表示已经调用了preventDefault()
detail	Integer	与事件相关的细节信息
eventPhase	Integer	调用事件处理程序的阶段，1表示捕获阶段，2表示处于目标，3表示冒泡阶段
preventDefault()	Function	取消事件的默认行为，cancelable为true时可调用这个方法
stopImmediatePropagation()	Function	取消事件的进一步捕获或冒泡，同时阻止任何事件处理程序被调用
stopImmediatePropagation()	Function	取消事件的进一步捕获或冒泡，bubbles为true时可调用这个方法
target	Element	事件的目标
trusted	Boolean	为true表示是浏览器生成的
type	String	被触发的事件类型
view	AbstractView	与事件关联的抽象视图，等同于发生事件的window对象

Tips:只有在事件处理程序执行期间，event对象才会存在，一旦事件处理程序执行完毕，event对象就会被销毁

• IE中的事件对象
  event对象作为window对象的一个属性存在

属性/方法	类型	说明
cancelBubble	Boolean	为true可取消事件冒泡
returnValue	Boolean	为false可取消事件默认行为
srcElement	Element	事件的目标
type	String	被触发的事件的类型

• 跨浏览器的事件对象

var EventUtil = {
        addHandler: function(element, type, handler){
//  的代码 },
        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;
            }
},
        removeHandler: function(element, type, handler){

 },
        stopPropagation: function(event){
           if (event.stopPropagation){
            event.stopPropagation();
          } else {
            event.cancelBubble = true;
        } }
};

4.事件类型

• UI事件

DOMActivate:表示元素已经被用户操作激活
load：页面全部加载完在window上触发；所有框架加载完在框架集触发；图像加载完在img元素上触发;嵌入内容加载完毕在object元素上触发
unload:页面全部卸载完在window上触发；所有框架卸载后在框架集触发；嵌入内容卸载完毕在object元素上触发//清除引用，避免内存泄漏
abort:用户停止下载
error:发生错误
select:选择文本框时触发
resize:窗口或框架大小变化
scroll:用户滚动带滚动条的元素内容

• 焦点事件
  一般与document.hasFocus()方法及document.activeElement属性配合

blur:元素失去焦点时触发，不冒泡
focus：元素获得焦点时触发，不冒泡
focusout:元素失去焦点时触发，冒泡
focusin:元素获得焦点时触发，冒泡

焦点从一个元素移动到另一个元素依次触发
（1）focusout在失去焦点的元素上触发
（2）focusin在获取焦点的元素上触发
（3）blur:在失去焦点的元素上触发
（4）focus:在获得焦点的元素上触发

• 鼠标与滚轮事件

click:单击鼠标或者按回车键
dblclick:双击鼠标
mousedown：按下鼠标任意按钮
mouseenter：在鼠标光标从元素外部首次移动到元素范围内触发
mouseleave:位于元素内部的鼠标光标移动到元素范围外触发
mousemove:鼠标指针在元素内部移动时反复触发
mouseout:鼠标指针从一个元素移动到另一个元素时触发
mouseover:鼠标位于一个元素外部，用户将其首次移入另一个元素边界之内触发
mousemap:释放鼠标按钮时触发
//除了mouseenter和mouseleave,其余都会冒泡

• 键盘与文本事件

keydown:按下键盘任意键触发
keypress:按下键盘字符键触发
keyup:释放键盘上键时触发

• 触摸与手势事件
  触摸事件

touchstart:手指触摸屏幕时触发
touchmove:手指在屏幕上滑动时连续地触发
touchend:手指在屏幕上移开时触发
touchcancel:系统停止跟踪触摸时触发

touch包含的属性

clientX:触摸目标在视口中的x坐标
clientY:触摸目标在视口中的y坐标
identifier:表示触摸的唯一ID
pageX:触摸目标在页面中的x坐标
pageY:触摸目标在页面中的y坐标
screenX:触摸目标在屏幕中的x坐标
screenY:触摸目标在屏幕中的y坐标
target:触摸的DOM节点目标

手势事件

gesturestart:当一个手指已经按在屏幕上而另一个手指又触摸屏幕时触发
gesturechange:当触摸屏幕的任何一个手指的位置发生变化时触发
gestureend：当任何一个手指从屏幕上面移开时触发