如何使用Javascript将事件添加到html标记
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何使用Javascript将事件添加到html标记相关的知识，希望对你有一定的参考价值。
我有一个带有动态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 :(
答案
使用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>另一答案
看看我的解决方案。希望这可以帮助。
var d = document.querySelector("#testid a");
var dataLayer = []
d.onclick = function () {
dataLayer.push({'event': 'button1-click'})
console.log(dataLayer.length)
}<div id="testid"><div><div><a href="#">Button 1</a><div><div><div>以上是关于如何使用Javascript将事件添加到html标记的主要内容，如果未能解决你的问题，请参考以下文章
如何使用 Javascript 将文件添加到已经存在的 dataTransfer 对象中
如何将单击事件处理程序添加到从 javascript 创建的 userChat 类
如何将JavaScript侦听器添加到PrimeFaces Ajax事件