如何不使用內聯js事件？

我習慣了使用內聯事件在我的網站，例如如何不使用內聯js事件？

<head> 
<script> 
function func() { 
alert("test"); 
} 
</script> 
</head> 
<body> 
<div id="mydiv" onclick="func()"></div> 
</body>

我注意到，網站這兩天不使用內嵌的事件都沒有。我知道你可以設置事件務實如：

document.getElementById('mydiv').onclick = function(){ func()}

這是應該怎麼做？我是否必須將上面的行放在每個頁面的末尾？

如何是按鍵，點擊和模糊連接到輸入字段本網站上的事件。例如：https://twitter.com/signup

感謝。

來源

2012-07-02 user969622

@SomethVictory有多諷刺...你問了5個問題，只接受了其中1個答案...... – ManseUK

這是因爲我從來沒有得到正確的答案！直到現在，我仍然可以得到。你有沒有看到有人正確回答我的問題，我不接受？ –

添加事件偵聽器的清潔方法是使用內置的方法：

var el = document.getElementById('mydiv'); 
if (el.addEventListener) { 
    el.addEventListener('click', modifyText, false); 
} else if (el.attachEvent) { 
    el.attachEvent('onclick', modifyText); 
} 

function modifyText() { 

}

這促進了清潔更具可讀性和可重用的代碼。（注意：attachEvent爲提前IE9）

您可以把這個代碼在<body>標籤的結束（或內<body>標記任何地方，但之後添加的DOM元素）或window onload函數中 - 這後執行DOM加載完成：

window.onload = function() { 
    // here 
};

來源

2012-07-02 08:16:46 ManseUK

我將不得不在每個頁面的末尾爲每個事件放置這段代碼？ – user969622

@ user969622更新我的答案 - 無論是在底部或在window.onload功能 – ManseUK

這確實是清潔的，因爲它允許對同一事件的多個綁定內，但沒有抽象出不同的瀏覽器的API綁定，我認爲，這種方式讓你感到噁心。使用像jQuery，mootools等抽象... – aaaidan

是的，這是一個事件添加到對象的一個有效途徑，但它可以防止一個以上的功能，從在一個時間的限制。

我會建議尋找jQuery（或類似的JavaScript庫，如mootools），這是絕大多數網站如何綁定他們的javascript事件這些天。

例如，在jQuery的你通常結合的點擊這樣的：

$("#mydiv").click(function(event) { 
    // click handling code 
});

來源

2012-07-02 08:18:14 aaaidan

這個答案，因爲它指出了'onclick'財產的問題。 –

的首選方法是使用addEventListener，通常結合一個庫（如YUI或jQuery），該平滑過瀏覽器之間的變化（例如舊IE不支持addEventListener）。

我是否必須將上面的行放在每頁的末尾？

通常情況下，您會將JavaScript放入其自己的文件中，然後將其放入每個需要它的頁面中。

來源

2012-07-02 08:18:25 Quentin

這裏的主要想法是應該加載您想註冊處理程序的DOM元素。所以無論你做的HTML元素後，事件綁定，或者你可以做到這一點在window.onload事件處理程序，它可以在實際的標籤定義之前被定義，像這樣：

window.onload = function(){ 
// your event binding 
}

但我的建議是，儘可能在文檔的末尾添加javascript。

來源

2012-07-02 08:19:02 Headshota

如何不使用內聯js事件？

回答

相關問題