jQueryイベントとイベントオブジェクト
まず、イベントを追加するためによく使用する方法を見てみましょう:
<!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 屬性を変更することです。
第 1 章では、これら 2 つのメソッドの効果は同じですが、div をクリックするとプロンプト ボックスが表示されることに注意してください。
document.getElementById("testDiv2").onclick = showMsg;は以下と同等です:
<div id="testDiv1" onclick="alert("!!!");">單擊事件 1</div>この 2 つの違いに気づきましたか? 通常、要素の屬性を変更してイベントを追加する方法は、実際には匿名関數(shù)を作成します:
document.getElementById("testDiv1").onclick = function(event)
{
alert("!!!");
};この匿名関數(shù)のシグネチャは次のとおりです。手書きの showMsg と同じです。署名が同じなので、showMsg を onclick に直接割り當(dāng)てることができます。このメソッドの欠點(diǎn)は次のとおりです。
1. "= 割り當(dāng)てを使用すると、1 つのイベント ハンドラーのみをバインドできます。前回から今回まで すべてのイベント処理関數(shù)はフラッシュされます。
2. イベント関數(shù)でイベント オブジェクトを取得する方法 (匿名関數(shù)かバインド関數(shù)かを問わず) は、異なるブラウザーで特別な処理を必要とします。つまり、イベント オブジェクトはウィンドウ オブジェクトの屬性です。イベント ハンドラーは次のようにイベント オブジェクトにアクセスする必要があります:
obj.onclick=function()
{ var oEvent = window.event;
}DOM 標(biāo)準(zhǔn)では、イベント オブジェクトは唯一のパラメーターとしてイベント ハンドラーに渡される必要があります:
obj.onclick=function()
{ var oEvent = arguments[0];
}このパラメータにアクセスするために argument[0] を使用することに加えて、パラメータ名を指定することもできます。上記のコードは次と同等です:
obj.onclick=function(oEvent)
{
}現(xiàn)在 DOM 互換のブラウザには、Firefox、Safari、Opera、IE7 などが含まれます
3 . マルチキャストデリゲートの追加機(jī)能はブラウザごとに異なります
以下は「JavaScriptパブリックスクリプトライブラリシリーズ(2)：イベントマルチキャストデリゲートの追加方法」で複數(shù)のブラウザに対応したマルチキャストデリゲートの追加方法を説明しています。 ":
//統(tǒng)一的為對象添加多播事件委托的方法 /* 參數(shù)說明: oTarget : 要添加事件的對象.比如"document". sEventType : 事件類型.比如單擊事件"click". fnHandler : 發(fā)生事件時調(diào)用的方法. 比如一個靜態(tài)函數(shù)"hideCalendar"
使用例:
//單擊頁面的任何元素,只要沒有取消冒泡,都可以關(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);
}
} So we まず、<div onclick="..."></div> のような要素の屬性を変更してイベントを追加する方法を放棄する必要があります。試してみてください。マルチキャスト イベント デリゲートを追加して 1 つのイベントに複數(shù)のイベント ハンドラーをバインドするメソッドを使用します。たとえば、ドキュメント オブジェクトのクリック イベントのポップアップ レイヤーを閉じるメソッドを追加しても、元のイベント処理には影響しません。ドキュメントオブジェクトの関數(shù)
