再读javascript（四）

原生javascript

上接再读javascript（三）
本章主要介绍事件
本章内容繁多且复杂，有空得多回顾

1、事件流

• 事件冒泡流：事件开始由最具体元素逐级向上传播到较为不具体的节点（最常用！！！）。
• 事件捕获流：不太具体的节点应该更早接收到事件，具体的节点应该最后接收到事件。
• DOM事件流：包含三个阶段：事件捕获阶段、处于目标阶段和事件冒泡阶段。

2、事件处理程序

• HTML事件处理程序（直接在节点指定处理程序）： event变量可以直接访问事件对象。this值等于事件的目标元素。缺点：当要修改函数名，得同时修改HTML和js两部分
• DOM0级事件处理程序：取得一个操作对象的引用。然后为其绑定事件处理程序属性（onclick等），将这种属性的值设置为一个函数。优点：可以通过设置属性值为null，来取消事件。

• DOM2级事件处理程序：addEventListener()、removeEventListener()

  addEventListener 接收三个参数，参数一：处理的事件名；参数二：事件处理程序；参数三：为true，表示在补货阶段处理程序，为false，表示在冒泡阶段处理程序。
  优点：可以添加多个事件处理程序

• IE事件处理程序：attachEvent()、detachEvent()

  attachEvent使用特点：1、指定处理事件名是用on+事件名；2、与addEventListener一样可以同时添加多个事件处理程序，只不过执行顺序相反，从后往前执行。

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

  var EventUtil = {
  addHandler: function (ele,type,handler) {
      if(ele.addEventListener){
          ele.addEventListener(type,handler,false);
      }
      else if(ele.attachEvent){
          ele.attachEvent('on'+type,handler);
      }
      else {
          ele['on'+type] = handler;
      }
  },
  removeHandler: function (ele,type,handler) {
      if(ele.removeHandler){
          ele.removeHandler(type,handler,false);
      }
      else if(ele.detachEvent){
          ele.detachEvent('on'+type,handler);
      }
      else {
          ele['on'+type] = null;
      }
  }
  };

  首先创建EventUtil对象，包含绑定和移除事件两个方法。这样就可以通过该对象的两个方法实现跨浏览器为一个元素添加和移除事件。

3、事件对象

• DOM中的事件对象：在触发DOM上的某个事件时，会产生一个事件对象event。

  event.type 输出触发事件类型
  event.currentTarget 始终等于 this；event.target 只包含事件的实际触发目标。
  event.preventDefault(); 阻止特定事件的默认行为，例如：点击a标签会默认跳转到指定的url，可以在click事件调用该方法阻止跳转。
  event.stopPropagation(); 立即阻止事件在dom层中的传播，阻止冒泡和捕获。

• IE 中的事件对象

  IE中的事件对象的属性很少，但是都是DOM中的事件对象所包含的。因此在处理事件默认行为和阻止冒泡方面有所不同。具体看下面：

• 跨浏览器的事件对象

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

4、事件类型

• UI事件

  • load事件：触发条件：1、页面加载完成；2、图片加载完成；3、或者节点部分浏览器也会触发；
  • unload事件，在页面完全卸载时触发，此时不可引用页面中的任何东西。
  • resize事件：调整浏览器窗口时触发
  • scroll事件：文档被滚动期间重复被触发。

• 焦点事件

  • focus和blur事件（不冒泡）
  • focusin和focusout事件（冒泡）

• 鼠标与滚轮事件

  click、dbclick、mousedown、mouseenter、mouseleave、mousemove、mouseout、mouseover、mouseup、mousewheel。除了mouseenter和mouseleave所有事件都会冒泡，也可以被取消。
  只有在同一个元素上相继触发mousedown和mouseup事件，才会触发click事件。如果其中一个被取消，就不会触发click事件。类似的，dbclick事件
  

  • 客户区坐标位置
    

    event.clientX 和 event.clientY 记录鼠标指针在视口中的坐标信息。（不表示鼠标在页面中的位置）

  • 页面坐标位置
    

    event.pageX 和 event.pageY 记录事件是在页面中的什么位置发生的。

  • 屏幕坐标位置
    

    event.screenX 和 event.screenY 记录鼠标事件发生时相对于整个屏幕的坐标信息

  • event.button 可以获取鼠标按下去的是哪个按钮

5、键盘与文本事件

keydown、keypress、keyup、textInput：keydown和keypress是在文本变化之前触发、keyup在之后
event.keyCode 获取键盘按键对应的ASCII码
event.data 可以确定用户输入的数据
event.inputMethod 可以确定文本输入到文本框中的方式。1、键盘输入；2、粘贴；3、拖放；等

6、变动事件

• DOMSubtreeModified： dom结构发生变化时触发
• DOMNodeInserted： 一个节点被当做子节点插入到另一个节点触发
• DOMNodeRemoved：在节点从父节点移除时触发
• DOMNodeInsertedIntoDocument、DOMNodeRemovedFromDocument
• DOMAttrModified： 在特性被修改时触发
• DOMCharacterDataModified： 在文本节点的值发生变化时触发

7、HTML5事件

• contextmenu事件：右键单击触发，使用event.preventDefault()可以阻止
• beforeunload事件：在页面卸载前触发。用户可以定义相关操作，但不能彻底取消这个事件。
• DOMContentLoaded事件：文档dom树加载完触发
• readystatechange事件

8、设备事件（简单了解、移动端）

orientationchange: window.orientation属性可能包含三个值：0表示肖像模式。-90表示想有旋转的横向模式。90表示向左旋转的横向模式。

9、触摸事件（移动端）

touchstart、touchmove、touchend、touchcancel：调用event.preventDefault都可以阻止默认事件
手势事件

10、优化内存和性能

• 事件委托（利用事件冒泡原理）：尽量减少事件绑定，当处理一类事件时，可以通过事件委托的方式，加以参数区分，执行不同结果。
• 移除事件处理程序

11、模拟事件（简单了解）

document.createEvent()方法创建event对象。接收参数：UIEvents、MouseEvents、MutationEvents、HTMLEvents