Javascript 钩住onClick事件而不使用HTML属性

我希望将JavaScript和HTML代码分开。为此，我要确保我从未使用过以下语法：

<input type="text" name="text" onClick="javascript:onClick(this)" />

但是我想钩住onClick事件，例如上面的输入，但不必在它的HTML中使用onClick属性。此外，我希望保持它的实现不可知，使用原始JavaScript，而不是像jQuery或MooTools这样的框架（尽管，如果您希望将这些作为插图与原始JavaScript一起提供，这也很好）

---

通过为输入元素分配一个ID，您将能够轻松（高效）地使用原始javascript访问它

<input type="text" name="text" id="myInput" />

---

显然，您将在onclick函数中执行比警报更有用的操作…

如果您提供元素和ID，您可以执行以下操作：

var el = document.getElementById("text");
el.addEventListener("click", function(/*put code here*/) {}, false);

---

要使用JavaScript，首先必须向要附加事件的元素添加id。这是因为它使您的代码易于理解，并且在编写代码时避免了混淆。因此，HTML行将如下所示：

<input type="text" name="text" id="myInputType1" />

---

最后一种方法的优点是，您可以根据需要附加任意多个“click”（或“mouseover”…）事件，也可以逐个删除它们。但是它不适用于IE你应该提到它不适用于IE+1，请尊重答案中的细节，谢谢，我现在对此有了更好的理解。

var el = document.getElementById("text");
el.addEventListener("click", function(/*put code here*/) {}, false);

<input type="text" name="text" id="myInputType1" />

/* First */
document.getElementById("myInputType1").onclick = function(){
    /*Your code goes here */
};

/* Second */
function Func(){
    /*Your code goes here */
}
document.getElementById("myInputType1").onclick = Func;

/* Third */
function Func(){
    /*Your code goes here */
}
document.getElementById("myInputType1").addEventListener("click", Func, false);

document.getElementById("myInputType1").attachEvent("onclick", Func);

$("#myInputType1").click(function(){
    /*Your code goes here */
});