JavaScript事件知识点总结

一、事件流

　　首先我们要明白事件流的概念。当我们点击一个按钮时，也点击了按钮的容器元素，甚至也点击了整个事件。事件流描述就是从页面中接收事件的顺序。在主流浏览器中有两种事件接收方式。一种是IE提出的事件冒泡流，另一种是Netscape提出的事件捕获流。顾名思义，事件冒泡流是从被点击的最小元素逐渐向上索引DOM树，而事件捕获的思想是不太具体的节点先捕捉到事件，然后事件沿DOM树逐渐向下，一直传播到事件的实际目标。

　　由于老版本浏览器不支持事件捕获模型，所以建议开发人员尽量使用事件冒泡，在有特殊需要的情况下再使用事件捕获。

事件冒泡过程：

 

事件捕获过程：

 

二、事件处理程序

事件就是用户或浏览器自身执行的某种动作，如click，load，mouseover，都是事件的名字；而响应某个事件的函数就叫做事件处理程序（或事件侦听器）。事件处理程序的名字以on开头，onclick，onmouseover相信大家都相当熟悉了。

2.1 HTML事件处理程序

  <input type="button" value="click" onclick="alert("click!")">        //click!

  <input type="button" value="click2" onclick="alert(event.type)">　　　　　　　　　//click

  <input type="button" value="click3" onclick="alert(this.value)">　　　　　　　　　//click3

在指定了事件处理程序之后，会创建一个封装着元素属性的函数。这个函数中有一个局部变量event，也就是事件对象。还有一个局部变量this，等于事件的目标元素。

由于HTML事件处理程序会使HTML和JavaScript代码紧密耦合，所以许多开发人员都摈弃了HTML事件处理程序，转而使用JavaScript指定事件处理程序。

2.2 DOM0级事件处理程序

简单来说，就是在JS中，将一个函数赋值给一个元素的事件处理程序属性。这个时候，使用DOM0级方法制定的事件处理程序被认为是元素的方法。因此这时候的事件处理程序是在元素的作用域中运行，即可以在事件处理程序中通过this访问元素的任何属性和方法。

var btn = document.getElementById("btn");

btn.onclick = function(){       //此时onclick事件处理程序是元素的方法

  alert(this.value);              

}

在DOM0级事件处理程序是通过把函数实例的引用指派到DOM元素的属性而声明的。 

DOM第0级的缺点是，属性被用于存储作为事件处理程序的函数的引用，所以每个元素对于任何特定的事件类型，每次只能注册一个事件处理程序。

2.3 DOM2级事件处理程序

DOM第2级事件模型（也称为监听器）被设计来解决这些类型的问题。每个DOM元素都定义名为addEventListener()的方法，用于把事件处理程序(监听器)附加到元素上。这个方法的格式如下所示： addEventListener(enentType,listener,useCapture) ;

使用DOM2级处理程序，我们能在同一个元素上为同一个事件类型建立多个事件处理程序。

2.4 IE事件处理程序

IE实现了与DOM类似的两个方法：attachEvent()和detachEvent()。需要注意的是，传入attachEvent中的参数是"onclick", 而不是DOM方法中的"click"。在IE中使用attachEvent()与DOM0级方法的主要区别在于时间处理程序的作用域。该方法会在全局作用域中运行，因此this等于window，在编写跨浏览器的代码时，这一点非常重要。attachEvent()和addEventListerner()一样，都可以多次为元素添加事件处理程序。但不同的是，前者是从后往前执行程序，而后者则是顺序执行。

跨浏览器的事件处理程序

//跨浏览器事件处理程序var EventUtil = {

    addHandler:function(element,type,handler){

        if(element.addEventListener){

            element.addEventListener(type,handler,false);   //DOM2级

        }else if(element.attachEvent){

            element.attachEvent("on" + type,handler);       //兼容IE8及更早版本，加上“on”，IE方法

        }else{

            element["on" + type] = handler;                 //DOM0        }

    },

 

    removeHandler:function(element,type,handler){

        if(element.removeEventListener){

            element.removeEventListener(type,handler,false);//DOM2级

        }else if(element.detachEvent){

            element.detachEvent("on" + type,handler)        //兼容IE8及更早版本，加上“on”，IE方法

        }else{

            element["on" + type] = null;

        }

    }

};

使用示例：

//使用示例var btn = document.getElementById("myBtn");var handler = function(){

    alert("hello");

};

EventUtil.addHandler(btn,"click",handler);//其他代码

EventUtil.removeHandler(btn,"click",handler);

三、事件对象

事件对象(event)包含了所有与事件相关的信息。所有的浏览器都支持事件对象(event)，只不过支持的方式不同。

3.1 DOM中的事件对象

 兼容DOM的浏览器会将一个event事件传入到事件处理程序中。无论指定事件处理程序用的是什么方法（DOM0还是DOM2级）。

var btn = document.getElementById("myBtn");

/*DOM 0 级方法指定事件处理程序*/

btn.onclick = function(event){

  console.log(event.type);

};/*DOM 2 级方法指定事件处理程序*/

btn.addEventListener("click", function(event){

  console.log(event.type);

}, false);

在事件处理程序内部，始终存在三个对象：this, target, currentTarget. 其中this和currentTarget包含相同的值——是事件处理程序被指定的目标元素；而target则包含的是事件的实际目标。当直接将事件处理程序指定给目标元素时，this, target 和 currentTarget 包含相同的值。

var btn = document.getElementById("myBtn");

btn.onclick = function(event){

  console.log(event.target == this);   //true

  console.log(event.currentTarget == this);   //true};

 

/*如果事件处理程序存在于按钮的父节点中*/var body =document.body;

body.onclick = function(event){

  console.log(event.target == this);//target对象包含的是btn

  console.log(event.currentTarget == this);   //都包含body

};

stopPropagation()方法可以用于立即停止事件在DOM层次中的传播，即取消进一步的事件捕获或冒泡，从而避免出发注册在document.body上的事件处理程序，如下例子所示，当点击btn的时候，body的事件处理程序不会被触发，因为事件冒泡被及时取消了。

var btn = document.getElementById("myBtn");var body = document.body;

btn.onclick = function(event){

  console.log("btn was clicked!");

  event.stopPropagation();

};

 

body.onclick = function(event){

  console.log("body was clicked");

};

3.2 IE中的事件对象

首先需要明细的是，IE中不存在event.target，而是event.srcElement; firefox只支持target, chrome两个都支持。介于使用this不一定能获取到当前被触发的元素，所以建议编程者们使用target和srcElement获取目标元素。

此外，若在IE中使用DOM 0级制定事件处理程序，则event对象作为window对象的一个属性而存在，需要通过window.event调用；而若是使用attachEvent绑定事件，则event对象会作为参数被传入事件处理程序中。

四、事件类型

UI事件

DOMActivate：表示元素已被激活，DOM3已废弃，不建议使用

load：页面完全加载后在window上面触发，当所有框架加载完在框架集上触发，当图像加载完在<img>元素触发，当嵌入内容加载完在<object>元素上面触发

unload：与load的加载相反

abort：在用户停止下载过程时，若嵌入内容没有加载完，在<object>元素上触发

error：js错误在window触发，无法加载图像在<img>触发，无法加载嵌入内容在<object>触发，或当一个或多个框架无法加载在框架集上触发

select：用户选择文本框一或多个字符时触发

resize：窗口或框架大小变化时在window或框架上触发

scroll：用户滚动带滚动条的元素中的内容时，在该元素触发，<body>包含所加载页面滚动条

除DOMActivate事件外，其他事件在DOM2级都为HTML事件，DOMActivate在DOM2中依旧是UI事件

//浏览器是否支持DOM3级事件定义的事件var isSupported = document.implementation.hasFeature("UIEvent","3.0");

1、load事件

当页面完全加载完后（包括图像，js，css等外部文件），就会触发window的load事件

EventUtil.addHandler(window,"load",function(event){

    alert("Loaded");

});

第二种指定onload事件处理程序方式是为<body>添加onload属性：

<!DOCTYPE html><html><head>

    <title>Load Event Example</title></head><body onload="alert(‘Loaded!‘)">

   </body></html>

建议：尽可能使用js方式

在IE9+，Firefox，Opera，Chrome，Safari3+中，<script>也会触发load事件，可以确定动态加载的js文件是否加载完毕，例：

EventUtil.addHandler(window,"load",function(){

    var script = document.createElement("script");

    EventUtil.addHandler(script,"load",function(event){

        alert("Loaded");

    });

    script.src = "example.js";

    document.body.appendChild(script);

});

IE和Opera还支持<link>上的load事件，以便确定动态加载的样式表是否加载完毕

2、unload事件

与load相对应，使用方式一致，也有两种方式

注：无论哪种方式，都要小心编写onunload代码。unload事件是在一切都被卸载之后才触发，那么页面加载后存在的对象，此时就不一定存在。

3、resize事件

浏览器窗口被调整时在window上触发，所以可以通过js或<body>元素中的onresize特性来指定事件处理程序

4、scroll事件

虽然在window对象上发生，但它实际表示的则是页面中相应元素的变化

焦点事件

blur：元素失去焦点时触发，不会冒泡，所有浏览器支持

DOMFocusIn：元素获得焦点触发，与HTML事件focus等价，冒泡，只有Opera支持，DOM3废弃，选择focusIn

DOMFocusOut：元素失去焦点触发，是HTML事件blur的通用版本，只有Opera支持，DOM3废弃，选择focusOut

focus：元素获得焦点触发，不冒泡，所有浏览器支持

focusIn：元素获得焦点触发，与HTML事件focus等价，冒泡，支持的浏览器：IE5.5+，Safari5.1+，Opera11.5+，Chrome

focusOut：元素失去焦点触发，与HTML事件focus等价，冒泡，支持的浏览器：IE5.5+，Safari5.1+，Opera11.5+，Chrome

当焦点从页面一个元素移动到另一个元素，依次触发事件：

focusOut：失去焦点的元素触发

focusIn：获得焦点的元素触发

blur：失去焦点的元素触发

DOMFocusOut：失去焦点的元素触发

focus：获得焦点的元素触发

DOMFocusIn：获得焦点的元素触发

确定浏览器是否支持这些事件：

//确定浏览器是否支持焦点事件var isSUpported = document.implementation.hasFeature("FocusEvent","3.0");

鼠标与滚轮事件

click：单击主鼠标（一般为左键），或按下回车

dbclick：双击主鼠标

mousedown：用户按下任意鼠标按钮触发，不能通过键盘触发

mouseenter：鼠标光标从元素外部首次移动到元素范围之内触发，不冒泡，移动到后代元素不触发，IE，Firefox9+，Opera支持

mouseleave：在位于元素上方的鼠标光标移动到元素范围之外触发，不冒泡，移动到后代元素不触发，IE，Firefox9+，Opera支持

mousemove：鼠标指针在元素内部移动时重复触发，不能通过键盘触发

mouseout：从一个元素上方移动到另一个元素上方触发，不能通过键盘触发

mouseover：在鼠标指针位于一个元素外部，首次移入另一个元素边界之内触发，不能通过键盘触发

mouseup：释放鼠标按钮触发，不能通过键盘触发

mousedown + mouseout 触发 click，有一个被取消，click都不会触发，click + click 触发 dbclick

检测浏览器是否支持以上DOM2级事件（除dbclick，mouseenter，mouseleave）

//确定浏览器是否支持DOM2级鼠标事件var isSUpported = document.implementation.hasFeature("MouseEvents","2.0");//确定浏览器是否支持所有鼠标事件var isSUpported = document.implementation.hasFeature("MouseEvent","3.0");     //差了个s

滚轮事件，mousewheel事件

1、客户区坐标位置

clientX，clientY，保存鼠标事件在浏览器视口的特定位置，表示事件发生时鼠标在视口中的水平和垂直坐标

注意：并不包括页面滚动距离，因此并不表示鼠标在页面上的位置，只是视口位置

2、页面坐标位置

pageX，pageY，保存鼠标事件发生在页面的具体位置

IE8级更早版本不支持事件对象上的页面坐标，使用客户区坐标和滚动信息可以计算出来，使用document.body（混杂模式）或document.documentElement（标准模式）中的scrollLeft和scrollTop，例：

var div = document.getElementById("myDiv");

EventUtil.addHandler(div,"click",function(event){

    event = EventUtil.getEvent(event);

    var pageX = event.pageX;

        pageY = event.pageY;

 

    if(pageX == undefined){

        pageX = event.clientX + (document.body.scrollLeft || document.documentElement.scrollLeft);

    }

 

    if(pageY == undefined){

        pageY = event.clientY + (document.body.scrollTop || document.documentElement.scrollTop);

    }

 

    alert("Page coordinates: " + pageX + "," + pageY);

});

3、屏幕坐标位置

screenX，screenY，保存相对于整个电脑屏幕的位置

4、修改键

Shift,Ctrl,Alt,Meta（window键盘的window键，苹果的cmd），用来修改鼠标事件的行为，DOM规定4个属性：shiftKey，ctrlKey，altKey，metaKey，包含的都是布尔值，IE9、Firefox，Safari，Chrome，Opera都支持这四个属性，IE8及之前不支持

5、相关元素

mouseover，mouseout事件会涉及更多元素，mouseover，主要目标是获得光标的元素，相关元素是失去光标的元素，mouseout，主要目标是失去光标的元素，相关元素是获得光标的元素

DOM通过event对象的relatedTarget属性提供了相关的信息，这个属性只对mouseover，mouseout事件才包含值，其他的事件为null，IE8及之前版本不支持，提供其他属性。在mouseover触发时，IE的fromElement保存相关元素，在mouseout触发，IE的toElement保存相关元素（IE9支持所有这些属性）。把跨浏览器取得相关元素的方法加入到EventUtil对象中

var EventUtil = {

    //其他代码

    getRelatedTarget:function(event){

        if(event.relatedTarget){

            return event.relatedTarget;

        }else if(event.toElement){

            return event.toElement;

        }else if(event.fromElement){

            return event.fromElement;

        }else {

            return null;

        }

    },

 

    //其他代码

};

6、鼠标按钮

在mousedown，mouseup中event对象保存一个button属性，0、主按钮，1、中间按钮（滚轮），2、次按钮

IE8及更早版本也提供button属性，但与DOM的button属性值有大差异：

0：没有按下按钮

1：按下主按钮

2：按下次按钮

3：同时按下主次按钮

4：按下中间按钮

5：同时按下主和中

6：同时按下次和中

7：同时按下三键

为EventUtil对象添加getButton方法：

var EventUtil = {

    //其他代码

    getButton:function(event){

        if(document.implementation.hasFeature("MouseEvents","2.0")){        //检测MouseEvents特性可以知道event对象存在的button属性是否包含正确的值，失败，说明是IE

            return event.button;

        }else{

            switch(event.button){

                case 0:

                case 1:

                case 3:

                case 5:

                case 7:

                    return 0;

                case 2:

                case 6:

                    return 2;

                case 4:

                    return 1;

            }

        }

    },

 

    //其他代码

}

7、更多的事件信息

并没啥用，一方面只有IE支持，另一方面，提供的信息要么没啥用，要么可以通过其他方式计算出来

8、鼠标滚轮事件

mousewheel，IE6首先实现，Opera，Chrome，Safari随后也支持，与mousewheel事件对应的event对象另外包含了一个特殊的wheelDelta属性，当用户向前滚动滚轮，wheelDelta为正数，向后为负数

注：Opera9.5之前是正负号是相反的

Firefox支持一个名为DOMMouseScroll的类似事件，滚轮信息保存在detail属性中，向前是负数，向后是正数

将获取鼠标滚轮增量值的方法添加到EventUtil对象中：

var EventUtil = {

    //其他代码

    getWheelDelta:function(event){

        if(event.wheelDelta){

            return (client.engine.opera && client.engine.opera < 9.5 ?

                -event.wheelDelta : event.wheelDelta);

        }else{

            return -event.detail * 40;

        }

    },

 

    //其他代码

}

9、触摸设备

10、无障碍性问题

键盘与文本事件

键盘事件的支持主要遵循DOM0级

3个键盘事件：

keydown：按下键盘任意键触发，按住不放可以重复触发

keypress：按下字符键触发，按住不放可以重复触发，ESC也会触发，Safari3.1之前版本按下非字符键也会触发

keyup：释放键盘上的按键触发

只有一个文本事件：textInput，在文本插入文本框之前触发

键盘事件与鼠标事件一样，支持修改键，IE不支持metaKey

1、键码

发生keydown和keyup事件时，event对象的keyCode属性会包含一个代码，DOM和IE的event对象都支持

2、字符编码

IE9、Firefox、Chrome、Safari的event对象都支持一个charCode属性，只有发生keypress事件才包含值，代表按下的键的ASCII编码。此时keyCode为0或者等于按键键码。

跨浏览器方式取得字符编码

var EventUtil = {

    //其他代码

    getCharCode:function(event){

        if(typeof event.charCode == "number"){

            return event.charCode;

        }else{

            return event.keyCode;

        }

    },

 

    //其他代码

}

取得的字符编码可以使用String.fromCharCode()将其转换成实际字符

3、DOM3级变化

DOM3不再包含charCode属性，改为新属性：key，char

key为了取代keyCode新增，值是字符串，按下某个字符键时，是对应的文本字符，按下非字符键，是相应键值（shift等），char属性的值在按下字符键与key相同，按下非字符键为null

IE9+支持key，不支持char，Safari5和Chrome支持名为keyIdentifier的属性，按下非字符键与key同，按下字符键返回格式U+0000的字符串，表Unicode值

注：为跨浏览器，不推荐使用key，keyIdentifier，char

DOM3级事件还添加一个location属性，是一个数值

0：默认键盘

1：左侧位置（左alt）

2：右侧位置（右alt）

3：数字小键盘

4：移动设备键盘（虚拟键盘）

5：手柄（任天堂Wii控制器）

IE9支持这个属性，Safari和Chrome支持名为keyLocation属性，但有bug，值始终为0，除非按下数字键，值为3，否则不会是1245的值

注：支持location浏览器不多，不推荐使用

4、textInput事件

DOM3级事件规范引入新事件：textInput。在可编辑区域中输入字符触发。与keypress的textInput事件行为稍为不同。

区别一：

任何可以获得焦点的元素都可以触发keypress事件，但只有可编辑区域才能触发textInput事件

区别二：

textInput事件只有用户输入能够输入实际字符的键才会触发，keypress事件则再按下能够影响文本显示的键（退格键）也会触发

textInput事件主要考虑字符，因此它的event对象还包含一个data属性，保存用户输入的字符

使用textInput事件的例子：

var textbox = document.getElementById("myText");

EventUtil.addHandler(textbox,"textInput",function(event){

    event = EventUtil.getEvent(event);

    alert(event.data);

});

event对象上还有一个属性：inputMethod，表示把文本输入文本框的方式

0：不确定

1：键盘输入

2：粘贴

3：拖放

4：IME输入

5：表单选择某一项输入

6：手写输入（比如使用手写笔）

7：语音输入

8：几种方法组合输入

9：脚本输入

支持textInput属性的浏览器：IE9+，Safari和Chrome，只有IE支持inputMethod属性

5、设备中的键盘事件

复合事件

DOM3中新添加事件，用于处理IME（Input Method Editor，输入法编辑器）输入序列，可以让用户输入物理键盘上找不到的字符

变动事件

DOM2级的变动事件能在DOM中的某一部分发生变化时给出提示。是为XML或HTML DOM设计的，并不特定于语言。DOM2级变动事件：

DOMSubtreeModified：DOM结构发生任何变化触发，在其他任何事件触发后都会触发

DOMNodeInserted：在一个节点作为子节点被插入到另一个节点时触发

DOMNodeRemoved：节点移除触发

DOMNodeInsertedIntoDocument：在节点被直接插入文档或通过子树间接插入文档之后触发，在DOMNodeInserted之后触发

DOMNodeRemovedFromDocument：在节点被直接从文档或通过子树间接从文档中移除之前触发，在DOMNodeRemoved之后触发

DOMAttrModified：特性被修改触发

DOMCharacterDataModified：在文本节点值发生变化触发

//检查浏览器是否支持变动事件var isSUpported = document.implementation.hasFeature("MutationEvents","2.0");

1、删除节点

例：

<!DOCTYPE html><html><head>

    <title>Node Removal Events Example</title></head><body>

    <ul id="myList">

        <li>Item 1</li>

        <li>Item 2</li>

        <li>Item 3</li>

    </ul></body></html>

假设移除<ul>元素，触发事件顺序：

1、在<ul>上触发DOMNodeRemoved，relatedNode属性等于document.body

2、在<ul>触发DOMNodeRemovedFromDocument

3、在身为<ul>子节点的每个<li>及文本节点触发DOMNodeRemovedFromDocument

4、在document.body触发DOMSubtreeModified，因为<ul>是document.body的直接子元素

2、插入节点

HTML5事件

1、contexmenu事件

冒泡的事件，用于显示自定义的上下文菜单

2、beforeunload事件

3、DOMContentLoaded事件

window的load事件要在文档全部加载完毕才会触发，而DOMContentLoaded事件则在形成完成的DOM树之后就触发，而不理会js文件，图像，css等资源文件的加载

IE9+，Firefox，Chrome，Safari3.1，Opera9+都支持DOMContentLoaded，不支持的建议在页面加载期间设置一个时间为0的超时调用。

4、readystatechange事件

这个事件行为很难预料，支持的对象都有一个readyState属性，值包含：

uninitiallized（未初始化）：对象存在但尚未初始化

loading（正在加载）：对象正在加载

loaded（加载完毕）：对象数据加载完成

interactive（交互）：可以操作对象了，但还没有完全加载

complete（完成）：对象已加载完毕

这个事件的event对象不提供任何信息，也没有目标对象

5、pageshow和pagehide事件

Firefox和Opera特性，往返缓存，可以在用户使用浏览器的后退前进按钮加快页面转换速度。

Firefox提供新事件：

pageshow，在页面显示时触发。注：必须将事件处理程序添加到window中

pageshow事件的event对象还包含属性：parsisted的布尔值属性，若页面保存在bfcache，值为true，否则为false

pagehide事件，在浏览器卸载页面时触发，在unload之前触发，包含这个事件的event对象也包含persisted属性，在卸载后被保存到bfcache值被设置为true

Firefox，Safari5+，Chrome，Opera都支持这两事件，IE9及之前不支持

6、hashchange事件

H5新增，在url参数列表（及URL中#号后面的所有字符串）发生变化通知开发人员，必须要把此事件处理程序添加到window对象，然后URL参数列表只要变化就会调用它。此时event对象包含两个属性：oldURL和newURL，分别保存变化前后的完整url

支持的浏览器IE8+，Firefox3.6+，Safari5+，Chrome，Opera10.6+，只有Firefox6+，Chrome，Opera支持oldURL和newURL属性，为此最好使用location对象来确定当前的参数列表

设备事件

可以让开发人员确定用户再怎样使用设备

1、orientationchange事件

苹果为移动Safari中添加了orientationchange事件，移动Safari的window.orientation属性可能包含3个值：

0：肖像模式

90：左旋转（主屏按钮在右侧）

-90：右旋转（主屏按钮在左侧）

2、MozOrientation事件

Firefox3.6为检测设备方向引入MozOrientation新事件，当设备的加速计检测到设备方向改变时，触发事件，在window对象

此时event对象包含三个属性：x，y，z

x=0,y=0,z=1，竖直状态，设备向右倾斜x减小，反之反之，设备向远离用户倾斜y减小，反之反之，z检测垂直加速度，1表示静止，设备移动时减少，失重时为0

3、deviceorientation事件

deviceorientation事件的意图是告诉开发人员设备在空间中朝向哪儿，而不是如何移动

设备在三维空间中靠x,y,z来定位，静止放在水平表面，都为0，x方向从左往右，y方向从下往上，z方向从后往前（x,y与水平面在同一个平面内，z垂直于水平面）

deviceorientation事件触发时，事件对象包含5个属性：

alpha：围绕z轴旋转（左右旋转），y轴度数差，一个介于0-360的浮点数

beta：围绕x轴旋转（前后旋转），z轴度数差，-180-180浮点数

gamma：围绕y轴旋转（扭转设备），z轴度数差，-90-90浮点数

absolute：布尔值，表示设备是否返回一个绝对值

compassCalibrated：布尔值，表示设备的指南针是否校准过

4、devicemotion事件

devicemotion事件告诉开发人员设备什么时候移动，而不仅仅设备方向如何改变。

触发devicemotion事件时，事件对象包含以下属性

acceleration：包含x,y,z属性的对象，不考虑重力情况下，告诉你每个方向的加速度

accelerationIncludingGravity：考虑z轴自然重力加速度

interval：以毫秒表示的时间值，必须在另一个devicemotion事件触发前传入。每个事件中应该是常量

rotationRate：一个包含表示方向的alpha，beta，gamma属性的对象

若读取不到acceleration，accelerationIncludingGravity，rotationRate的值，则为null

触摸与手势事件

1、触摸事件

touchstart：当手指触摸屏幕时触发；即使已经有一个手指在屏幕上也会触发

touchmove：手指在屏幕上滑动时连续触发

touchend：移开触发

touchcancel：当系统停止跟踪触摸时触发

都会冒泡，也都可以取消

touches：当前跟踪的触摸操作的Touch对象数组

targetTouchs：特定于事件目标的Touch对象数组

changeTouches：自上次触摸以来发生了什么改变的Touch对象数组

每个Touch对象包含以下属性

clientX：触摸目标视口X坐标

clientY：触摸目标视口Y坐标

identifier：标识触摸的唯一ID

pageX：触摸目标在页面中的X坐标

pageY：触摸目标在页面中的Y坐标

screenX：触摸目标在屏幕中的X坐标

screenY：触摸目标在屏幕中的Y坐标

target：触摸的DOM节点目标

2、手势事件

ios2.0的Safari引入了一组手势事件。

gesturestart：当一个手指已经按在屏幕上而另一个手指又触摸屏幕时触发

gesturechange：触摸屏幕的任一个手指位置发生变化时触发

gestureend：任何一个手机从屏幕中移开时触发

五、内存和性能

添加到页面上的事件处理程序数量将直接关系到页面的整体运行性能。由于浏览器必须事先指定所有事件处理程序而大量访问DOM，会延迟整个页面的交互时间。

对“事件处理程序过多"问题的解决办法就是事件委托。事件委托利用了事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。

此外，还可以在不需要时移除事件处理程序。当带有事件处理程序的DOM被移除了（例如使用了removeChild()或innerHTML）则添加到该元素上的事件处理程序则无法被回收。因此，当你知道某个元素即将被移除的时候，那么最好手工移除该事件处理程序(btn.οnclick=null;)。并且在浏览器卸载页面之前(unonload)移除页面的所有事件处理程序。

六、模拟事件

模拟事件的三个步骤：1、创建event对象；2、初始化事件对象；3、触发事件。