在不使用HTML属性的情况下挂钩到onClick事件

Question

我想将我的JavaScript和HTML代码分开.为此,我想确保我从不使用以下语法:

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

但我想挂钩onClick事件,例如上面的输入,但不必在其HTML中使用onClick属性.此外,我想保持它的实现不可知,使用原始JavaScript而不是jQuery或MooTools这样的框架(虽然,如果你希望提供那些作为插图以及原始JavaScript也会很好).

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

Answer 1

要使用JavaScript,首先必须向要追加事件的元素添加id.这是因为它使您可以轻松理解代码并避免在编写代码时出现混淆.因此,HTML行将如下所示:

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

每个元素必须不超过一个id,这在整个文档中是唯一的.现在,添加事件有三种主要方式:

/* 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);

最后一个的优点是你可以随意添加任意数量的"click"(或"mouseover",...)事件,也可以逐个删除它们.但它不适用于IE <9.相反,你必须使用:

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

jQuery方式:

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

Answer 2

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

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

在您单独的 javascript 中：

var input = document.getElementById("myInput");

input.onclick = function() {alert("clicked");}

显然你会做一些比 onclick 函数中的警报更有用的事情......