为什么单独定义的函数不适用于JavaScript中的“domready”事件?

时间:2011-05-20 19:38:12

标签: javascript domready

我是JavaScript新手。我试图将某些元素设置为相同的高度。除了在“addEvent”声明之外移动函数之外,我设法做了所有事情。

换句话说,这段代码有效:

window.addEvent('domready', function() {  
    var elements = $$( 'div#leftcolumn div.module_menu' );  
    if( elements && elements.length > 1 ) {  
        var heights = [];  
        elements.each( function( el ) {  
            heights.push( el.getStyle('height').toInt() );  
        });
        maxHeight = Math.max.apply( Math, heights ) + "px";
        elements.each( function( el ) {
            el.setStyle('height', maxHeight );
        });
        delete(heights);  
    }
}
);

虽然此代码不起作用:

function matchHeight( selector ) { 
var elements = $$( selector );  
if( elements && elements.length > 1 ) {  
    var heights = [];  
    elements.each( function( el ) {  
        heights.push( el.getStyle('height').toInt() );  
    });
    maxHeight = Math.max.apply( Math, heights ) + "px";
    elements.each( function( el ) {
        el.setStyle('height', maxHeight );
    });
    delete(heights);  
  }
}
window.addEvent( 'domready', matchHeight( 'div#leftcolumn div.module_menu' ) );

我已经使用更简单的函数进行测试,它可以正常工作,例如:

window.addEvent('domready', function() { alert('test'); } )

相当于

function giveMessage() { alert('test'); }
window.addEvent( 'domready', giveMessage())

为什么会这样?

3 个答案:

答案 0 :(得分:5)

这是因为你需要删除括号;函数是一个对象,你需要传递函数,而不是它的返回值。所以,对于你的第一个例子,你应该:

window.addEvent('domready', function() { matchHeight('div#leftcolumn div.module_menu'); } );

相反。第二个例子是:

function giveMessage() { alert('test'); }
window.addEvent( 'domready', giveMessage)

再次,您传递对象giveMessage,而不是调用后获得的结果。

答案 1 :(得分:1)

您忘了将matchHeight来电置于关闭状态。将您的最后一行更改为:

window.addEvent( 'domready', function(){matchHeight( 'div#leftcolumn div.module_menu' )} );

答案 2 :(得分:1)

K以便链接正在寻找指向该函数的指针。当你传递一个匿名函数(如例如#1)时,函数被创建/存储在内存中,并传入该位置。但是你的第二种情况是,JS执行函数(因为你的括号+参数)然后传递作为指针的结果......这不是你想要的。

您需要做的是:

function setup() {
  matchHeight( 'div#leftcolumn div.module_menu');
}
window.addEvent('domready',setup);

或者仍然使用匿名函数:

window.addEvent('domready',
  function() {matchHeight( 'div#leftcolumn div.module_menu');});

FWIW window.addEvent并非完全跨浏览器兼容,另请参阅window.attachEvent