JavaScript，點擊火功能

Question

我是新來的JavaScript和我試圖創建一個元素與內部的某些HTML。

這是我的代碼：

function newTask() 
    { 
     var newtask = document.CreateElement('li'); 
     newtask.setAttribute('id','newtask'); 
     newtask.innerHTML="DeveloperSnippets"; 
     document.getElementById('newtaskcontainer').appendChild(newtask); 
     document.getElementById('newtask').innerHTML='<input type="text" size="" value="Click here to add new task"> <a href=""><img src="IMG/delete.png" alt="delete" class="fr" /></a>'; 
    } 

我beleive這是正確的，但我不知道如何得到那個火的時候，一個按鈕一個用戶點擊。 我有這個代碼在外部的js文件，所以我不想有任何內聯的JavaScript。

UPDATE

嘿，感謝所有幫助球員，我是有這是爲什麼沒有你的代碼會工作的原因，我的JS文件鏈接的問題，但那時我意識到我有問題已經發現了我自己的代碼。但是你們仍然可以幫助我，如果你想:)

這是我現在得到：

function newTask() 
{ 
    var addTask= document.createElement("div"); 
    addTask.id = "newtask"; 
    addTask.innerHTML = "/* My HTML */" 
    document.getElementById("newtaskcontainer").appendChild(addTask); 
    $("#newtask").animate({opacity: "1.0", left: "+=1000"}, 500); 
} 

不幸的是，我不得不使用HTML onclick屬性，但現在會做。這個問題我也有，是因爲

$("#newtask").animate({opacity: "1.0", left: "+=1000"}, 500); 

它不是創造了div的代碼的最後一行，它只是不斷推DIV到一邊，而我需要做的，是創建一個從左側滑入的div（但它會），但是當我單擊按鈕以獲得新的div時，它實際上創建了一個新的div，而不是將前一個div向右推進。

我希望這是有道理的，非常感謝大家的幫助。

Answer 1

最簡單的方法是將函數分配爲onclick處理函數。

document.getElementById('my-button').onclick = newTask; 

Event listeners是更專業的路要走，特別是因爲他們增加的，而不是覆蓋事件處理程序（如onclick）不會，但由於無論是W3C模型，也不是微軟模式在所有瀏覽器上運行，它可能是最好的如果需要的話，使用像jQuery這樣的框架來實現更強大的行爲。

Answer 2

有一個jQuery插件，你應該用它...

只是開玩笑。在你的HTML代碼中添加一個「onclick」屬性作爲參數。

<button onclick="newTask();">Click Me!</button> 

或者，您可以將函數分配給onclick處理函數。

document.getElementById('your_button_id').onclick = newTask; 

但是，這是W3C的方式希望你這樣做：

document.getElementById('your_button_id').addEventListener('click', newTask, false); 

編輯：

有把所有的這一起的一個跨瀏覽器的方式（用Google搜索「跨瀏覽器JavaScript事件「 - 取自http://javascript.about.com/library/bldom21.htm）：

function addEvent(el, eType, fn, uC) { 
    if (el.addEventListener) { 
    el.addEventListener(eType, fn, uC); 
    return true; 
    } else if (el.attachEvent) { 
    return el.attachEvent('on' + eType, fn); 
    } else { 
    el['on' + eType] = fn; 
    } 
} 

function doWhatever() { alert('Hello World'); } 

addEvent(document.getElementByID('your_id'), 'click', doWhatever, false); 

Answer 3

您可以將JavaScript代碼寫入外部JavaScript文件，然後從您的HTML代碼中調用它。

<script type="text/javascript" src="external_js_file.js"></script> 

現在你可以從任何元素/標籤調用任何函數。

例子：

<INPUT TYPE=BUTTON OnClick="newTask();"> 

Answer 4

有三種方式悄悄地註冊點擊的事件，那就是，沒有任何內嵌腳本或者您的HTML onclick屬性。 Matchu描述的舊方式，IE方式和W3C標準方式。最後兩個是「現代」的方法，它相對容易支持兩者。

var button = document.getElementById('button_id'); 
if (button.attachEvent) { 
    //handle IE 
    button.attachEvent('onclick', handlerFunc); 
} else { 
    //handle other browsers 
    button.addEventListener('click', handlerFunc); 
} 

一些重要的注意事項。首先，注意事件名稱的差異。 W3C版本在開始時不帶「開」的事件名稱。

其次，this關鍵字在兩種情況下的處理方式不同。當使用addEventListener時，handlerFunc中的代碼可以使用this來引用觸發事件的DOM對象。

使用特定於IE的attachEvent時，this關鍵字指向窗口對象，這非常無用。爲了獲得事件的目標，你需要使用事件對象，這也是不同的處理方式。

這給我們帶來了第三個區別。在W3C標準方法中，事件對象被傳遞給處理函數。所以當你定義你的處理程序時，只需說function handlerFunc(e) {...}，你可以使用e來獲得有關事件性質的各種信息。

在IE特定的.attachEvent中，事件對象被放入window.event。您可以獲得在window.event.target中正在處理的事件的目標。

處理這兩種情況編寫的處理程序，如下所示：

function handlerFunc(e) { 
    var event = e || window.event, 
     target = event.target; 
    //you event code here... 
} 

event得到任何說法e或window.event。無論哪個存在。