jQuery事件與事件對(duì)象
首先看一下我們經(jīng)常使用的添加事件的方式:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>
<title>javascript中的事件</title>
<script type="text/javascript" src="scripts/jquery-1.3.2-vsdoc2.js"></script>
<script type="text/javascript">
$(function()
{
document.getElementById("testDiv2").onclick = showMsg;
}) function showMsg(event)
{
alert("!!!");
}
</script></head><body>
<div id="testDiv1" onclick="showMsg();">單擊事件 1</div>
<div id="testDiv2">單擊事件 2</div>
</body>
</html>我們最常使用為元素添加onclick元素屬性的方式添加事件.
為testDiv2的添加onclick事件的方式是修改Dom屬性.
在上一章中已經(jīng)說明了什麼是元素屬性, 什麼是Dom屬性.這兩種方式的效果相同. 當(dāng)單擊div時(shí)會(huì)顯示提示框.
請(qǐng)注意, 雖然效果相同, 但是並不等效.
document.getElementById("testDiv2").onclick = showMsg;等效於:
<div id="testDiv1" onclick="alert("!!!");">單擊事件 1</div>注意兩者的區(qū)別了嗎?? 我們常用的修改元素屬性添加事件的方式, 實(shí)際上是建立了一個(gè)匿名函數(shù):
document.getElementById("testDiv1").onclick = function(event)
{
alert("!!!");
};這個(gè)匿名函數(shù)的簽名和我們手寫的showMsg簽名相同, 所以可以把showMsg直接賦值給onclick.
#這種方式的弊端是:
1. 只能為一個(gè)事件綁定一個(gè)事件處理函數(shù).? 使用"="賦值會(huì)把前面為此時(shí)間綁定的所有事件處理函數(shù)沖掉.
2. 在事件函數(shù)(無論是匿名函數(shù)或綁定的函數(shù))中取得事件物件的方式在不同瀏覽器中要特殊處理:
IE中,事件物件是window物件的屬性.事件處理函數(shù)必須這樣存取事件物件:
obj.onclick=function()
{ var oEvent = window.event;
}在DOM標(biāo)準(zhǔn)中,事件物件必須作為唯一參數(shù)傳給事件處理函數(shù):
obj.onclick=function()
{ var oEvent = arguments[0];
}除了使用argument[0]存取此參數(shù), 我們也可以指定參數(shù)名稱,上面的程式碼等同於:
obj.onclick=function(oEvent)
{
}目前相容DOM的瀏覽器有Firefox,Safari,Opera,IE7等.
3. 新增多播委託的函數(shù)在不同瀏覽器中是不一樣的.
下面是在"Javascript公共腳本庫(kù)系列(二): 添加事件多播委託的方法"文章中,? 提供的兼容多瀏覽器添加多播委託的方法:
//統(tǒng)一的為對(duì)象添加多播事件委托的方法 /* 參數(shù)說明: oTarget : 要添加事件的對(duì)象.比如"document". sEventType : 事件類型.比如單擊事件"click". fnHandler : 發(fā)生事件時(shí)調(diào)用的方法. 比如一個(gè)靜態(tài)函數(shù)"hideCalendar"
? ? 使用舉例:
//單擊頁(yè)面的任何元素,只要沒有取消冒泡,都可以關(guān)閉日歷控件
var cf = document.getElementById("CalFrame");
if( cf != null && hideCalendar != null )
{
ScriptHelper.addEventListener( document, "click", hideCalendar );
}
*/
scriptHelper.prototype.addEventListener = function(oTarget, sEventType, fnHandler)
{
if( oTarget.addEventListener )//for dom
{
oTarget.addEventListener( sEventType, fnHandler, false )
}
else if( oTarget.attachEvent )//for ie
{
oTarget.attachEvent( "on" + sEventType, fnHandler);
}
}
所以我們首先應(yīng)該摒棄<div onclick="..."></div>這種透過修改元素屬性新增事件的方式. 盡量使用新增多播事件委託的方式為一個(gè)事件綁定多個(gè)事件處理函數(shù), 例如為document物件的點(diǎn)擊事件新增一個(gè)關(guān)閉彈出層的方法, 使用多重播送就不會(huì)影響document物件原有的事件處理函數(shù).
