• 簡單理解
  事件是用戶或?yàn)g覽器自身執(zhí)行的某種動(dòng)作棉饶。諸如click需了、load
  而事件處理程序則是響應(yīng)某個(gè)事件的函數(shù)。諸如onclick、onload
  也就是當(dāng)用戶與頁面上某個(gè)元素進(jìn)行某種交互（click）時(shí)机蔗，會(huì)執(zhí)行事件處理程序內(nèi)（onclick）的函數(shù)。如果沒有為這個(gè)元素設(shè)立事件處理程序酸员，那么用戶與該元素進(jìn)行的交互不會(huì)有反應(yīng)蜒车。
• 事件處理程序
• event、this
  這個(gè)函數(shù)中有一個(gè)局部變量event幔嗦、也就是事件對(duì)象酿愧，不用自己去定義，也不用從函數(shù)的參數(shù)列表中讀取邀泉。
  this值等于事件的目標(biāo)元素嬉挡。
• HTML事件處理程序
  <form action="">
  <input onclick="alert(value)" type="button" name="btn" value="點(diǎn)我一下！" />
  <input ondblclick="alert(value)" type="button" name="btn" value="點(diǎn)我兩下汇恤！" />
  </form>

上：單擊庞钢，下：雙擊

• • 【優(yōu)點(diǎn)】擴(kuò)展作用域，我們可以直接在onclick的屬性值中使用其他屬性因谎。alert(value)
• 【缺點(diǎn)】1基括、存在一個(gè)時(shí)差問題，用戶可能會(huì)在html元素一出現(xiàn)就觸發(fā)相應(yīng)的事件财岔，但是該事件處理程序可能在js腳本內(nèi)风皿，還沒有被解析，就會(huì)發(fā)生錯(cuò)誤匠璧。2桐款、擴(kuò)展事件的處理程序的作用域鏈在不同瀏覽器中會(huì)導(dǎo)致不同的結(jié)果
  3、HTML代碼與JS腳本代碼緊密耦合夷恍。
• DOM0級(jí)事件處理程序
  js指定事件處理程序魔眨，將一個(gè)函數(shù)賦值給一個(gè)元素的事件處理程序的屬性。
  <input type="button" name="btn" id="d1" value="點(diǎn)我一下酿雪！" />
  //第一步:獲得目標(biāo)元素
  var btn=document.getElementById("d1");
  //第二步：為元素的事件處理程序?qū)傩再x值
  btn.onclick=function(){
  alert(this.value);
  }
  btn.onclick=null;//將對(duì)匿名函數(shù)的引用變?yōu)?遏暴，從而刪除。
  程序中的this引用當(dāng)前元素指黎，可以通過this訪問元素的任何屬性和方法朋凉。
  • 【優(yōu)點(diǎn)】
    1、簡單
    2袋励、具有跨瀏覽器的優(yōu)勢(shì)
  • 【缺點(diǎn)】
    1、如果代碼位于按鈕后面，就有可能一段時(shí)間內(nèi)怎么單擊都沒有反應(yīng)茬故。
    2盖灸、為一個(gè)元素添加多個(gè)相同事件處理程序前者會(huì)被后者覆蓋。
• DOM2級(jí)事件處理程序
  定義了兩個(gè)方法磺芭，用于處理指定和用于刪除事件處理程序的操作赁炎。
  addEventListener() removeEventListener()
  這兩個(gè)方法都接受三個(gè)參數(shù)：要處理的事件名，作為事件處理程序的函數(shù)钾腺，和一個(gè)布爾值徙垫。布爾值為true表示在捕獲階段調(diào)用時(shí)間處理程序，為false表示在冒泡階段調(diào)用放棒。
  //第一步:獲得目標(biāo)元素
  var btn=document.getElementById("d1");
  //第二步：指定事件處理程序
  btn.addEventListener('click',function(){
  alert(this.value);
  },false);
  btn.addEventListener('click',function(){
  alert(this.id);
  },false);
  上述代碼中姻报，為click事件制定了兩個(gè)事件處理程序，結(jié)果分別按聲明順序執(zhí)行间螟。
  【注意】移除時(shí)吴旋，如果只把方法名替換了，課達(dá)不到刪除的效果厢破，因?yàn)槲覀冊(cè)谥付ㄊ录幚沓绦驎r(shí)使用的是匿名函數(shù)荣瑟，每次聲明一個(gè)匿名函數(shù)即使代碼一樣，但是卻是不同的對(duì)象摩泪。所以我們需要聲明一個(gè)變量笆焰，讓他引用這個(gè)匿名函數(shù)。然后通過這個(gè)引用來刪除對(duì)原來匿名函數(shù)的刪除见坑。
  var handler=function(){
  alert(this.value);
  };
  btn.addEventListener('click',handler,false);
  //移除
  btn.removeEventListener('click',handler,false)

寫完這段筆記后嚷掠，我想可不可以在html指定事件處理程序時(shí)，使用函數(shù)的方式鳄梅。后來我試了一下叠国。
<input onclick="handler" type="button" value="點(diǎn)我一下！"/>
error：不能使用引用戴尸，需要一段執(zhí)行代碼粟焊。
<input onclick="handler()" type="button" value="點(diǎn)我一下！" />
error：彈出警告框孙蒙，為undefined项棠。
function handler(){
alert(this);
};
測試：[object window]說明該this并沒有指向目標(biāo)元素。
為什么呢挎峦？
<input onclick="alert(value)" type="button" id="d1" value="點(diǎn)我一下香追！" />
當(dāng)我們這樣寫的時(shí)候，"alert(value)"這行代碼被自動(dòng)加到這樣的函數(shù)內(nèi)：
with(document){
with(this){
//元素屬性值
}
}
知道了這個(gè)原理坦胶，我們可能會(huì)覺得那么在handler函數(shù)里面補(bǔ)上不就可以啦透典，事實(shí)上也是不行的晴楔，因?yàn)槲覀兲砑拥暮瘮?shù)的his值并不會(huì)指向元素

• IE事件處理程序
  在IE9以前包括IE9的瀏覽器都支持DOM2級(jí)事件處理程序，IE8是最后一個(gè)仍然使用其專有事件系統(tǒng)的主要瀏覽器峭咒。
  而IE8及更早版本只支持事件冒泡税弃，所以在指定事件處理程序時(shí)，就可以不指定采用怎么樣的事件流機(jī)制啦凑队。
  他也是通過兩個(gè)方法實(shí)現(xiàn)指定與移除事件處理程序的则果，移除時(shí)，也是需要先將處理程序函數(shù)賦值給一個(gè)變量漩氨。
  //第一步:獲得目標(biāo)元素
  var btn=document.getElementById('d1');
  //第二步：指定事件處理程序
  function handler(){
  alert('clicked');
  };
  btn.attachEvent("onclick",handler);
  btn.detachEvent('onclick',handler);
  但總是有區(qū)別的：
  區(qū)別1：事件處理程序的作用域不是在所屬元素西壮，而是全局對(duì)象。
  區(qū)別2：為一個(gè)元素指定多個(gè)事件處理程序時(shí)叫惊，事件處理程序的執(zhí)行函數(shù)與dom2級(jí)相反款青。即與聲明順序相反。

• 跨瀏覽器的事件處理程序
  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]=null;
            }
        }
    }
    var btn=document.getElementById('d1');
    function handler(){
        alert('clicked');
    };
    EventUtil.addHandler(btn,'click',handler);
    EventUtil.removeHandler(btn,"click",handler);
  

• 因?yàn)槌ゾW(wǎng)景赋访，大多數(shù)瀏覽器都是支持冒泡的事件流的可都，所以在設(shè)計(jì)跨瀏覽器代碼時(shí)，只需要關(guān)注冒泡階段蚓耽。

• 解決方法是渠牲，創(chuàng)建對(duì)象，并在對(duì)象內(nèi)調(diào)用方法步悠，這樣可以起到一定的封裝作用签杈。

• 針對(duì)：DOM0級(jí)，DOM2級(jí)鼎兽，IE方法答姥。三種情況。

• 順序：普遍優(yōu)先谚咬。

• 不足：代碼中沒有針對(duì)this作用域的區(qū)別加以