Я разрабатываю страницу, которая создаст много <div> s и добавит их в контейнер <div>. Мне нужно знать, на кого нажимают. Сначала я решил положить eventListener на каждый из них будет хорошо. Тем не менее, я просто прочитал статью об использовании Smart Event Handlers здесь: Best Practices for Speeding Up Your Web Site. И он говорит об использовании только 1 eventListener и выяснении, из какого из элементов происходит событие.Этот прослушиватель событий достигает вершины самого элемента?
EDIT
я удалил предыдущий пример, вот небольшой пример, который гораздо ближе к моей целевой функциональности и показывает, почему было бы желательно иметь один слушатель, который отправляет что щелкнули. Главное, что <div> - это то, что знает, какой индекс в массиве нужно захватить для данных. Однако данные представлены в <div> s, которые находятся внутри <div>, который знает индекс массива, и событие по какой-то причине не связано с ним.
Когда вы запустите ее, вы видите, что журнал только списки контактов всякий раз, когда зеленый «средний» <div> получает кликали, но не красный «информация» <div> s. Как я могу получить красную информацию <div> s, чтобы вызвать слушателя, не добавляя слушателей zillion?
JSFiddle
<!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>
в стандартном js, вы должны сделать большую проверку для родителя-ребенка. В jquery вы можете установить целевого получателя события из родителя: $ ("# mydiv"). On ("click", ".subdivclass", function() {... Честно говоря, поскольку jQuery, Я даже foget стандартный подход js ... – cox