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);
    }
  }
};