Javascript之事件 一

事件流描述的是頁面接收事件的順序.ie的事件流是冒泡流,而 netscape communicator的事件流是事件捕獲流.

事件冒泡是指事件開始時由最具體的元素，然後向上傳播到較為不具體的節點.所有現代瀏覽器都支援事件冒泡,ie9,firefox,chrome,safari則將事件一直冒泡到window物件.

事件捕獲是不太具體的節點應該更早接收到事件,而具體的節點應該最後接收到事件.

dom事件流

dom2級事件流規定的事件流包括三個階段:事件捕獲階段 處於目標階段 事件冒泡階段

以on+事件名(例如onclick)作為事件目標的屬性,屬性值為事件處理程式,在html中定義的事件處理程式可以包含要執行的具體動作,也可以呼叫頁面其他地方定義的指令碼.

function showmessage()

var btn =  document.getelementbyid('btn');

btn.onclick = function();

dom2級事件定義了兩個方法addeventlistenerremoveeventlistener，這兩個方法都接收三個引數.第乙個引數代表事件型別;第二個引數代表事件處理程式;第三個引數是指在冒泡階段還是捕獲階段處理事件處理程式,如果為true代表捕獲階段處理,如果是false代表冒泡階段處理.

ie9，google，firefox相容dom2級事件處理程式.

var btn = document.getelementbyid('btn');

//事件處理程式
function handler()
//註冊事件處理程式
addeventlistener('click',handler,false);
//登出事件處理程式
removeeventlistener('click',handler,false);

ie8及以下瀏覽器不支援dom2級事件處理程式,但也自己定義了attachevent`detachevent`兩個方法,這兩個方法只接受兩個引數,因為ie8及以下版本不支援事件捕獲,所以沒有第三個引數.

var btn = document.getelementbyid("btn");

//事件處理程式
function handler()
//註冊事件處理程式
attachevent('click',handler,false);
//登出事件處理程式
detachevent('click',handler,false);

var eventutil =

else if(element.attachevent) 
else
},//登出事件處理程式
removeeventhandler:function(element,type,handler)
else if(element.detachevent)
else}};
var btn = document.getelementbyid('btn'),
handler=function(event);
eventutil.addeventhandler(btn,'click',handler);

在觸發dom的某個事件時,會產生乙個事件物件,這個物件包含著所有與事件相關的資訊。包括導致事件的元素,事件的型別,以及其他與特定事件相關的資訊.例如滑鼠操作導致的事件物件中,包含滑鼠位置的資訊,鍵盤定義的事件中包含按下鍵相關的資訊.所有瀏覽器支援event物件,但支援方式不同.

var btn = document.getelementbyid("btn");

btn.onclick = function(event)
btn.addeventhandler('click',function(event),false);

屬性currenttarget指向某個元素,事件處理程式發生在此元素上

target事件的目標

type事件型別

eventphase事件所處階段

事件preventdefault()取消事件的預設行為

stoppropagation()取消事件的進一步冒泡或捕獲

在事件處理程式內部,物件this始終等於currenttarget的值.而target則只包含事件的實際目標.

使用dom0級事件處理程式時,event物件作為window物件的乙個屬性存在;

使用attachevent()事件處理程式時,event物件作為引數傳入.

var eventutil = 

else if(element.attachevent) 
else
},//移除事件
removeeventhandler:function(element,type,handler)
else if(element.detachevent)
else
},//獲取事件物件
getevent: function (event) ,
//獲取事件目標
gettarget:function(event),
//阻止預設行為
preventdefault:function(event)
else
},//阻止事件冒泡
stoppropagation:function(event)
else
}};

javascript之事件監聽

addeventlistener是乙個監聽事件並處理相應的函式。不囉嗦，直接上 如 js部分 body部分 注意 addeventlistener 方法，有3個引數。第乙個引數是說明監聽的事件型別 如 click，注意不要字首on 第二個引數是事件執行的函式或方法，第三個引數則指定事件是否在捕獲或冒...

javascript之事件監聽

addeventlistener是乙個監聽事件並處理相應的函式。不囉嗦，直接上 如 js部分 body部分 注意 addeventlistener 方法，有3個引數。第乙個引數是說明監聽的事件型別 如 click，注意不要字首on 第二個引數是事件執行的函式或方法，第三個引數則指定事件是否在捕獲或冒...

javascript之事件監聽

addeventlistener是乙個監聽事件並處理相應的函式。不囉嗦，直接上 如 js部分 body部分 注意 addeventlistener 方法，有3個引數。第乙個引數是說明監聽的事件型別 如 click，注意不要字首on 第二個引數是事件執行的函式或方法，第三個引數則指定事件是否在捕獲或冒...