JavaScript在所有元素上执行最后一个eventListener

Question

I'm currently working on a project which contains 4 canvas elements. When a click occurs on an element, it will launch an event which draws the content of the canvas.

function canvasItem(cv, ctx, id){
    this.cv = cv;
    this.ctx = ctx;
    this.id = id;
}

canvasItem.prototype.drawLine = function(){
    console.log("drawing "+this.id);
}

var lineView = {
   canvasItems: [],
    init : function(){
        items = document.getElementsByClassName("highlight");
        if(items){
            for(var i = 0; i<items.length; i++){
                var ctx = items[i].getContext("2d");
                var cv = items[i];
                this.canvasItems.push(new canvasItem(cv, ctx, i));
            }
        }
        this.addListeners();
    },
    addListeners : function(){
        var containers = document.getElementsByClassName("articleContainer");
        for(var i = 0; i<containers.length; i++){
            var currentItem = this.canvasItems[i];
            containers[i].addEventListener("click", currentItem.drawLine, false);
        }
    }
}

window.onload = function(){
    lineView.init();
}

Each canvas element will show the output drawing when it receives a click. I figured out that it's using the variable i=4 and executing the canvasItems[4].drawLine function.

I think this might be because it's passing the variable i by reference in the canvasItems[i].drawLine line. I'm not sure if this is correct, but I hope someone could show me what I'm doing wrong.

Below is the HTML pattern which occurs four times in the HTML page:

<div class="articleContainer">
     <article>
          <h3>Title</h3>
          <p>
                text
          </p>
      </article>
      <canvas class="highlight"></canvas>
</div>

Answer 1

It was primarily a closure issue. Below is the fix.

for (var i = 0; i < containers.length; i++) {
            (function (index) {
                var currentItem = lineView.canvasItems[index];
                containers[index].onclick = function (){
                    currentItem.drawLine();
                };
            }) (i);
        }