我正在开发一个页面，该页面将创建许多<div>并将它们附加到容器<div>。我需要知道哪一个被点击了。起初，我想在每一个上加eventListener都没关系。不过，我刚刚在这里阅读了一篇关于使用 Smart Event Handlers 的文章：Best Practices for Speeding Up Your Web Site。它讨论了仅使用1 eventListener并确定事件源自哪一个元素。
修改
我删除了前面的示例，这是一个更接近我的目标功能的小示例，并说明了为什么最好让一个侦听器调度所点击的内容。主要的是<div>知道数据中需要获取数组中的哪个索引。但是，数据会显示在<div>内，<div>位于知道数组索引的<div>内，并且由于某种原因，事件不会与他挂钩。
当您运行它时，您会看到只有点击绿色“中间”<div>但不红色“信息”<div>时，日志才会列出联系人。如何在不添加数百名听众的情况下获取红色信息<!DOCTYPE html>
<html>
<head>
<title>Bubbling</title>
<meta charset="UTF-8">
<style>
div{
margin: 10px;
padding: 10px;
width: 200px;
}
#big{
background: #ccffcc;
}
.contactDiv{
background: #99ff99;
}
.nameDiv, .phoneDiv{
background: #ff9999;
}
#log{
background: #ccccff;
}
</style>
</head>
<body>
<div id="log">I log stuff</div>
<button id="adder">Add Some Div</button>
<!--Highest div that encloses multiple other div-->
<div id="big"></div>
<script>
var log = document.getElementById("log"),
adderButton = document.getElementById("adder"),
bigDiv = document.getElementById("big"),
numDivsToMake = 100,
i, contactDiv, nameDiv, phoneDiv,
contacts = [];
for (i = 0; i < numDivsToMake; i++) {
contacts.push({
name: "Bob-" + i,
phone: "555-1234"
});
}
// Make more divs whenever we click the super button
adderButton.addEventListener("click", function() {
// Don't make more
adderButton.setAttribute("disabled");
// Make the divs with data
for (i = 0; i < numDivsToMake; i++) {
// Make name and number divs
contactDiv = document.createElement("div");
nameDiv = document.createElement("div");
phoneDiv = document.createElement("div");
// Add classes
contactDiv.className = "contactDiv";
nameDiv.className = "nameDiv";
phoneDiv.className = "phoneDiv";
// Set their values
nameDiv.innerHTML = contacts[i].name;
phoneDiv.innerHTML = contacts[i].phone;
// Set the container to know how to get back to the data in the array
contactDiv.setAttribute("data-contactId", i);
// Add them to the dom
bigDiv.appendChild(contactDiv);
contactDiv.appendChild(nameDiv);
contactDiv.appendChild(phoneDiv);
}
});
// Make smart handler
bigDiv.addEventListener("click", function(e) {
// Get whether the element has the attribute we want
var att = e.target.getAttribute("data-contactId");
// Say if it does or not
if (att) {
log.innerHTML = "You clicked: " +
contacts[att].name + " " +
contacts[att].phone;
}
else {
console.log("No attribute");
}
});
</script>
</body>
</html>
以触发收听者？
{{1}}
答案 0 :(得分：0)
我想我明白你在做什么。您在小提琴中设置的事件代表团似乎运作良好。通过查询DOM，可以在单击处理程序中轻松选择要选择的数据属性。如果您知道总是需要数据，而不是查看点击源，只需执行另一个document.getElementById来检索您的数据。我认为你试图以一种不适合你的设计的方式将两个步骤合二为一。