javascrpt事件

一、HTML事件處理程序：就是事件直接寫在HTML文檔中，其特色就是HTML和Js緊密的結合在一塊兒，缺點就是修改不方便，須要改動js和HTML兩處。好比：

<button onclick="event"></button>

<javascript>

funciton event(){

alert("hello world");

</javascript>

 

二、DOM0級處理程序：就是將事件做爲對象的屬性來看待，其更方便了修改，缺點就是若是添加在同一個對象上添加多個事件的話，後面的會覆蓋掉以前的。好比：

var a = document.getElementById("div");

a.onclick = function(){...}

 

三、DOM2級事件處理程序：其指定了兩個方法，addEventListener,removeEventListener;這兩個函數接受三個參數，分別是type,handler,true/false;其中type表示的是給對象添加的事件類型，handler表示的是函數，true表示的是事件捕獲，false表示的是時間冒泡。

 

var btn3 = document.getElementById("btn");

function event(){}

var eventUtil = {

//添加句柄

addHandler:function(element,type,handler){//element表示的是哪一個元素，type表示的是事件類型（click，mouseover），handler表示的是處理的函數

if(element.addEventListener)//DOM2級處理函數

element.addEventListener(type,handler,false);

else if(element.attachEvent)//IE事件處理程序

element.attachEvent("on"+type,handler);//這裏要變成onclick,因此要加on

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] = handler;

}

},

eventUtil.addHandler(btn3,"click",event);

eventUtil.removeHandler(btn3,"click",event);