在
使用...(5)中用Show()把菜单显示出来了，Show中的大部分大代码都很好理解，这节主要说一下event的处理，在Show的末尾我们使用了一个AttachEvents()方法来attach鼠标和键盘的事件，该方法的代码如下：
Menu.prototype.AttachEvents =
function(menuHtml)
{
var menuObj = __MenuCache__[menuHtml.uniqueId];
if ( menuObj.m_IsEventAttached )
{
return;
}
var doc = menuObj.m_Popup.document;
for (
var i=0 ; i < menuObj.m_Items.length ; ++i )
{
var mItem = menuObj.m_Items[i];
var trItem = doc.getElementById(mItem.m_Id);
if ( mItem.m_Action && !mItem.m_ChildMenu )
{
if ( !mItem.IsSeparator() )
{
trItem.attachEvent('onclick', mItem.m_Action);
trItem.attachEvent('onclick', Menu.HideAllPopups);
}
}
if ( mItem.m_ChildMenu )
{
trItem.attachEvent('onmousedown',
this.InnerShow);
}
if ( !mItem.IsSeparator() )
{
trItem.attachEvent('onmouseover',
this.ActiveItem);
}
}
menuHtml.attachEvent('onmouseout',
this.ResumeItem);
if ( doc )
{
doc.attachEvent('onkeydown',
this.Keydown);
}
menuObj.m_IsEventAttached =
true;
};
方法中的第一句：
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()的源代码如下：
Menu.prototype.ResumeItem =
function(evt)
{
if ( !evt || evt.toElement )
{
return;
}
var menuHtml = FindParentElement(evt.srcElement, 'TABLE');
if ( !menuHtml.uniqueId )
{
menuHtml = FindParentElement(menuHtml.parentElement, 'TABLE');
}
var menuObj =
__MenuCache__[menuHtml.uniqueId];
if ( menuObj.HasSubMenuExpanded() )
{
return;
}
if ( menuObj.m_ShowTimer )
{
window.clearTimeout(menuObj.m_ShowTimer);
menuObj.m_ShowTimer =
null;
}
menuObj.__resumeItem();
};
这个menuHtml.attachEvent('onmouseout',
this.ResumeItem);事件是用来处理鼠标离开了最末级子菜单时，取消菜单条目的选种状态的。随便点开一个系统菜单，把鼠标移到任何一个条目上，该条目就会被highlight，不做任何点击操作，把鼠标移出菜单，该菜单中被highlight的item就会被resume，这个方法就是实现这个效果的。它的关键是判断 !evt || evt.toElement 是否不为真。
Menu.prototype.AttachEvents =
function(menuHtml)
{
var menuObj = __MenuCache__[menuHtml.uniqueId];
if ( menuObj.m_IsEventAttached )
{
return;
}
var doc = menuObj.m_Popup.document;
for (
var i=0 ; i < menuObj.m_Items.length ; ++i )
{
var mItem = menuObj.m_Items[i];
var trItem = doc.getElementById(mItem.m_Id);
if ( mItem.m_Action && !mItem.m_ChildMenu )
{
if ( !mItem.IsSeparator() )
{
trItem.attachEvent('onclick', mItem.m_Action);
trItem.attachEvent('onclick', Menu.HideAllPopups);
}
}
if ( mItem.m_ChildMenu )
{
trItem.attachEvent('onmousedown',
this.InnerShow);
}
if ( !mItem.IsSeparator() )
{
trItem.attachEvent('onmouseover',
this.ActiveItem);
}
}
menuHtml.attachEvent('onmouseout',
this.ResumeItem);
if ( doc )
{
doc.attachEvent('onkeydown',
this.Keydown);
}
menuObj.m_IsEventAttached =
true;
};
由于attachEvent方法的操作类似一个压栈的过程，执行它是不会检查同一个事件是否已被attach了的，所以需要自己记录菜单是否已attach事件的标志，在执行attach操作前判断。第二个要注意的是，在向事件上attach处理方法时，由于方法都是Menu类内部的方法，都是使用 this.MethodName来引用的，而在这些方法的实现中，是不能使用 this这个关键字来指代Menu类的当前实例的，我下面用 this.ResumeItem的调用来说明，ResumeItem()的源代码如下：
Menu.prototype.ResumeItem =
function(evt)
{
if ( !evt || evt.toElement )
{
return;
}
var menuHtml = FindParentElement(evt.srcElement, 'TABLE');
if ( !menuHtml.uniqueId )
{
menuHtml = FindParentElement(menuHtml.parentElement, 'TABLE');
}
var menuObj =
__MenuCache__[menuHtml.uniqueId];
if ( menuObj.HasSubMenuExpanded() )
{
return;
}
if ( menuObj.m_ShowTimer )
{
window.clearTimeout(menuObj.m_ShowTimer);
menuObj.m_ShowTimer =
null;
}
menuObj.__resumeItem();
};
继续说this引用的问题，当这个onmouseout事件被触发时，方法默认的第一个参数是其window上的event，这个我在使用...(3)中说过，还用红色标识出来了的。而这时ResumeItem里的this引用的是当前菜单所在的父IE窗口，所以获得菜单实例的方法仍然是从__MenuCache__里去取(代码中加下划线的语句)。同时除了ResumeItem，所有在AttachEvents里的attach的方法，InnerShow、ActiveItem和Keydown等，里面都不会有对this的调用(除非确实要引用父IE窗口)。
本文转自博客园鸟食轩的博客，原文链接：http://www.cnblogs.com/birdshome/，如需转载请自行联系原博主。
