事件

1.DOM0级事件处理程序
   每个元素都有自己的时间处理程序属性，这些属性通常全部小写，将这种属性的值设置为一个函数，就可以指定事件处理程序。如：
    var btn =document.getElementById_x('btn');
    btn.οnclick= function(){ alert('hellor world!'); }
  使用DOM0级方法指定的事件处理程序被认为是元素的方法。因此，这时候的事件处理程序是在元素的作用域中运行；换句话说，程序中的this引用当前元素。
    var btn =document.getElementById_x('btn');
    btn.οnclick= function {
       alert(this.id);             //btn
    }
   将事件处理程序属性的值设为null，就可以删除事件了。如：
    btn.οnclick=null;           //删除事件处理程序
2.DOM2级事件处理程序
   DOM2级事件定义了两个方法，用于处理指定和删除事件处理程序的操作：addEventListener和removeEventListener。所有DOM节点中都包含这两个方法，并且他们都接受3个参数：要处理的事件名、作为事件处理程序的函数和一个布尔值。这个布尔值参数如果是true，表示在捕获阶段调用事件处理函数；如果是false，表示在冒泡阶段调用事件处理函数。
    var btn =document.getElementById_x('btn');
   btn.addEventListener('click', function(){
         alert('hello world!');
    },false);
   使用DOM2级方法添加事件处理程序的主要好处是可以添加多个事件处理程序。如：
    var btn =document.getElementById_x('btn');
   btn.addEventListener('click', function(){
         alert(this.id);
    },false);
    var btn =document.getElementById_x('id');
   btn.addEventListener('click', function(){
         alert('hello world!');
    },false);
   这两个事件处理程序会按照添加他们的顺序触发，因此首先会显示元素的ID，其次会显示"hello world!"。
   通过addEventListener()添加的事件处理程序只能使用removeEventListener()来移除，移除时传入的参数与添加时使用的参数相同。这也意味着通过addEventListener()添加的匿名函数将无法移除。因此，必须这样做：
    var btn =document.getElementById_x('btn');
    var handler= function(){
       alert('hello world!');
    }
   btn.addEventListener('click', handler, false);
   btn.removeEventListener('click', handler,false);          //成功删除
3.IE事件处理程序
   IE实现了与DOM中类似的两个方法：attachEvent()和detachEvent()。这两个方法接受相同的两个参数：事件处理程序名称和事件处理程序函数。
   使用attachEvent()为按钮添加一个事件处理程序，代码如下：
    var btn =getElementById('btn');
   btn.attachEvent('onclick', function(){
       alert(this ==window);                 //true
    });
   注意，attachEvent()的第一个参数是onclick，而非DOM的addEventListener()方法中的click。
   在IE中使用attachEvent()与使用DOM0级方法的主要区别在于事件处理程序的作用域。在使用DOM0级方法的情况下，事件处理程序会在所属元素的作用域内运行；在使用attachEvent()方法的情况下，事件处理程序会在全局作用域中运行，因此this等于window。在编写跨浏览器的代码时，这一区别很重要。
   与addEventListener()类似，attachEvent()方法也可以用来为一个元素添加多个事件处理程序。如：
    var btn =getElementById('btn');
   btn.attachEvent('onclick', function(){
       alert('nihao!');        
    });
   btn.attachEvent('onclick', function(){
       alert('helloworld!');      
    });
   不过，与DOM不同的是，这些事件处理程序不是已添加它们的顺序执行，而是以相反的顺序被触发。单击这个例子中的按钮，首先看到"helloworld!"，然后才是"ni hao"。
   使用attachEvent()添加的事件可以通过detachEvent()来移除，条件是必须提供相同的参数。如：
    var btn =getElementById('btn');
    var handler= function(){
       alert('hello world!');
    }
   btn.attachEvent('onclick', handler);
   btn.detachEvent('onclick',handler);           //成功删除
4.跨浏览器的事件处理程序
   为了以跨浏览器的方式处理事件，通常使用能够隔离浏览器差异的JavaScript库，但也可以自己编写代码实现：
    varEventUtil = function(){
       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] = null;
           }
       }
    }
    var btn =document.getElementById_x('btn');
    var handler= function(){
       alert('hello world!');
    }
   EventUtil.addHandler(btn, 'click', handler);
   EventUtil.removeHandler(btn, 'click', handler);
   addHandler()和removeHandler()没有考虑到所有的浏览器问题，例如在IE中的作用域问题。不过，使用它们添加和移除事件处理程序还是足够了。