《JavaScript高级程序设计》之事件篇01

事件流

IE提出的是事件冒泡流，而Netscape提出的是事件捕获流。

• 事件冒泡流
  即当事件开始时，由具体的节点接收，然后逐级向上传播到较为不具体的节点。
  
• 事件捕获流
  即由不具体的节点逐级向下传播到具体的节点。
  
  事件捕获的起点和事件冒泡的中终点都是window对象。低版本IE除外。
• DOM事件流
  DOM2级事件分为三个阶段：捕获阶段、处于目标阶段、冒泡阶段。
  

事件处理

• DOM0级事件处理
  将一个函数赋值给一个事件处理程序的属性，回调中的this为当前元素，只能绑定一个回调，只执行最后一次绑定的回调
  

  //绑定事件
  var btn = document.getElementById('mybtn');
  btn.onclick = function () {
      console.info(this.id)  //mybtn
  }
  
  //删除事件
  var btn = document.getElementById('mybtn');
  btn.onclick = null;

 

• DOM2级事件处理
  addEventListener：绑定事件程序，removeEventListener：删除事件程序
  语法:
  target.addEventListener(type, listener[, useCapture]);

  target.removeEventListener(type, listener[, useCapture]);
  type: 事件名称;listener: 事件的回调;useCapture：true，冒泡，false，捕获，默认false
  DOM2级可以为一个元素绑定多个回调，按照绑定的顺序依次执行。回调中的this为当前元素；removeEventListener的参数必须和addEventListener保持一致才可删除事件。

• IE事件处理
  attachEvent：绑定事件，detachEvent：删除程序
  IE8以下的浏览器只支持事件冒泡，只接受两个参数（type，listener），type = "on" + type;回调中的this为window对象；可以绑定多个回调，不过执行的顺序与绑定的顺序是相反的。
• 跨浏览器事件处理
  

  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] = handler;
          }
      },
      removeHandler: function (element, type, handler) {
          if (element.removeEventListener) {
              element.removeEventListener(type, handler, false);
          } else if (element.detachEvent) {
              element.detachEvent('on' + type, handler);
          } else {
              element['on' + type] = handler;
          }
      }
  }

事件对象

• DOM中的事件对象
  常见的几种event访问方法，事件的回调中都包含event对象，this为currentTarget
  

  var btn = document.getElementById('myBtn');
  
  //方式一
  btn.onclick = function (event) {
      console.info(event.type); //'click'
  };
  
  //方式二
  btn.addEventListener('click', function (event) {
      console.info(event.type); //'click'
  });
  
  //方式三
  <input type="button" value="click me" onclick="alert(event.type)"> //'click'

  event对象包含以下属性和方法，具体可参考Event
  
• IE中的事件对象
  事件回调函数的作用域会变，this值不固定
  

  var btn = document.getElementById('mybtn');
  
  //方式一
  btn.onclick = function () {
      var event = window.event;
      console.info(event.type); //'click'
  };
  
  //方式二，也可以使用window.event来访问
  btn.attachEvent('onclick', function (event) {
      console.info(event.type); //'click'
  });
  
  //方式三
  <input type="button" value="click me" onclick="alert(event.type)"> //'click'

   

  event都有以下的属性和方法
  
  
  
• 跨浏览器处理
  

  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] = handler;
          }
      },
      removeHandler: function (element, type, handler) {
          if (element.removeEventListener) {
              element.removeEventListener(type, handler, false);
          } else if (element.detachEvent) {
              element.detachEvent('on' + type, handler);
          } else {
              element['on' + type] = handler;
          }
      },
      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;
          }
      }
  }