[JavaScript高级程序设计]之事件篇01

标签：

事件流

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

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

事件处理

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

  1 //绑定事件
  2 var btn = document.getElementById(‘mybtn‘);
  3 btn.onclick = function () {
  4     console.info(this.id)  //mybtn
  5 }
  6 
  7 //删除事件
  8 var btn = document.getElementById(‘mybtn‘);
  9 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对象；可以绑定多个回调，不过执行的顺序与绑定的顺序是相反的。
• 跨浏览器事件处理
  

   1 var EventUtil = {
   2     addHandler: function (element, type, handler) {
   3         if (element.addEventListener) {
   4             element.addEventListener(type, handler, false);
   5         } else if (element.attachEvent) {
   6             element.attachEvent(‘on‘ + type, handler);
   7         } else {
   8             element[‘on‘ + type] = handler;
   9         }
  10     },
  11     removeHandler: function (element, type, handler) {
  12         if (element.removeEventListener) {
  13             element.removeEventListener(type, handler, false);
  14         } else if (element.detachEvent) {
  15             element.detachEvent(‘on‘ + type, handler);
  16         } else {
  17             element[‘on‘ + type] = handler;
  18         }
  19     }
  20 }

事件对象

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

   1 var btn = document.getElementById(‘myBtn‘);
   2 
   3 //方式一
   4 btn.onclick = function (event) {
   5     console.info(event.type); //‘click‘
   6 };
   7 
   8 //方式二
   9 btn.addEventListener(‘click‘, function (event) {
  10     console.info(event.type); //‘click‘
  11 });
  12 
  13 //方式三
  14 <input type="button" value="click me" onclick="alert(event.type)"> //‘click‘

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

   1 var btn = document.getElementById(‘mybtn‘);
   2 
   3 //方式一
   4 btn.onclick = function () {
   5     var event = window.event;
   6     console.info(event.type); //‘click‘
   7 };
   8 
   9 //方式二，也可以使用window.event来访问
  10 btn.attachEvent(‘onclick‘, function (event) {
  11     console.info(event.type); //‘click‘
  12 });
  13 
  14 //方式三
  15 <input type="button" value="click me" onclick="alert(event.type)"> //‘click‘

   

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

   1 var EventUtil = {
   2     addHandler: function (element, type, handler) {
   3         if (element.addEventListener) {
   4             element.addEventListener(type, handler, false);
   5         } else if (element.attachEvent) {
   6             element.attachEvent(‘on‘ + type, handler);
   7         } else {
   8             element[‘on‘ + type] = handler;
   9         }
  10     },
  11     removeHandler: function (element, type, handler) {
  12         if (element.removeEventListener) {
  13             element.removeEventListener(type, handler, false);
  14         } else if (element.detachEvent) {
  15             element.detachEvent(‘on‘ + type, handler);
  16         } else {
  17             element[‘on‘ + type] = handler;
  18         }
  19     },
  20     getEvent: function (event) {
  21         return event ? event : window.event;
  22     },
  23     getTarget: function (event) {
  24         return event.target || event.srcElement;
  25     },
  26     //阻止默认事件
  27     preventDefault: function (event) {
  28         if (event.preventDefault) {
  29             event.preventDefault();
  30         } else {
  31             event.returnValue = false;
  32         }
  33     },
  34     //阻止捕获、冒泡
  35     stopPropagation: function (event) {
  36         if (event.stopPropagation) {
  37             event.stopPropagation();
  38         } else {
  39             event.cancelBubble = true;
  40         }
  41     }
  42 }

   

[JavaScript高级程序设计]之事件篇01

标签：

原文地址：http://www.cnblogs.com/stonevina/p/4332859.html