在不使用jquery的情况下查找页面中的所有锚点并附加函数

Finding all anchors in a page and attaching functions without jquery

本文关键字：函数 jquery 情况下 查找      更新时间：2023-09-26

我在一个小应用程序中工作，主要使用jquery，一切都很好，但我想用简单的javascript重写jquery的每个部分，以完全理解我在做什么。

我读过这篇文章，一切都很合理，但我无法在浏览器中运行任何代码。

如何选择所有<a>标记并注册onclick事件？

这是我的代码：

<html>
<head>
	<script type="text/javascript">
		var a = document.getElementsByTagName('a');
		var f = function () {alert('ok');}
		for (var i = a.length - 1; i >= 0; i--) {
			a[i].onClick = f;
		}
	</script>
</head>
<body>
<a href="#">test1</a>
<a href="#">test2</a>
</body>
</html>

在jquery中，我只需使用它来查找所有锚点，并在单击时运行我的函数：

$('a').on('click',function (){
  alert('ok');
});

有什么想法吗？提前感谢Gustavo

我会这样做：

var anchors = document.querySelectorAll("a"),
    i;
for (i=0; i<anchors.length; i+=1) {
    anchors[i].addEventListener("click", function() {
        alert("triggered!");
    });
}
<a href="#">test1</a>
<a href="#">test2</a>

如果浏览器支持Array.prototype.forEach，这里有一个较短的版本（大多数现代浏览器都支持）

var anchors = document.querySelectorAll("a");
    anchors.forEach(function(a) { 
        a.addEventListener("click", function() {
             alert("triggered!");
        });
    });
<a href="#">test1</a>
<a href="#">test2</a>

相关文章：