［javascript权威指南］［阅读笔记］事件处理

异步事件驱动编程模型

事件类型

事件目标

事件处理程序或事件监听程序

事件对象

事件传播

• 文档加载和准备就绪事件

  //onload()仅在文档及图片全部加载完毕时触发<pre name="code" class="javascript">//当文档加载解析完毕且所有延迟（）脚本都执行完毕时会触发DomContentLoaded事件，此时图片和异步（async）脚本可能还在加载<pre name="code" class="javascript">//document.readyState属性随着文档加载过程而变，每次改变都伴随着document上的readystatechange事件<pre name="code" class="javascript">//whenReady函数<pre name="code" class="javascript">var whenReady = (function() {
      var funds = [];
      var ready = false;
  
      function handler(e) {
          if(ready) return;
          if(e.type === "readystatechange" && document.readyState !== "complete")
          return;
          for(var i = 0; i<funcs.length; i++)
              funds[i].call(document);
          ready = true;
          funds = null;
      }
      if(document.addEventListener) {
          document.addEventListener("DOMContentLoaded", handler, false);
          document.addEventListener("readystatechange", handler, false);
          window.addEventListener("load", handler, false);
      }
      else if (document.attachEvent) {
          document.attachEvent("onreadystatechange", handler);
          window.attachEvent("unload", handler);
      }
      return function whenReady(f) {
          if(ready) f.call(document);
          else funds.push(f);
      };
  }());
             

• 鼠标事件：写一个drag()函数
• 鼠标滚轮事件？
• 拖放事件？
• 键盘事件？
• 文本输入事件？

传统事件类型

• 表单事件
• window事件
• 鼠标事件
• 键盘事件

DOM事件 HTML5事件

• <audio>和<video>

• drag

• 历史管理机制
• HTML表单
• 离线web应用

触摸屏和移动设备事件 注册事件处理程序

• 设置HTML标签属性为事件处理程序（不推荐）
• addEventListener()和removeEventListener()
• attachEvent()和detachEvent()
• IE不支持事件捕获
• attachEvent()允许同一事件处理程序注册多次，且事件触发时，程序执行次数和注册次数一样

事件处理程序的调用

• 事件处理程序的参数——event：function handler(event) { event = event || window.event; }。当函数没有参数时，就调用window.event
• 事件处理程序的运行环境：一般this为事件目标，attachEvent()中为全局（window）对象，可以通过下边的方法hack

  target.attachEvent('on'+type, function(event) {
      return handler.call(target, event);
  });
             

• 事件处理程序的作用域
• 事件处理程序的返回值
• 调用顺序：通过对象属性或HTML属性注册优先调用，addEventListener()按顺序调用，attachEvent()可能按照任何顺序调用
• 事件传播：事件“冒泡”。事件捕获 － 事件执行 － 事件冒泡。addEventListener()事件第三个参数设为true，则事件在捕获阶段即执行。IE9以前的浏览器不支持捕获
• 事件取消

  function cancelHandler(event) {
      event = event || window.event; //IE
      //to do
      if(event.preventDefault) event.preventDefault(); //标准
      if(event.returnValue) event.returnValue = false; //IE
      return false; //对象属性注册的事件
  }
             

• 取消事件传播：stopPropagation()    ［IE9之前的IE］cancelBubble属性

•