JavaScript 事件绑定及深入

事件绑定分为两种:

一种是传统事件绑定(内联模型/脚本模型);上一章内容;
一种是现代事件绑定(DOM2级模型);现代事件绑定在传统事件绑定基础上提供了更强大的功能;
一 传统事件绑定的问题

// 脚本模型将一个函数赋值给一个事件处理函数;  var box = document.getElementById('box');  // 获取元素;  box.onclick = function(){          // 元素点击触发事件;    alert('Lee');  }// 问题一:一个事件处理函数触发两次事件;  window.onload = function(){         // 第一组程序;    alert('Lee');  }  window.onload = function(){         // 第二组程序;    alert('Mr.Lee');  }  // PS:当两组程序同时执行的时候,后面一个会把前面一个完全覆盖;  // 导致前面的window.onload完全失效了;// 解决方案:  window.onload = function(){         // 第一组事件处理程序,会被覆盖;    alert('Lee');  }  if(typeof window.onload == 'function'){   // 判断之前是否有window.onload;    var saved = null;            // 创建一个保存器;    saved = window.onload;          // 把之前的window.onload保存起来;  }  window.onload = function(){         // 下一个要执行的事件;    // saved()=window.onload = function    if(saved)saved();            // 判断之前是否有事件,如果有则先执行之前保存的事件;    alert('Mr.Lee');             // 执行本事件的代码;  }

// 问题二:事件切换器  box.onclick = boBlue;             // 第一次执行toBlue();  function toRed(){    this.className = 'red';    this.onclick = toBlue;          // 第三次执行roBlue(),然后来回切换;  }  function toBlue(){    this.className = 'blue';    this.onclick = toRed;          // 第二次执行toRed();  }  // 这个切换器在扩展的时候,会出现一些问题:  1.如果增加一个执行函数,那么会被覆盖;  box.onclick = toAlert;            // 被增加的函数;  box.onclick = toBlue;            // toAlert被覆盖了;  2.如果解决覆盖问题,就必须包含同时执行;  box.onclick = function(){          // 包含进去,但可读性降低;    toAlert();                // 第一次不会被覆盖,但第二次又被覆盖;    toBlue.call(this);            // 还必须把this传递到切换器里;  }

// 综上三个问题:覆盖问题/可读性问题/this传递为题;// 我们创建一个自定义事件处理函数;  function addEvent(obj,type,fn){       // 取代传统事件处理函数;    var saved = null;            // 保存每次触发的事件处理函数;    if(typeof obj['on'+type] == 'function'){// 判断是不是存在事件;      saved = obj['on'+type];       // 如果有,保存起来;    }    obj['on'+type] = function(){      // 然后执行;      if(saved)saved();          // 执行上一个;      fn.call(this);           // 执行函数,把this传递进去;    }  }  addEvent(window,'load',function(){    alert('Lee');              // 可以执行;  });  addEvent(window.'load',function(){    alert('Mr.Lee');            // 可以执行;  })// 用自定义事件函数注册到切换器上查看效果:  addEvent(window,'load',function(){    var box = document.getElementById('box');    addEvent(box,'click',toBlue);  });  function toRed(){    this.className = 'red';    addEvent(this,'click',toBlue);  }  function toBlue(){    this.className = 'blue';    addEvent(this,'click',toRed);