javascript - 调用事件监听器 - 两种方法之一有效，有什么区别？

Question

这种方式不起作用(元素是从函数中的 with 中拉入的)。

    function styleTwitter1( pair_array )
    {
        var i;
        var input;
        var label;
        var font_size;

        for ( i = 0; i < pair_array.length; i+=2 ) 
        {
/*
*/
            input = document.getElementById( pair_array[ i ] );
            label = document.getElementById( pair_array[ i + 1 ] );
/*
*/
            label.fontSize = window.getComputedStyle( label, null ).getPropertyValue("font-size");
/*
*/
            input.addEventListener( "keypress", function()
            { 
                label.style.opacity = 0; 
            }, false );
/*
*/
            input.addEventListener( "focus", function()
            { 
                if( input.value === '' )
                {
                    label.style.opacity = 0.2; 
                    input.style.border = '1px solid #888888'; 
                }
            } , false );
/*
*/
            input.addEventListener( "blur", function()
            {
                if( input.value === '' )
                {
                    label.style.opacity = 1;
                    new EffectsFont( label ).fade( 'up', 150 );
                    input.style.border = '1px solid #dddddd'; 
                }   
            } , false );
/*
*/
        }
    }

但是，这种方式可以(元素从函数外部注入(inject))。

    function initTwitterStyle( input, label )
    {
/*
*/
        input.addEventListener( "keypress", function()
        { 
            label.style.opacity = 0; 
        }, false );
/*
*/
        input.addEventListener( "focus", function()
        { 
            if( input.value === '' )
            {
                label.style.opacity = 0.2; 
                input.style.border = '1px solid #888888'; 
            }
        }, false );
/*
*/
        input.addEventListener( "blur", function()
        {
            if( input.value === '' )
            {
                label.style.opacity = 1;
                new EffectsFont( label ).fade( 'up', 150 );
                input.style.border = '1px solid #dddddd'; 
            }

        }, false );
/*
*/
    }

如果我无法弄清楚差异，我最终要做的就是将数组循环拉到外面，然后将元素注入(inject) twitterStyle2 。

目前，我无法获取错误代码，但只有一对正在初始化......然后 EffectsFont 不起作用。

Jshint 警告不要在循环中创建函数，但我不明白为什么？这是什么问题？

Answer 1

您遇到关闭问题。处理程序对变量标签进行闭包。但是，当循环完成时，label 将是最后一个元素 - 所有处理程序在触发时都会将 label 视为最后一个元素。