首先看一下我們經常使用的添加事件的方式:
<!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屬性.
在上一章中已經說明了什麼是元素屬性, 什麼是Dom屬性.這兩種方式的效果相同. 當單擊div時會顯示提示框.
請注意, 雖然效果相同, 但是並不等效.
document.getElementById("testDiv2").onclick = showMsg;等效於:
<div id="testDiv1" onclick="alert("!!!");">单击事件 1</div>注意兩者的區別了嗎? 我們常用的修改元素屬性添加事件的方式, 實際上是建立了一個匿名函數:
document.getElementById("testDiv1").onclick = function(event)
{
alert("!!!");
};這個匿名函數的簽名和我們手寫的showMsg簽名相同, 所以可以把showMsg直接賦值給onclick.
#這種方式的弊端是:
1. 只能為一個事件綁定一個事件處理函數. 使用"="賦值會把前面為此時間綁定的所有事件處理函數沖掉.
2. 在事件函數(無論是匿名函數或綁定的函數)中取得事件物件的方式在不同瀏覽器中要特殊處理:
IE中,事件物件是window物件的屬性.事件處理函數必須這樣存取事件物件:
obj.onclick=function()
{ var oEvent = window.event;
}在DOM標準中,事件物件必須作為唯一參數傳給事件處理函數:
obj.onclick=function()
{ var oEvent = arguments[0];
}除了使用argument[0]存取此參數, 我們也可以指定參數名稱,上面的程式碼等同於:
obj.onclick=function(oEvent)
{
}目前相容DOM的瀏覽器有Firefox,Safari,Opera,IE7等.
3. 新增多播委託的函數在不同瀏覽器中是不一樣的.
下面是在"Javascript公共腳本庫系列(二): 添加事件多播委託的方法"文章中, 提供的兼容多瀏覽器添加多播委託的方法:
//统一的为对象添加多播事件委托的方法
/*
参数说明:
oTarget : 要添加事件的对象.比如"document".
sEventType : 事件类型.比如单击事件"click".
fnHandler : 发生事件时调用的方法. 比如一个静态函数"hideCalendar"
使用舉例:
//单击页面的任何元素,只要没有取消冒泡,都可以关闭日历控件
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);
}
}
所以我們首先應該摒棄<div onclick="..."></div>這種透過修改元素屬性新增事件的方式. 盡量使用新增多播事件委託的方式為一個事件綁定多個事件處理函數, 例如為document物件的點擊事件新增一個關閉彈出層的方法, 使用多重播送就不會影響document物件原有的事件處理函數.
下一節