如何将唯一变量传递给 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 Eventsvar 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() {

  var sectionEl = document.getElementById('section-used');

  // add box elements

  let howMany = 5;

  for (let i = 0; i < howMany; i++) {

    let childBox = document.createElement('div');

    childBox.className = "box";

    childBox.innerText = i;

    sectionEl.appendChild(childBox);

  }

  // doBBoxClick is called on click of child 

  var doBBoxClick = function(event, additionalParameters) {

    let myString = "Updated I am box " + additionalParameters.index;

    alert(myString); //use value passed (not the child index)

    // do stuff with event and this being the triggering event and caller

    this.classList.add(additionalParameters.newClass);

    console.log("parent:", this.parentNode.classList.value);

    this.parentNode.classList.toggle("togle-color");

    console.log("parent:", this.parentNode.classList.value);

    let index = Array.prototype.indexOf.call(this.parentNode.children, this);

    console.log("index:", index); //which one

  }

  // get all boxes and add click event

  var childBoxes = sectionEl.getElementsByClassName('box');

  let howManyBoxes = childBoxes.length;

  console.log("howMany:", howManyBoxes);

  for (let c = 0; c < howManyBoxes; c++) {

    childBoxes[c].addEventListener('click', function(event) {

      var additionalParameters = {

        index: c,

        newClass: "other-class"

      };

      doBBoxClick.call(this, event, additionalParameters);

    }, false);

  }

}());

  .box {

  border: solid 1px lime;

  margin: 0.5em;

}

#section-used {

  border: solid 2px blue;

}

.other-class {

  background-color: #dddddd;

}

.thing-added {

  border: solid red 1px;

}

.togle-color {

  color: #44dddd;

  )

<div id="section-used" class="outer-thing">

  <div class="box">I am box already here</div>

  <div class="box">I am box already 1</div>

  Me

</div>

Answer 2

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.dataset.box_id = i;

    div_box.innerText=i;

    sectionHTML.appendChild(div_box);

  }

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

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

    getDiv[i].addEventListener("click", function () { myFunction(this.dataset.box_id); })

  }    

}

myFunction (i) {

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

 alert(myString);

}