原型框架中的JavaScript事件层次结构 [英] Javascript Event Hierarchy in Prototype framework

问题描述

使用原型JavaScript框架，在 dom：loaded 和加载之间是否有任何事件需要处理？

我已经实现了一个预加载器原型如下：

  Event.observe（window，load，preload）; 
 function preload（）{
 if（$（'wrapper'））
 $（'wrapper'）。setStyle（{display：block}）; 
 if（$（'loading'））
 setTimeout（'$（loading）。fade（{duration：5.0}）;'，4000）; 
} 
  

然后我有另一个处理程序用于列高度fixatioan，它是： / p>

  Event.observe（window，load，function（）{
 var bottomExtraOffset =（Prototype.Browser.IE ）？100：130; 
 if（parseInt（$$（'。col1'）[0] .getStyle（'height'））> parseInt（$$（'。col2'）[0] .getStyle （'height'））
 $（'wrapper'）。setStyle（{'height'：parseInt（$$（'。col1'）[0] .getStyle（'height'））+ bottomExtraOffset +'px ''）; 
 else 
 $（'wrapper'）。setStyle（{'height'：parseInt（$$（'。col2'）[0] .getStyle（'height'））+ bottomExtraOffset + 'px'}）; 
}）; //观察
  

它的工作相当不错任何浏览器，但IE！似乎IE没有将第二个处理程序附加到onload处理程序列表中，所以当第一个处理程序尝试获取任何列的高度时，它返回0 coz，它仍然显示为none。

是否有任何其他事件比加载&

解决方案

没有这样的事件AFAIK ，甚至是由Prototype开发人员实现的，这不是JS中的默认事件。您可能希望使用一个助手来延迟执行第二个处理程序，因此首先执行第一个处理程序：

  function foo（）{
 var bottomExtraOffset =（Prototype.Browser.IE）？ 100：130; 
 if（parseInt（$$（'。col1'）[0] .getStyle（'height'））> parseInt（$$（'。col2'）[0] .getStyle（'height'）） ）{
 $（'wrapper'）。setStyle（{'height'：parseInt（$$（'。col1'）[0] .getStyle（'height'））+ bottomExtraOffset +'px'}） 
} 
 else {
 $（'wrapper'）。setStyle（{'height'：parseInt（$$（'。col2'）[0] .getStyle（'height'）） + bottomExtraOffset +'px'}）; 
} 
} 
 
函数bar（）{
 //一毫秒延迟。 
 setTimeout（foo，1）; 
} 
 
 Event.observe（window，load，bar）; //或window.observe（load，bar）; 
  

此外，您可以检查用户代理是否像IE一样，然后使用此方法和您的另外一个。

is there any event to be handled between the dom:loaded and load using Prototype javascript framework?
I've implemented a preloader using prototype which is looking like this:

Event.observe(window,"load",preload);
function preload(){
    if($('wrapper'))
        $('wrapper').setStyle({"display":"block"});
    if($('loading'))
        setTimeout('$("loading").fade({duration: 5.0});',4000);
}

then I've an another handler using for column height fixatioan which is:

Event.observe(window,"load",function(){ 
    var bottomExtraOffset = (Prototype.Browser.IE) ? 100 : 130;
    if(parseInt($$('.col1')[0].getStyle('height')) > parseInt($$('.col2')[0].getStyle('height')))
        $('wrapper').setStyle({'height' : parseInt($$('.col1')[0].getStyle('height'))+bottomExtraOffset+'px'}); 
    else
        $('wrapper').setStyle({'height' : parseInt($$('.col2')[0].getStyle('height'))+bottomExtraOffset+'px'});
});//observe    

It's working pretty nice in any browser but IE! It seems that IE is not appending the second handler to the onload handlers list, so when the first one is trying to get height of any of columns it returns 0 coz it's still displayed as none.

is there any other event than load & dom:loaded to be handled and get me outta this!?

解决方案

There's no such event AFAIK, and even the dom:loaded event is implemented by Prototype developers and that's not a default event in JS. You might want to use a helper to make a delay in performing of the second handler, so the first one will be performed first:

function foo(){ 
    var bottomExtraOffset = (Prototype.Browser.IE) ? 100 : 130;
    if (parseInt($$('.col1')[0].getStyle('height')) > parseInt($$('.col2')[0].getStyle('height'))) {
        $('wrapper').setStyle({'height' : parseInt($$('.col1')[0].getStyle('height')) + bottomExtraOffset + 'px'}); 
    }
    else {
        $('wrapper').setStyle({'height' : parseInt($$('.col2')[0].getStyle('height')) + bottomExtraOffset + 'px'});
    }
}

function bar() {
  // One msec delay.
  setTimeout(foo, 1);
}

Event.observe(window, "load", bar); // or window.observe("load",bar);

Also, you can check if the user agent is some hell like IE, then use this method and your said one otherwise.

这篇关于原型框架中的JavaScript事件层次结构的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！