使用外部JavaScript文件,你只是你結束</body>
標籤之前包括與script
標籤(或在head
,有折衷 —題外話題討論以下)。您可以使用DOM選擇器和/或ID以及attachEvent
(IE)或addEventListener
(標準)連接事件處理程序。
例如,假設您的結構是這樣的:
<table id='niftyStuff'>
<tbody>
<tr>
<td>Cool</td>
<td>Stuff</td>
</tr>
<tr>
<td>Cool</td>
<td>Stuff</td>
</tr>
</tbody>
</table>
直的JavaScript + DOM方法
然後,您可以掛鉤這樣一個單擊處理的細胞:
var table, cells, index;
table = document.getElementById('niftyStuff');
cells = table.getElementsByTagName('td');
for (index = 0; index < cells.length; ++index) {
hookEvent(cells.item(index), 'click', clickHandler);
}
function clickHandler() {
// Handle the click; `this` will refer to the cell
}
// Convenience function defined somewhere to smooth out IE/Standards
function hookEvent(element, name, handler) {
if (element.attachEvent) {
element.attachEvent("on" + name, handler);
}
else if (element.addEventListener) {
element.addEventListener(name, handler, false);
}
else {
throw "Unsupported browser";
}
}
(或者你可以定義hookEvent
的方式只能查找一次使用哪個版本,但對於上述示例來說,這樣做會過於複雜。)
偏離主題,但如果hookEvent
看起來很尷尬,那麼使用像jQuery,Prototype,YUI,Closure或any of several others這樣的庫可以真正幫助平滑瀏覽器差異。
例如,使用jQuery:
$('#niftyStuff td').click(clickHandler);
function clickHandler() {
// Handle the click; `this` will refer to the cell
}
(下面就像你使用jQuery編輯從您的評論的聲音,所以這裏是爲上述一live example。)
隨着原型:
$$('#niftyStuff td').invoke('observe', 'click', clickHandler);
function clickHandler() {
// Handle the click; `this` will refer to the cell
}
題外話:我上面說的把你的script
標籤在身體的盡頭。這只是一個選擇。如果這樣做,DOM 將可靠地準備好進行搜索等,您don't have to wait爲window.onload
發生很多,更晚或依賴「準備好」事件。但是,如果您的腳本文件不是來自瀏覽器緩存,那麼您的網頁可能會顯示一段延遲(並且您的用戶點擊),然後再進行連接。另一方面,頁面顯示速度更快(因爲腳本文件不在head
中);在不利的方面,你可能不希望他們在你準備好之前點擊而感到沮喪(儘管差距很小)。所以你把它放在那些東西之間是平衡的。如果您擔心人們跳躍點擊,請將腳本放在head
中,但在body
的末尾有一個小腳本標記,該標記調用文件中定義的函數來掛鉤事件。或使用一個ready
事件(大多數圖書館提供它們)。或者有複雜的策略可以使用小型內聯腳本來捕獲和推遲點擊。
我嘗試儘可能使用外部js文件。但是,由於這一行是動態生成的,我怎樣才能將它連接到外部文件? – Matt 2010-11-03 14:48:04
@Matt:我發現我幾乎可以通過給自己一些固定點然後從那裏導航來把事情搞定。例如,在我剛剛添加的示例中,固定點是表格,然後從那裏導航到單元格。 – 2010-11-03 14:51:37
啊謝謝你。這jquery看起來像我想要的,假設'this'實際上是指'this' – Matt 2010-11-03 15:07:02