javascript - Why does the indexing not work as an alternative to e.target?

Question

So I don't understand why the following doesn't work, since I used divs[i] to reference itself. It only works if I use e.target (shown in the next code). I understand that e.target refers to the element itself, so why doesn't; div[i] work in this case?

  var divs = document.querySelectorAll('div');
  for(var i = 0; i < divs.length; i++) {
    divs[i].onclick = function() {
      divs[i].style.backgroundColor = bgChange();
    }
  }

the code of e.target

  for(var i = 0; i < divs.length; i++) {
    divs[i].onclick = function(e) {
      e.target.style.backgroundColor = bgChange();
    }
  }

the code for reference

for (var i = 1; i <= 16; i++) {
  var myDiv = document.createElement('div');
  document.body.appendChild(myDiv);
}

function random(number) {
  return Math.floor(Math.random() * number);
}

function bgChange() {
  var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
  return rndCol;
}
var divs = document.querySelectorAll('div');
for (var i = 0; i < divs.length; i++) {
  divs[i].onclick = function(e) {
    e.target.style.backgroundColor = bgChange();
  }
}

div {
  background-color: red;
  height: 100px;
  width: 25%;
  float: left;
}