如何将唯一变量传递给 eventsListiner 函数？

Question

我很难将事件添加到对象和数组所以：-

我使用 createElement 创建了 div，使用 FOR 循环添加了相同的类，然后将 appendChild 添加到其他一些 html TAG -

我想将事件添加到 div 并且我想传递唯一变量（ i 来自 FOR 循环）

- 它返回 i 最大值；或错误或根本不做

任何类型的答案：我知道这是一个简单的问题，但我无法在任何地方找到答案

window.onload = function (){

var sectionHTML = document.getElementById('section');

for(i=0;i<5;i++)

{

 var div_box = document.createElement('div');

 div_box.className = "box";

 div_box.innerText=i;

 sectionHTML.appendChild(div_box);

}

//adding Events

var getDIV = document.getElementsByClassName('box');

for(i=0;i<5;i++)

{

 getDiv[i].addEventListiner("click", function (i) { myFunction(i); })

}

}

myFunction (i) {

 var myString = "PLS HELP THX BRO or SIS " + i;

 alert(myString);

}

Answer 1

您不仅可以在添加处理程序时传递参数，还可以在父级中获取子级的索引 - 我在这里展示了如何做到这两点。注意我添加了一些预先存在的子元素，所以你也可以看到它是如何工作的。// immediatly invoked function(function() {&nbsp; var sectionEl = document.getElementById('section-used');&nbsp; // add box elements&nbsp; let howMany = 5;&nbsp; for (let i = 0; i < howMany; i++) {&nbsp; &nbsp; let childBox = document.createElement('div');&nbsp; &nbsp; childBox.className = "box";&nbsp; &nbsp; childBox.innerText = i;&nbsp; &nbsp; sectionEl.appendChild(childBox);&nbsp; }&nbsp; // doBBoxClick is called on click of child&nbsp;&nbsp; var doBBoxClick = function(event, additionalParameters) {&nbsp; &nbsp; let myString = "Updated I am box " + additionalParameters.index;&nbsp; &nbsp; alert(myString); //use value passed (not the child index)&nbsp; &nbsp; // do stuff with event and this being the triggering event and caller&nbsp; &nbsp; this.classList.add(additionalParameters.newClass);&nbsp; &nbsp; console.log("parent:", this.parentNode.classList.value);&nbsp; &nbsp; this.parentNode.classList.toggle("togle-color");&nbsp; &nbsp; console.log("parent:", this.parentNode.classList.value);&nbsp; &nbsp; let index = Array.prototype.indexOf.call(this.parentNode.children, this);&nbsp; &nbsp; console.log("index:", index); //which one&nbsp; }&nbsp; // get all boxes and add click event&nbsp; var childBoxes = sectionEl.getElementsByClassName('box');&nbsp; let howManyBoxes = childBoxes.length;&nbsp; console.log("howMany:", howManyBoxes);&nbsp; for (let c = 0; c < howManyBoxes; c++) {&nbsp; &nbsp; childBoxes[c].addEventListener('click', function(event) {&nbsp; &nbsp; &nbsp; var additionalParameters = {&nbsp; &nbsp; &nbsp; &nbsp; index: c,&nbsp; &nbsp; &nbsp; &nbsp; newClass: "other-class"&nbsp; &nbsp; &nbsp; };&nbsp; &nbsp; &nbsp; doBBoxClick.call(this, event, additionalParameters);&nbsp; &nbsp; }, false);&nbsp; }}());&nbsp; .box {&nbsp; border: solid 1px lime;&nbsp; margin: 0.5em;}#section-used {&nbsp; border: solid 2px blue;}.other-class {&nbsp; background-color: #dddddd;}.thing-added {&nbsp; border: solid red 1px;}.togle-color {&nbsp; color: #44dddd;&nbsp; )<div id="section-used" class="outer-thing">&nbsp; <div class="box">I am box already here</div>&nbsp; <div class="box">I am box already 1</div>&nbsp; Me</div>

Answer 2

window.onload = function (){&nbsp; var sectionHTML = document.getElementById('section');&nbsp; for(i=0;i<5;i++) {&nbsp; &nbsp; var div_box = document.createElement('div');&nbsp; &nbsp; div_box.className = "box";&nbsp; &nbsp; div_box.dataset.box_id = i;&nbsp; &nbsp; div_box.innerText=i;&nbsp; &nbsp; sectionHTML.appendChild(div_box);&nbsp; }&nbsp; var getDIV = document.getElementsByClassName('box');&nbsp; for(i=0;i<5;i++) {&nbsp; &nbsp; getDiv[i].addEventListener("click", function () { myFunction(this.dataset.box_id); })&nbsp; }&nbsp; &nbsp;&nbsp;}myFunction (i) {&nbsp;var myString = "PLS HELP THX BRO or SIS " + i;&nbsp;alert(myString);}