Preserving context just using .bind()

by dhchow

HTML

<div id="box0">0</div>
<div id="box1">1</div>
<div id="box2">2</div>
<div id="box3">3</div>
<div id="box4">4</div>
<div id="box5">5</div>
<div id="box6">6</div>
<div id="box7">7</div>
<div id="box8">8</div>
<div id="box9">9</div>
<div id="box10">10</div>

JavaScript

// What do the following resolve to?
var x = 1 + 2 + "3";
var y = "1" + "2" + 3;

// What does this do?
for (var i = 0; i < 10; i++) {
    document.getElementById('box' + i).onclick = function() {
        alert('You clicked on box #' + this);
    }.bind(i);
}