Fruit and scope

by BrownieBoy

HTML

<script src="http://maps.googleapis.com/maps/api/js?sensor=true"></script>
<input type="button" onclick="doAction();" value="doAction()"><br>
<br>
<br>

<input name="TestField" value="" id="TestField"></form>
<div id="fruit_canvas"></div>

JavaScript

function doAction() {
    var fruits = new Array("apple", "orange", "lemon");

    $("#fruit_canvas").append("Mouse over these fruits:");

    for (var i = 0; i < fruits.length; i++) {
        var fruit = fruits[i];
        var html = "<div id='fruit" + i + "'>" + fruit + "</div>";
        var fruitdiv = $(html);
        $("#fruit_canvas").append(fruitdiv);

        $(fruitdiv)[0].addEventListener('mouseover', (function(fruit) {
            return function() {
                console.log("Mouse over " + fruit);
            };
        })(fruit));

        $(fruitdiv)[0].addEventListener('mouseout', (function(fruit) {
            return function() {
                console.log("Mouse out " + fruit);
            };
        })(fruit));
    }
}

/*
 var mouseoverListener = (function(fruit) {
        return function() {
            $("#result_canvas").append("Mouse over " + fruit);
        };
    })(fruit);
*/

function doActionWrong() {
    var fruits = new Array("apple", "orange", "lemon");

    $("#fruit_canvas").append("Mouse over these fruits:");

    for (var i = 0; i < fruits.length; i++) {
        var fruit = fruits[i];
        var html = "<div id='fruit" + i + "'>" + fruit + "</div>";
        var fruitdiv = $(html);
        $("#fruit_canvas").append(fruitdiv);

        $(fruitdiv)[0].addEventListener('mouseover', function() {
            console.log("Mouse over " + fruit);
        });

        $(fruitdiv)[0].addEventListener('mouseout', function() {
            console.log("Mouse out " + fruit);
        });
    }
}

// fld.addEventListener('keyup',eventkeyup,false );