Javascript 如何给元素添加点击事件？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7975708/
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
How to add click event to an element?
提问by user603007
I would like to add a click event in plain JavaScript (without using jQuery) to an element like this, so I don't have an idbut a class:
我想用纯 JavaScript（不使用 jQuery）向这样的元素添加一个点击事件，所以我id只有一个类：
<a href="http://example.com/share" class="MyClass">Yummy</a>
回答by jfriend00
If you don't have an id and don't have any selector library and you want it to work in older browsers, then it takes a bit more work. If you can put an id on it, it's quite simple. If not, it takes more code:
如果您没有 id 并且没有任何选择器库，并且您希望它在较旧的浏览器中工作，那么需要做更多的工作。如果你可以在上面放一个id，那就很简单了。如果没有，则需要更多代码：
var links = document.getElementsByClassName("MyClass");
links[0].onclick = function() {
// put your click handling code here
// return(false) if you don't want default click behavior for the link
}
Since getElementsByClassNameis not universally available in older browsers, you would need a shim to implement it when not present. Or, you could get all the links in your document with:
由于getElementsByClassName在较旧的浏览器中并非普遍可用，因此当不存在时，您需要一个 shim 来实现它。或者，您可以通过以下方式获取文档中的所有链接：
var links = document.getElementsByTagName("a");
and then cycle through that list until you find the one you want (perhaps checking the class name).
然后在该列表中循环，直到找到您想要的列表（也许检查类名）。
If you can put an ID on the link:
如果您可以在链接上放一个 ID：
<a href="http://braza.com/share" id="specialLink" class="MyClass" >Yummy</a>
Then, it just takes this code:
然后，它只需要这个代码：
document.getElementById("specialLink").onclick = function() {
// add code here
}
If you're going to do this regularly, the adding an event listener is a little more extensible than using the onclick property, but if you don't have any framework, then you need a function for adding an event listener that handles older versions of IE.
如果您打算定期执行此操作，添加事件侦听器比使用 onclick 属性更具可扩展性，但是如果您没有任何框架，那么您需要一个函数来添加处理旧版本的事件侦听器的 IE。
回答by sushil bharwani
There can be several ways of doing this.
有几种方法可以做到这一点。
One is you add the click event right in the anchor
一种是您在锚点中添加点击事件
as: <a href='' onclick='yourFunct()'> Yummy </a>
作为： <a href='' onclick='yourFunct()'> Yummy </a>
The other way can be using document.getElementsByTagName('a') you can get reference to all the href's as array then you can chose that particular href and add click event to it.
另一种方法是使用 document.getElementsByTagName('a') 您可以获得对所有 href 作为数组的引用，然后您可以选择该特定的 href 并向其添加单击事件。
like: document.getElementsByTagName('a')[0].click = function(){ }
喜欢： document.getElementsByTagName('a')[0].click = function(){ }
here 0 is just symbolic if u know the exact place in array you can give that index.
这里 0 只是象征性的，如果你知道数组中的确切位置，你可以给出该索引。
The third way can be you can write a custom. document.getElementsByClassName function in javascript and use it similiarly. You can find a number of implementations of getElementsByClassName by searching google.
第三种方式可以是你可以写一个自定义。javascript 中的 document.getElementsByClassName 函数并类似地使用它。您可以通过搜索 google 找到许多 getElementsByClassName 的实现。
look at http://robertnyman.com/2005/11/07/the-ultimate-getelementsbyclassname/one of the implementation.
查看http://robertnyman.com/2005/11/07/the-ultimate-getelementsbyclassname/实现之一。
回答by AjayR
You simple use like below
你简单的使用如下
<a href="http://braza.com/share" class="MyClass" onclick='return somefunction()'>Yummy</a>
<script>
function somefunction()
{
// do your stuff.
// return true, if you want to open the link, or false to cancel
return true;
}
</script>
回答by Jigar Tank
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Untitled</title>
<style type="text/css">
td { border: 1px solid #ccc; }
.findMe { color: gold; }
.youFoundMe { color: green; }
</style>
<script type="text/javascript"><!--
var aryClassElements = new Array();
function doSomething() {
aryClassElements.length = 0;
getElementsByClassName( 'findMe', document.body );
for ( var i = 0; i < aryClassElements.length; i++ ) {
aryClassElements[i].className = 'youFoundMe';
}
}
function getElementsByClassName( strClassName, obj ) {
if ( obj.className == strClassName ) {
aryClassElements[aryClassElements.length] = obj;
}
for ( var i = 0; i < obj.childNodes.length; i++ )
getElementsByClassName( strClassName, obj.childNodes[i] );
}
//--></script>
</head>
<body onload="doSomething();">
<h1>Heading 1</h1>
<div>
This code is inside my div.
<span>This code is inside a span inside the div. <a href="#" class="findMe">Link inside the span inside the div.</a></span>
<a href="#">Link inside the div.</a>
</div>
<p>
<h2 class="findMe">My Paragraph's Heading 2</h2>
<table>
<tr>
<td class="findMe">My first cell.</td>
<td>My second cell. <a href="#" class="findMe">Link inside the cell inside the row inside the table.</a></td>
</tr>
</table>
</p>
</body>
</html>`
