JavaScript 事件（下）

接JavaScript 事件（上）

6、变动事件

    当DOM中的某一部分发生变化时给出提示

DOMSubtreeModified：DOM结构变化触发

DOMNodeInserted: 插入子节点触发

DOMNodeRemoved:删除节点触发

DOMNodeInstertedIntoDocument:节点插入文档时触发

DOMNodeRemovedFromDocument:节点从文档中移出触发

7、HTML5事件

1、contextmenu ：显示自定义的上下文菜单，冒泡

2、beforeunload：在浏览器关闭页面之前触发

3、DOMContentLoaded：在形成完整的DOM树 之后就会触发

4、readystatechange：提供加载状态相关信息，支持此事件的每个对象都有一个readyState属性，可以是以下值：

uninitialized（未初始化）      loading（正在加载）    loaded（加载完毕）    interactive（交互）    complete（完成）

5、pageshow和pagehide事件——火狐专用

pageshow在页面loaded后触发，或者在bfcache页面完全恢复后触发。    

pagehide在页面卸载前触发

8、设备事件device event

1、苹果的移动设备Safari：屏幕方向变化：orientationchange事件：0：竖屏，90：左旋转，-90：右旋转

2、deviceorientation事件：设备朝向，靠x、y、z轴定位：x右    y上    z后

3、devicemotion事件：设备如何移动，拥有以下属性：

acceleration:在xyz方向上的加速度（不包括重力加速度）

accelerationIncludingGravity:包括重力加速的xyz方向加速度

interval:时间

rotationRate：一个包含alpha、beta、gamma属性的对下那个

9、触摸与手势事件

    1、触摸事件，拥有以下的事件：

touchstrat：手指触摸屏幕时触发

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

touchend:手指移开屏幕时触发

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

    每个触摸事件的event对象都提供了在鼠标事件中常见的属性，还有下列几个跟踪触摸的属性

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

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

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

每个Touch对象包含下列属性:clientX、clientY、identifier：标识触摸的唯一ID、　pageX、pageY、screenX、screenY、target

2、手势事件

    当两个手指触摸屏幕时就会产生手势，有以下三个手势事件：

gesturestart:两手指在屏幕上时

gesturechange:任一手指位置变化时

gestureend:任一手指离开屏幕时

    每个手势的event对象都有标准鼠标事件属性，此外还有两个额外的属性：

rotation：手指变化引起的旋转角度，从0开始，逆时针旋转为负，顺时针旋转为正

scale：手指间距离，值从1开始，随距离增长而变化

五、内存和性能

1、事件委托

    当“事件处理程序过多”时使用事件委托。在DOM树中尽量最高的层次上添加一个事件处理程序，管理某一类型的所有事件。

   最适合采用事件委托技术的事件包括click、 mousedown、mouseup、keydown、keyup和 keypress

2、移出事件处理程序

    1、 从文档中移除带有事件处理程序的元素时（通过DOM操作或者innerHTML替换），添加到元素中的事件处理程序极有可能无法被当作垃圾回收。因此当某个元素即将被移除时，最好手工移除事件处理程序。

btn.onclick=function(){
    //此处先执行需要执行的代码
    btn.onclick=null;   //移除事件处理程序

    2、卸载页面时没有清理干净事件处理程序就会占用内存，因此需先通过onunload移除所有事件处理程序

六、模拟事件

    也可以使用JavaScript 在任意时刻来触发特定的事件，称为模拟事件

    1、DOM中的模拟事件

    在document对象上使用createEvent()方法创建event对象，参数为要创建的事件类型：UIEvents/MouseEvents/MutationEvents/HTMLEvents

1、模拟鼠标事件

    先document.createEvent("MouseEvents")，返回一个对象，此对象拥有initMouseEvent()方法，接受以下参数：

type：事件类型    bubbles:是否冒泡    cancelable：是否可以取消   view：与事件相关的视图  等十五个参数，与鼠标的event的属性一 一对应

2、模拟键盘事件

    用document.createEvent("KeyboadEvent")创建，返回的对象有initKeyEvent()方法，接受以下参数

type：事件类型    bubbles:是否冒泡    cancelable：是否可以取消   view：与事件相关的视图  key:按下的键码  location:按下键的键盘区域   modifiers   repeat:一行中按了这个键多少次

3、模拟其他事件

    变动事件:使用createEvent("MutationEvents")创建一个包含initMutationEvent()方法的变动事件对象,接受：type、bubbles、cancelable、 relatedNode、preValue、newValue、attrName和 attrChange这八个参数

var event=document.createEvent("MutationEvents");  //创建事件
event.initNutationEvent("DOMNodeInserted",true,false,someNode,"","","",0);  //初始化
target.dispatchEvent(event);  

    HTML事件：

var enent=document.createEvent("HEMLEvents");  //创建HTML事件
event.initEvent("focus",true,flase);  //初始化
target.dispatchEvent(event);   

4、自定义DOM事件

    使用createEvent（"CustomEvent"）创建自定义事件，返回的对象有一个initCustomEvent()方法，接受以下四个参数：

type：事件类型    bubbles:是否冒泡   cancelable：是否可以取消    detail：任意值，保存在event.detail中

2、IE的事件模拟

    先调用document.createEventObject()方法创建event对象，再为这个对象添加所有必要的信息，最后是在目标上调用fireEvent()方法，此方法接收两个参数：①事件处理名  ②event对象  ，自动为event对象添加srcElement和type属性。