的JavaScript與活動 - 最佳實踐

Question

我曾經讀到以下編碼技術被認爲是不好：

<a HREF="page.htm" onClick="alert('Hello World')">text link</a> 

基本上，HTML標記中有這些事件處理程序（如的onClick）是使用錯誤的做法。這是什麼原因？這種叫做「壞」的技術是什麼？什麼是「正確」的方式來做到這一點？

Answer 1

這是一個內聯事件處理程序屬性。 （+1選擇答案）。它通常被認爲是「壞」的幾個原因：

• 你混合小塊JavaScript語法內聯與HTML語法：

  • 當你有很多的這些，尤其是當你有很多元素都包含基本相同的代碼位，讀取和維護代碼更加困難;

  • 你嵌套逃脫恐怖，當你需要在你的代碼中使用特殊到HTML字符：

例如：

<a href="x.html" onclick="this.innerHTML= '&lt;em>I like &quot;fish &amp;amp; chips&quot;&lt;/em>';"> 

• 性質的目標元素和所有祖先節點成爲變量，可能隱藏你自己的v同名的可變詞。請參閱this question瞭解這種令人驚訝且幾乎總是不需要的行爲的背景;

  • 這引入了幽靈般的不兼容性，因爲瀏覽器具有不同的DOM屬性;

  • 和未來的瀏覽器引入新的特性將有可能破壞你的代碼。

Answer 2

對官方術語不確定，但這不是好的做法，因爲HTML應該是純粹的標記，而不需要將客戶端腳本直接混入其中。

最好的做法是附接事件以這樣的方式：

window.onload = function() { 
    document.getElementById("MyLink").onclick = function() { 
     alert('Hello World'); 
     return false; 
    } 
} 

賦予路段ID MyLink例如後。

Answer 3

最好的方法被稱爲unobtrusive JavaScript，它基本上意味着行爲（JS）與結構（HTML）的分離，類似於CSS如何將結構與結構分開，也是出於同樣的原因。

Answer 4

幾個原因。它實質上是element.onclick的DOM Level 1接口的別名，它只允許一個事件偵聽器。

另一個原因是它在哲學上是錯誤的。它導致組織不良的代碼：你將一種聲明性語言與一種功能性語言混合在一起，這種語言在其執行過程中包含了大量的邏輯。

的正確方法應該是：

element.addEventListener('click', function() { 
    console.log('hello world'); 
}, false); // required for old gecko 

或者在IE中：

element.attachEvent('onclick', function() { 
    console.log('hello world'); 
}); 

或在非常至少，使用DOM 1級型號：

element.onclick = function() { 
    console.log('hello world'); 
}; 

（另外請注意，alert是不好的做法，它會阻止en的執行輪胎頁。）

另一個原因是，您無法訪問任何通常會作爲偵聽器回調的第一個參數獲取的事件對象。 （當你設置[event]屬性時，你基本上在回調中，所以我不確定你是否可以做參數[0]或者不同的渲染引擎如何實現它。這非常尷尬，這就是爲什麼最好綁定事件在JS的土地上。）

我能想到的最終原因是跨瀏覽器的兼容性。如果您在HTML中綁定事件，則無法爲自己規範事件接口。