Javascript事件笔记

事件在DOM结构中传播的顺序叫事件流，分三个阶段：事件捕获、事件发生、事件冒泡

现代浏览器事件冒泡一直冒到window身上，事件捕获也延伸到window开始

事件级别

HTML事件 onclick = "showAlert(event)"
DOM0级事件 div.onclick = function(){}
DOM2级事件 addEventListen

事件的分类

UI事件、焦点事件、鼠标事件、滚轮事件、文本事件、键盘事件、设备事件。

UI事件指的是那些不一定与用户操作有关的事件。包括：

load 当页面完全加载后(包括所有图像、Javascript文件、CSS文件等外部资源）就会触发window身上的load事件。当我们为image图像指定事件时，需要先指定事件，然后设置 src 才能在图像加载完毕触发事件，否则不能生效。
unload window身上
abort
error window身上
select 表单元素
resize window身上
scroll window和body身上触发，有兼容性问题，

焦点事件

focus 不冒泡
blur 不冒泡
focusin 冒泡
focusout 冒泡

鼠标事件与滚轮事件

click
dbclick
mousedown
mouseenter 鼠标光标从元素外部首次移动到元素范围之内时触发，不冒泡，而且移动到后代元素上也不触发
mouseleave 在位于元素上方的鼠标光标移动到元素范围之外时触发，不冒泡，而且光标移动到后代元素上不会触发
mousemove 光标在元素内部移动时重复地触发。
mouseout 在鼠标指针位于一个元素上方，然后用户将其移入另一个元素时触发。一个元素可能位于前一个元素的外部，也可能是这个元素的子元素
mouseover 在鼠标指针位于一个元素外部，然后用户将其首次移入另一个元素边界之内触发
mouseup

客户区座标

event.clientX
event.clientY
event.pageX IE8下需要采用折衷方案计算出来scrollLeft 和scrollTop
event.pageY
event.screenX
event.screenY

iOS 和 Andriod 特殊处理

不支持dbclick
轻击可单击元素会触发mousemove事件。如果此操作会导致内容滚变化，将不再有其他事件法身滚；如果屏幕没有因此变化，那么一次会发生mousedown mouseup click 事件。轻击不可单击的元素不会触发任何事件。可单击的元素指那些淡季可产生默认操作的元素，或这那些已经被指定了onclick事件处理程序的元素。
mousemove事件也会触发mouseover 和 mouseout 事件
两个手指放在屏幕上且页面随手指移动二滚动时会触发mousewheel 和 scroll事件。

键盘事件

keydown 按下任意键时触发，一直按下，一直触发，文本框变化前
keypress 按下任意键时触发，一直按下，一直触发，文本框变化前
keyup
textInput 用户在可编辑区域中输入字符时触发，退格键，button身上的都不能触发

contentmenu事件在呼出快捷菜单时触发，具体可以参见范例。

DOMContentLoaded事件 DOM树加载完毕后触发，document身上或者window身上

pageshow 在页面onload之后触发，切换标签从缓存中读取时也会触发
pagehide

hashchange URL的参数列表发生变化时通知开发人员。window对象

设备事件

orientationchange事件 window身上，苹果ios系统 0 90 -90
deviceorientation xyz轴，

触摸手势事件

touchstart 冒泡
touchmove 冒泡
touchend 冒泡
touchcancel 冒泡
以上事件的事件对象中不仅包括clientX等参数，还包括touches targetTouchs changeTouches等属性
touches 表示当前跟踪的触摸操作的Touch对象的数组
targetTouchs 特定与事件目标的Touch对象数组
changeTouches 表示自上此触摸以来发生了什么改变的Touch对象的数组

手势事件

gesturestart 当一个手指已经安在屏幕上，另一个手指有触摸屏幕时触发
gesturechange 当触摸屏上任意一个手指位置发生变化时触发
gestureend 当任何一个手指从屏幕上面移开时触发

事件委托

利用事件冒泡和target来获取对应的元素
移除事件处理程序

//scroll事件的触发
EventUtil.addHandler(window,"scroll",function (event) {
  if(document.compatMode == "CSS1Compat"){
    alert(document.documentElement.scrollTop);
  }else {
    alert(document.body.scrollTop);
  }
})

//计算IE8下pageX和pageY

//修改键

//快捷菜单范例

//跨浏览器事件解决方案
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] = hanlder;
    }
  },
  //移除事件
  removeHandler: function (element, type, hanlder) {
    if(element.removeEventListener){
      element.removeEventListener(type,handler,false);
    }else if(element.detachEvent){
      element.detachEvent("on" + type, hanlder);
    } 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;
    }
  },
  //当事件为mouseover和mouseout时，事件对象中会有相关元素，这里就是获取相关元素
  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;
    }
  },
  //获取鼠标点击时，用的是哪个按键
  getButton: function (event) {
    if(document.implementation.hasFeature("MouseEvents","2.0")){
      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;
      }
    }
  },
  //获取鼠标滚轮滚动的方向，120为向上滚，-120为向下滚
  getWheelDelta: function (event) {
    if(event.wheelDelta){
      return (client.engine.opera && client.engine.opera < 9.5 ? -event.wheelDelta: event.wheelDelta)
    } else {
      return -event.detail * 40;
    }
  },
  //获取按键的编码
  getCharCode: function (event) {
    if(typeof event.charCode == "number"){
      return event.charCode;
    }else {
      return event.keyCode;
    }
  },
  //获取剪切板内容
  getClipboardText: function (event) {
    var clipboardData = (event.clipboardData || window.clipboardData);
    return clipboardData.getData("text");
  },
  //设置剪切板内容
  setClipboardText: function (event) {
    if(event.clipboardData){
      return event.clipboardData.setData("text/plain",value);
    } else if (window.clipboardData){
      return window.clipboardData.setData("text",value);
    }
  }
};