如何使用 Javascript 将事件添加到 html 标记答案

【问题标题】：How to add event with Javascript to an html tag如何使用 Javascript 将事件添加到 html 标记
【发布时间】：2019-03-11 17:59:20
【问题描述】：

我有一个带有动态 html 标记的登录页面。问题是，我无法直接选择标签。它是一个链接。以下代码是构造：

<div id="testid"><div><div><a href="#">Button 1</a><div><div><div>

每次有人点击链接（a-tag）时，我都想触发如下代码的事件：

<a href="#" name="button1" onclick="dataLayer.push({'event': 'button1-click'});">Button 1</a>

问题：将onclick="dataLayer.push({'event': 'button1-click'}) 属性添加到a 标记的Javascript 代码是什么。

我尝试了以下代码：

var d = document.getElementById("testid").firstchild;
d.setAttribute("onclick", "dataLayer.push({'event': 'button1-click'})");

但似乎代码不正确。 a 标签也不是第一个孩子；之间有 2 个 div :(

【问题讨论】：

developer.mozilla.org/en-US/docs/Web/API/EventTarget/…
您在 id="testid" 周围缺少引号
使用document.querySeletor('#test a')
好吧；我纠正它。但行情不是问题
在那个 HTML 中，<a> 不是#testid 的直接子代。您可以发布您实际拥有的 HTML，并带有适当的缩进吗？

标签： javascript html events onclick dom-events

【解决方案1】：

查看我的解决方案。希望这会有所帮助。

var d = document.querySelector("#testid a");
var dataLayer = []

d.onclick = function () {
  dataLayer.push({'event': 'button1-click'})
  console.log(dataLayer.length)
}

&lt;div id="testid"&gt;&lt;div&gt;&lt;div&gt;&lt;a href="#"&gt;Button 1&lt;/a&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;

【讨论】：

【解决方案2】：

使用querySelector 和addEventListener：

document.addEventListener('DOMContentLoaded', function () {
    var dataLayer = [];
    var d = document.querySelector("#testid a[name=button1]");
    d.addEventListener("click", function () {
        dataLayer.push({ 'event': 'button1-click' });
    });
});

<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>repl.it</title>
	<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
	<div id="testid">
		<div>
			<div>
				<a href="#" name="button1">Button 1</a>
				<div>
					<div>
						<div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<script src="script.js">

	</script>
</body>

</html>

您的 JS 中缺少一些东西。

使用更具体的选择器（#testid a[name=button1] 与 #testid 的 firstchild，这是不准确的）。
将所有代码封装在DOMContentLoaded 监听器中。依赖页面元素的 JS 需要先等待页面构建完成，DOMContentLoaded 就是这样。

【讨论】：

2.如果脚本位于主 HTML 之下，则不需要。
@ChrisG，仍然是最佳实践。
这是主观的，但不管这一点，它并不是“[OPs] JS 缺失”。
@ChrisG，我们实际上并不知道。 OP的sn-p不指示JS何时加载。
如果我们不知道它是否丢失，它不是“丢失”。也许 OP 确实有一个包装器，但只发布了相关代码，正如他们应该做的那样？