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＆lt; 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功能中的警报更有用的东西......

Answer 3

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

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

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

3 个答案: