### DOM0級事件處理程序 * * * * * 在標簽內之間增加事件處理屬性 ~~~ <button id='btn1' onclick='hello()'>dom0級</button> ~~~ ~~~ function hello(){alert('這是一個dom0級事件')}; ~~~ <br/> 使用該方法有兩個弊端 1. 需要分別為標簽賦予onclick屬性 2. 如果更改了綁定的函數，那么每個標簽都需要修改，十分麻煩 <br/> DOM0級的另一種方法：直接在javascript代碼中給DOM對象賦予onclick方法 ~~~ document.getElementById('btn1').onclick=function(){ alert("這是一個dom0級事件");} ~~~ <br/> <br/> ### DOM2級事件處理程序 * * * * * DOM2級事件定義了兩種方法：addEventListener和removeEventListener，分別實現增加和刪除事件處理程序的操作。 這兩種方法都接受三個參數：事件類型，事件函數，true/false 其中第三個參數：true代表事件捕獲階段，false代表事件冒泡階段 <br/> ~~~ document.getElementById('btn2').addEventListener('click',function(){ alert("這是一個dom2級事件"); },false); ~~~ 注意，這里的第一個參數沒有加on <br/> 在這里有個坑，當我想要刪除事件的時候使用 ~~~ document.getElementById('btn2').removeEventListener('click',function(){ alert("這是一個dom2級事件"); },false); ~~~ 當我再次點擊按鈕的時候仍然會彈出對話框，原因是因為addEventListener和removeEventListener函數里的第二參數以匿名函數的形式存在，即便他們的功能一模一樣，但是他們并不是同一個函數。 <br/> 解決方法就是先將函數賦給一個變量 ~~~ var handle=function(){alert('這是一個dom2級事件');} document.getElementById('btn2').addEventListener('click',handle,false); document.getElementById('btn2').removeEventListener('click',handle,false); ~~~ 再次點擊按鈕發現沒有彈出對話框。 <br/> <br/> ### IE事件處理程序 * * * * * IE實現了類似的兩個方法：attachEvent()和detachEvent() 這兩種方法都接受兩個參數，其中第一個參數為事件的類型，第二個參數為事件函數，需要注意的是第一個參數需要加on IE事件并不需要接收第三個true/false參數，因為IE事件流只有事件冒泡沒有事件捕獲 ~~~ document.getElementById('btn3').attachEvent("onclick",function(){ alert("這是一個兼容IE的事件"); }); ~~~ 和DOM2級一樣，若要刪除事件，第二個參數必須是同一個函數。 <br/> 編寫一個跨瀏覽器的事件處理程序 ~~~ var eventUntil={ addEvent:function(element,type,handle) { if(element.addEventListener) { element.addEventListener(type,handle,false); } else if(element.attachEvent) { element.attachEvent('on'+type,handle); } else element['on'+type]=handle; }, removeEvent:function(element,type,handle) { if(element.removeEventListener) { element.removeEventListener(type,handle,false); } else if(element.detachEvent) { element.detachEvent('on'+type,handle); } else element['on'+type]=null; } } ~~~ 在這里創建了一個eventUntil對象，為它提供了兩個方法addEvent和removeEvent 在這里有兩個地方需要注意： (1)判斷瀏覽器是否擁有該方法不需要加( ) (2)代碼倒數第三行并沒有使用"element."的形式，因為需要使用加號去拼接on和type：'on'+type，這樣才能正確地向事件處理程序傳遞onclick這樣的事件。使用方括號表示法可以解決屬性名中包含會導致語法錯誤的字符或者屬性名使用的是關鍵字或保留字的問題：element['on'+type] <br/> ~~~ var handle=function(){alert('這是一個兼容瀏覽器的事件');} eventUntil.addEvent(document.getElementById('btn3'),'click',handle); eventUntil.removeEvent(document.getElementById('btn3'),'click',handle); ~~~ <br/> <br/> ### 事件對象 * * * * * 在觸發DOM上的某個事件時，會產生一個事件對象event，包含所有與事件有關的信息。 事件對象比較常用的屬性和方法： 1. type：事件類型 2. target：事件目標 3. preventDefault()：取消事件的默認行為，如跳轉鏈接 4. stopPropagation()：取消事件的進一步捕獲或冒泡 ~~~ <div id='father'> <a href="http://www.baidu.com" id='son'>跳轉</a> </div> ~~~ ~~~ eventUntil.addEvent(document.getElementById('father'),'click',function(){alert('我是父親')}); eventUntil.addEvent(document.getElementById('son'),'click',function(e){alert('我是兒子'); ~~~ 當點擊鏈接的時候會彈出‘我是兒子’對話框，緊接著又會彈出‘我是父親’對話框。這是因為當點擊鏈接觸發事件后又會向上傳播到父層觸發父層的事件，這就是事件冒泡。再關比父層彈出的對話框后緊接著頁面會跳轉到百度，這就是瀏覽器的默認行為。 <br/> <br/> ### IE事件對象 * * * * * 1. window.event：獲取事件 2. type：事件類型 3. srcElement：事件目標 4. returnValue：true(默認值，允許默認行為)/false(取消默認行為) 5. cancelBubble：true(取消事件冒泡)/false(默認值，允許事件冒泡) <br/> <br/> ### 跨瀏覽器的事件對象 * * * * * 給eventUntil對象新添加如下屬性和方法 ~~~ getEvent:function(event){return event||window.event}, getTarget:function(event){return event.target||event.srcElement;}, stopPro:function(event) { if(event.stopPropagation)//判斷是否存在方法不需要加() { event.stopPropagation(); } else event.cancelBubble=true; }, preventDe:function(event) { if(event.preventDefault) { event.preventDefault(); } else event.returnValue=false;//IE }, ~~~ 再來測試一下 ~~~ eventUntil.addEvent(document.getElementById('father'),'click',function(){alert('我是父親')}); eventUntil.addEvent(document.getElementById('son'),'click',function(e){alert('我是兒子'); e=eventUntil.getEvent(e); eventUntil.stopPro(e); eventUntil.preventDe(e); ~~~ eventUntil.stopPro(e)取消了事件冒泡，因此父層的對話框不會再彈出 eventUntil.preventDe(e)取消了瀏覽器的默認行為，因此點擊鏈接后不會跳轉。