<input type="button" id="btn" value="Click!" />
<script type="text/javascript">
$addHandler($get("btn"), "click", btnClick);function btnClick(evt)
{ alert(evt.target.value);
}
</script>
$("#btn").click(function() { alert(this.value);
});
這種寫法可以省去想函數名稱的困擾(老是花時間去想btnClick之類沒營養的名字，常覺得在浪費生命)，更大的好處是事件函數本體就接在設定事件程式碼的下方，閱讀時不必上下Scroll尋覓(Visual Studio 2008雖有Javascript Intellisense, 畢竟無法像C#/VB.NET一樣用Goto Definition直接跳到函數所在)，甚為方便。但我一直有個疑問: 如果$("#tbl td").click(function() {....});一口氣為數百個td加上Click事件，會不會同樣的函數程式碼就複製了上百份? 白白耗用了不必要的記憶體。
<html><head>
<title>Memory Usage Test</title>
<style type="text/css">
.clsDiv
{ cursor: pointer; width: 300px; background-color: blue; color: white; }</style>
<script type="text/javascript" src="lib/jquery.js"></script>
</head><body>
<script type="text/javascript">
$(function() { var count = 30000;
$("#dv1").click(function() { for (var i=0; i < count; i++)
{ $("#dv3").click(function() { var s =
"01234567890123456789...用大量文字填充...01234567890123456789" +
//重覆多次
"01234567890123456789...用大量文字填充...01234567890123456789" +
});
}
$("#dv3").html("dv1 Clicked!"); });
$("#dv2").click(function() { for (var i=0; i < count; i++)
$("#dv3").click(fatFunc); $("#dv3").html("dv2 Clicked!"); });
});
function fatFunc() { var s =
"01234567890123456789...用大量文字填充...01234567890123456789" +
//重覆多次
"01234567890123456789...用大量文字填充...01234567890123456789" +
}
</script>
<br /><div id="dv1" class="clsDiv">Anonymous Function</div>
<br /><div id="dv2" class="clsDiv">Named Function</div>
<br /><div id="dv3" class="clsDiv">Sheep</div>
</body>