Raphael.js onmouseover onmouseout событие

Question

Я создал 4 прямоугольника в файле Raphael.js, используя цикл for. Когда я применяю такие события, как onmouseover или onmouseout, это применяется только к последнему созданному прямоугольнику. Я знаю, что что-то не так в моем коде. Пожалуйста, предоставьте решение, и есть ли способ упростить код?

JS Fiddle Link

window.onload = function(){
    var paper = Raphael(0,0,640,540);

    for (i=0;i<2;i++){
        for (j=0;j<2;j++){
            var boxes = paper.rect(0+(j*320),0+(i*270),320,270).attr({fill:'#303030',stroke:'white'});
            boxes.node.onmouseover = function () {
                boxes.attr("fill", "blue");
            };
            boxes.node.onmouseout = function () {
                boxes.attr("fill", "#303030");
            };
        }
    }    
}​

Answer 1

Это чрезвычайно распространенная ошибка в JavaScript. Вы повторно используете boxes переменная, поэтому, когда любой из обработчиков выполняется, он указывает на последнее значение, которое он имел.

Обычный способ преодолеть это - заключить код внутри цикла в вызов функции:

window.onload = function() {
var paper = Raphael(0, 0, 640, 540);

for (i = 0; i < 2; i++) {
    for (j = 0; j < 2; j++) {
        (function(i, j) {
            var boxes = paper.rect(0 + (j * 320), 0 + (i * 270), 320, 270).attr({
                fill: '#303030',
                stroke: 'white'
            });
            boxes.node.onmouseover = function() {
                boxes.attr("fill", "blue");
            };
            boxes.node.onmouseout = function() {
                boxes.attr("fill", "#303030");
            };
        })(i, j);
    }
}
}