javascript 在不使用 HTML 属性的情况下连接到 onClick 事件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6157162/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Hook into an onClick event without using the HTML property
提问by Mark Tomlin
I would like to keep my JavaScript and HTML code separate. To do this, I want to make sure that I never use the following syntax:
我想将我的 JavaScript 和 HTML 代码分开。为此，我想确保我从不使用以下语法：
<input type="text" name="text" onClick="javascript:onClick(this)" />
But I want to hook into the onClick event for example the above input but without having to use the onClick property within it's HTML. Furthermore, I would like to keep it implementation agnostic, using raw JavaScript and not the frameworks like jQuery or MooTools (Although, if you wish to provide those as illustrations along with the raw JavaScript that would be good too).
但我想挂钩 onClick 事件，例如上面的输入，但不必在它的 HTML 中使用 onClick 属性。此外，我想让它与实现无关，使用原始 JavaScript 而不是像 jQuery 或 MooTools 这样的框架（尽管，如果您希望将这些作为插图与原始 JavaScript 一起提供也很好）。
<input type="text" name="text" />
回答by Jesufer Vn
To work with JavaScript, first, you have to add an id to the element that you want to append an event. That is because it makes it easy to understand your code and avoids confusion when you are writing your code. So, the HTML line will look like:
要使用 JavaScript，首先，您必须向要附加事件的元素添加一个 id。那是因为它使您在编写代码时更容易理解代码并避免混淆。因此，HTML 行将如下所示：
<input type="text" name="text" id="myInputType1" />
There must be no more than one id per element that is unique in the whole document. Now, there are three main ways to add events:
在整个文档中，每个元素的唯一 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);
The advantage of the last one is that you can append as many "click" (or "mouseover", ...) events as you like, and removing them one by one is possible too. But it does not work with IE<9. Instead, you have to use:
最后一个的优点是您可以根据需要添加任意数量的“点击”（或“鼠标悬停”，...）事件，并且也可以将它们一一删除。但它不适用于 IE<9。相反，您必须使用：
document.getElementById("myInputType1").attachEvent("onclick", Func);
jQuery way:
jQuery方式：
$("#myInputType1").click(function(){
/*Your code goes here */
});
回答by Hugo Migneron
By assigning an ID to your input element, you will easily (and efficiently) be able to access it with raw javascript
通过为您的输入元素分配一个 ID，您将能够轻松（且有效地）使用原始 javascript 访问它
<input type="text" name="text" id="myInput" />
In your separate javascript :
在您单独的 javascript 中：
var input = document.getElementById("myInput");
input.onclick = function() {alert("clicked");}
Obviously you would do something more useful than an alert in the onclick function...
显然你会做一些比 onclick 函数中的警报更有用的事情......
回答by Dave
If you give your element and ID, you can do:
如果您提供元素和 ID，则可以执行以下操作：
var el = document.getElementById("text");
el.addEventListener("click", function(/*put code here*/) {}, false);
