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

我希望将我的JavaScript和HTML代码分开。要做到这一点，我想确保我从来没有使用的语法如下：在不使用HTML属性的情况下挂钩onClick事件

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

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

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

来源

2011-05-27 Mark Tomlin

使用JavaScript的工作，第一，你有一个ID添加到您要追加一个事件的元素。这是因为它可以让你很容易理解你的代码，并避免在编写代码时出现混淆。因此，HTML行将如下所示：

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

的最后一个好处是，你可以添加尽可能多的“点击”（或“鼠标悬停”，...）的事件，只要你喜欢，和一个一个地去除它们也是可能的。不过，这并不与IE <工作9.相反，你必须使用：

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

jQuery的方式：

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

来源

2011-05-27 20:20:47

你应该提到的是['addEventListener'（HTTPS：//developer.mozilla .org/en/DOM/element.addEventListener）不适用于IE <9;相反，你必须使用['attachEvent']（http://msdn.microsoft.com/en-us/library/ms536343%28VS.85%29.aspx）。 – mc10 2011-05-27 21:59:47

对。 Thanx;） – 2011-05-27 22:25:41

+1，并尊重答案中的细节，谢谢，我现在对此有了更好的理解。 – 2011-05-28 20:32:02

通过你输入元素分配一个ID，你会很容易（和有效）能够与原始的JavaScript

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

访问它，在你单独的JavaScript：

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

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

显然，你会做一些比onclick函数更有用的提示...

来源

2011-05-27 20:09:12

如果你给你的元素和编号，你可以这样做：

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

来源

2011-05-27 20:11:03 Dave

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

回答

相关问题