使用Popup窗口创建无限级Web页菜单(6)-阿里云开发者社区

开发者社区> 云计算> 正文
登录阅读全文

使用Popup窗口创建无限级Web页菜单(6)

简介:
 在使用...(5)中用Show()把菜单显示出来了,Show中的大部分大代码都很好理解,这节主要说一下event的处理,在Show的末尾我们使用了一个AttachEvents()方法来attach鼠标和键盘的事件,该方法的代码如下:
None.gifMenu.prototype.AttachEvents = function(menuHtml)
None.gif{
None.gif    var menuObj = __MenuCache__[menuHtml.uniqueId];
None.gif    if ( menuObj.m_IsEventAttached )
None.gif    {
None.gif        return;
None.gif    }
None.gif    var doc = menuObj.m_Popup.document;
None.gif    for ( var i=0 ; i < menuObj.m_Items.length ; ++i )
None.gif    {
None.gif        var mItem = menuObj.m_Items[i];
None.gif        var trItem = doc.getElementById(mItem.m_Id);
None.gif        if ( mItem.m_Action && !mItem.m_ChildMenu )
None.gif        {
None.gif            if ( !mItem.IsSeparator() )
None.gif            {
None.gif                trItem.attachEvent('onclick', mItem.m_Action);
None.gif                trItem.attachEvent('onclick', Menu.HideAllPopups);
None.gif            }
None.gif        }
None.gif        if ( mItem.m_ChildMenu )
None.gif        {
None.gif            trItem.attachEvent('onmousedown', this.InnerShow);
None.gif        }
None.gif        if ( !mItem.IsSeparator() )
None.gif        {
None.gif            trItem.attachEvent('onmouseover', this.ActiveItem);
None.gif        }
None.gif    }
None.gif    menuHtml.attachEvent('onmouseout', this.ResumeItem);
None.gif    if ( doc )
None.gif    {
None.gif        doc.attachEvent('onkeydown', this.Keydown);
None.gif    }
None.gif    menuObj.m_IsEventAttached = true;
None.gif};
    方法中的第一句:var menuObj = __MenuCache__[menuHtml.uniqueId];,就是我在使用...(3)中说过的为什么要用__MenuCache__。因为menuObj是JavaScirpt类实例,而menuHtml是DHTML的UI元素,他们在使用innerHTML赋值传递时失去了彼此的引用联系,而__MenuCache__里mapping了它们的一对一关系。Menu类中还有很多方法中都用到了类似__MenuCache__[id]这样的调用,而所有用到这种方法的地方,都是为了把object和html映射起来。

    由于attachEvent方法的操作类似一个压栈的过程,执行它是不会检查同一个事件是否已被attach了的,所以需要自己记录菜单是否已attach事件的标志,在执行attach操作前判断。第二个要注意的是,在向事件上attach处理方法时,由于方法都是Menu类内部的方法,都是使用this.MethodName来引用的,而在这些方法的实现中,是不能使用this这个关键字来指代Menu类的当前实例的,我下面用this.ResumeItem的调用来说明,ResumeItem()的源代码如下:
None.gifMenu.prototype.ResumeItem = function(evt)
None.gif{
None.gif    if ( !evt || evt.toElement )
None.gif    {
None.gif        return;
None.gif    }
None.gif    var menuHtml = FindParentElement(evt.srcElement, 'TABLE');
None.gif    if ( !menuHtml.uniqueId ) 
None.gif    {
None.gif        menuHtml = FindParentElement(menuHtml.parentElement, 'TABLE');
None.gif    }
None.gif    var menuObj = __MenuCache__[menuHtml.uniqueId];
None.gif    if ( menuObj.HasSubMenuExpanded() )
None.gif    {
None.gif        return;
None.gif    }
None.gif    if ( menuObj.m_ShowTimer )
None.gif    {
None.gif        window.clearTimeout(menuObj.m_ShowTimer);
None.gif        menuObj.m_ShowTimer = null;
None.gif    }
None.gif    menuObj.__resumeItem();
None.gif};
    这个menuHtml.attachEvent('onmouseout', this.ResumeItem);事件是用来处理鼠标离开了最末级子菜单时,取消菜单条目的选种状态的。随便点开一个系统菜单,把鼠标移到任何一个条目上,该条目就会被highlight,不做任何点击操作,把鼠标移出菜单,该菜单中被highlight的item就会被resume,这个方法就是实现这个效果的。它的关键是判断 !evt || evt.toElement 是否不为真。

    继续说this引用的问题,当这个onmouseout事件被触发时,方法默认的第一个参数是其window上的event,这个我在使用...(3)中说过,还用红色标识出来了的。而这时ResumeItem里的this引用的是当前菜单所在的父IE窗口,所以获得菜单实例的方法仍然是从__MenuCache__里去取(代码中加下划线的语句)。同时除了ResumeItem,所有在AttachEvents里的attach的方法,InnerShow、ActiveItem和Keydown等,里面都不会有对this的调用(除非确实要引用父IE窗口)。 


本文转自博客园鸟食轩的博客,原文链接:http://www.cnblogs.com/birdshome/,如需转载请自行联系原博主。 

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享: