调用事件侦听器 - 两种方式之一起作用，有什么区别

Calling event listeners - one of two ways works, what's the differnce?

本文关键字：起作用 什么 区别 一起 方式之 事件 侦听器 两种 调用      更新时间：2023-09-26

这种方式不起作用(元素从函数中的 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 );
/*
*/
        }
    }

但是，这种方式确实如此(元素是从函数外部注入的(。

    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 );
/*
*/
    }

如果我无法弄清楚区别，我最终会做的是将我的数组循环拉到外面，然后用元素注入 twitterStyle2。

目前，我无法获得错误代码，但只有一对正在初始化。然后效果字体不起作用。

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

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

我称之为冻结闭包变量，基本上是通过使用自调用函数来创建不共享的新闭包。

var divs = [...];
for (var i=0; i < 10; i++) {
  // Here's the self calling function
  div.onclick = (function(i){
    return function() {
      console.log("Clicked div with index" + i);
    }
  })(i);// Passing the variable to the self calling function creating a new closure 
}

但是，我的首选方法是使用 https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function/bind

var divs = [...];
for (var i=0; i < 10; i++) {
  div.onclick = (function(i) {
      console.log("Clicked div with index" + i + "and id" + this.id );
    }
  }).bind(div, i);
}
相关文章：