快捷導(dǎo)航

js事件(Event)知識整理

更新時(shí)間：2012年10月11日 16:52:01 作者：

事件（Event）知識整理,本文由網(wǎng)上資料整理而來,需要的朋友可以參考下

鼠標(biāo)事件

鼠標(biāo)移動到目標(biāo)元素上的那一刻，首先觸發(fā)mouseover
之后如果光標(biāo)繼續(xù)在元素上移動，則不斷觸發(fā)mousemove
如果按下鼠標(biāo)上的設(shè)備(左鍵,右鍵,滾輪……)，則觸發(fā)mousedown
當(dāng)設(shè)備彈起的時(shí)候觸發(fā)mouseup
目標(biāo)元素的滾動條發(fā)生移動時(shí)(滾動滾輪/拖動滾動條。。)觸發(fā)scroll
滾動滾輪觸發(fā)mousewheel，這個(gè)要區(qū)別于scroll
鼠標(biāo)移出元素的那一刻，觸發(fā)mouseout

事件注冊

平常我們綁定事件的時(shí)候用dom.onxxxx=function(){}的形式
這種方式是給元素的onxxxx屬性賦值，只能綁定有一個(gè)處理句柄。
但很多時(shí)候我們需要綁定多個(gè)處理句柄到一個(gè)事件上，而且還可能要動態(tài)的增刪某個(gè)處理句柄
下面的事件注冊方式就能解決這個(gè)需求。

先介紹一下四個(gè)方法

復(fù)制代碼代碼如下:

 
//IE以外 
target.addEventListener(type,listener,useCapture) 
target.removeEventListener(type,listener,useCapture); 
target ：文檔節(jié)點(diǎn)、document、window 或 XMLHttpRequest。 
type ：字符串，事件名稱，不含“on”，比如“click”、“mouseover”、“keydown”等。 
listener ：實(shí)現(xiàn)了 EventListener 接口或者是 JavaScript 中的函數(shù)。 
useCapture ：是否使用捕捉，一般用 false。 
//IE 
target.attachEvent(type, listener); 
target.detachEvent(type, listener); 
target ：文檔節(jié)點(diǎn)、document、window 或 XMLHttpRequest。 
type ：字符串，事件名稱，含“on”，比如“onclick”、“onmouseover”、“onkeydown”等。 
listener ：實(shí)現(xiàn)了 EventListener 接口或者是 JavaScript 中的函數(shù)。 
兩者使用的原理：可對執(zhí)行的優(yōu)先級不一樣，實(shí)例講解如下： 
ele.attachEvent("onclick",method1); 
ele.attachEvent("onclick",method2); 
ele.attachEvent("onclick",method3); 
執(zhí)行順序?yàn)閙ethod3->method2->method1 
ele.addEventListener("click",method1,false); 
ele.addEventListener("click",method2,false); 
ele.addEventListener("click",method3,false); 
執(zhí)行順序?yàn)閙ethod1->method2->method3 
兼容后的方法 
var func = function(){}; 
//例：addEvent(window,"load",func) 
function addEvent(elem, type, fn) { 
if (elem.attachEvent) { 
elem.attachEvent('on' + type, fn); 
return; 
} 
if (elem.addEventListener) { 
elem.addEventListener(type, fn, false); 
} 
} 
//例：removeEvent(window,"load",func) 
function removeEvent(elem, type, fn) { 
if (elem.detachEvent) { 
elem.detachEvent('on' + type, fn); 
return; 
} 
if (elem.removeEventListener) { 
elem.removeEventListener(type, fn, false); 
} 
} 

獲取事件對象和事件源(觸發(fā)事件的元素)

復(fù)制代碼代碼如下:

 
function eventHandler(e){ 
//獲取事件對象 
e = e || window.event;//IE和Chrome下是window.event FF下是e 
//獲取事件源 
var target = e.target || e.srcElement;//IE和Chrome下是srcElement FF下是target 
} 

取消事件默認(rèn)行為(例如點(diǎn)擊一個(gè)<a>后不跳轉(zhuǎn)頁面而是執(zhí)行一個(gè)函數(shù))

復(fù)制代碼代碼如下:

 
function eventHandler(e) { 
e = e || window.event; 
// 防止默認(rèn)行為 
if (e.preventDefault) { 
e.preventDefault();//IE以外 
} else { 
e.returnValue = false;//IE 
//注意：這個(gè)地方是無法用return false代替的 
//return false只能取消元素 
} 
} 

阻止事件冒泡

復(fù)制代碼代碼如下:

 
function myParagraphEventHandler(e) { 
e = e || window.event; 
if (e.stopPropagation) { 
e.stopPropagation();//IE以外 
} else { 
e.cancelBubble = true;//IE 
} 
} 

事件委托

例如，你有一個(gè)很多行的大表格，在每個(gè)<tr>上綁定點(diǎn)擊事件是個(gè)非常危險(xiǎn)的想法，因?yàn)樾阅苁莻€(gè)大問題。流行的做法是使用事件委托。

事件委托描述的是將事件綁定在容器元素上，然后通過判斷點(diǎn)擊的target子元素的類型來觸發(fā)相應(yīng)的事件。
事件委托依賴于事件冒泡，如果事件冒泡到table之前被禁用的話，那以下代碼就無法工作了。

復(fù)制代碼代碼如下:

 
myTable.onclick = function () { 
e = e || window.event; 
var targetNode = e.target || e.srcElement; 
// 測試如果點(diǎn)擊的是TR就觸發(fā) 
if (targetNode.nodeName.toLowerCase() === 'tr') { 
alert('You clicked a table row!'); 
} 
} 

事件（Event）知識整理(二)

事件流

DOM同時(shí)支持兩種事件模型：捕獲型事件和冒泡型事件
并且每當(dāng)某一事件發(fā)生時(shí)，都會經(jīng)過捕獲階段->處理階段->冒泡階段(有些瀏覽器不支持捕獲)

捕獲階段是由上層元素到下層元素的順序依次。而冒泡階段則正相反。

如下圖

當(dāng)事件觸發(fā)時(shí)body會先得到有事件發(fā)生的信息，然后依次往下傳遞，直到到達(dá)最詳細(xì)的元素。這就是事件捕獲階段。
還記得事件注冊方法ele.addEventListener(type,handler,flag)吧，F(xiàn)lag是一個(gè)Boolean值，true表示事件捕捉階段執(zhí)行，false表示事件冒泡階段執(zhí)行。
接著就是事件冒泡階段。從下往上依次執(zhí)行事件處理函數(shù)(當(dāng)然前提是當(dāng)前元素為該事件注冊了事件句柄)。
在這個(gè)過程中，可以阻止事件的冒泡，即停止向上的傳遞。
阻止冒泡有時(shí)是很有必要的，例如

復(fù)制代碼代碼如下:

 
<div onclick=funcA()> 
<button onclick=funcB()>Click</button> 
</div> 

本意是如果點(diǎn)擊div中按鈕以外的位置時(shí)執(zhí)行funcA,點(diǎn)擊button時(shí)執(zhí)行funcB。但是實(shí)際點(diǎn)擊button時(shí)就會先后執(zhí)行funcB,funcA。
而如果在button的事件句柄中阻止冒泡的話，div就不會執(zhí)行事件句柄了。

您可能感興趣的文章: