300分求助：JS中——动态声明事件处理函数

Question

标题可能写的会有问题（本人菜鸟一个）：急呀！！！！！！以下只是部分代码，源文件太大了！下面关键部分临时加了注释！（还有，分儿不够 300，我会跟贴补分的！）<script type="text/javascript">//  创建 JSONSTORE
var menuStore =new Ext.data.JsonStore({
   url : 'loadRoleMenus.do',
   root:'records',
   fields:['code','name','jspurl','isLeaf','parentcode'],
   autoLoad : true  
});//  加载数据
menuStore.on('load', function(_store, _records, _options){
   for (var i = 0; i < _records.length; i++) { 
       var parentcode= _records[i].get('parentcode');
           if (Ext.isEmpty(parentcode)){
            addRootMenu(_records[i]);
           }else{
            continue;
           }
   }
});//  添加根菜单
function addRootMenu(node) {
//Get XmlString
var sXmlString = "";
var sBegin = "<root><menu><ul>";
var sEnd = "</ul></menu></root>";

sXmlString = sBegin + getChildXmlString(node.data.code) + sEnd;
addMainMenu(node.data.name, sXmlString);           //  添加根菜单
    }        //  获取单个根菜单下的所有子菜单栏的 XML 字符串
function getChildXmlString(strParent) {
var sMenuItem = ""
var sLeft = "<li onclick=";
sLeft += '"';
sLeft += "{fnCallJspFuncPage('";
var sCenter = "')}";
sCenter += '">';

var sRight = "</li>";
for (var i = 0; i < menuStore.getCount(); i++) {
if (menuStore.getAt(i).data.parentcode==strParent) {
sMenuItem = sMenuItem + sLeft + menuStore.getAt(i).data.jspurl + sCenter + menuStore.getAt(i).data.name + sRight;
}
}
return sMenuItem;
}
// welcome.js end//  将来想扩展成动态的数组对象，目前数组固定为 6 个元素
var arrMenuMain = new Array(6);
var intMenuIndx = 1; arrMenuMain[0] = new Menu();
arrMenuMain[0].id = "MenuA";
arrMenuMain[1] = new Menu();
arrMenuMain[1].id = "MenuB";
arrMenuMain[2] = new Menu();
arrMenuMain[2].id = "MenuC";
arrMenuMain[3] = new Menu();
arrMenuMain[3].id = "MenuD";
arrMenuMain[4] = new Menu();
arrMenuMain[4].id = "MenuE";
arrMenuMain[5] = new Menu();
arrMenuMain[5].id = "MenuF";//  添加根菜单的处理函数
function addMainMenu(strMenuItemText, strXmlString){
var tdMnu = document.getElementById("rowMenuMain").insertCell();
var sID = "Menu" + String.fromCharCode(intMenuIndx+64);
tdMnu.Id = "TD-" + sID;
                //  产生 LI对象 及其属性串
var sRes = '<li id="';
sRes += sID;
sRes += '" ';
sRes += 'onmouseover="{this.className = ';
sRes += "'over'}";
sRes += '" onmouseout=';
sRes += '"{this.className = ';
sRes += "'out'}";
sRes += '"';
sRes += " class='out'>";
sRes += strMenuItemText + "</li>";
tdMnu.innerHTML = sRes;
tdMnu.width = 100;
tdMnu.align = "center";
arrMenuMain[intMenuIndx-1].width = 180;
arrMenuMain[intMenuIndx-1].xmlString = strXmlString;
arrMenuMain[intMenuIndx-1].init();
intMenuIndx += 1;
}
//  问题就出在下面的代码：BEGIN
document.getElementById("MenuA").onmousemove = function(e) {
for (var i = 0; i <= 5; i++) {
var sItm = "Menu" + String.fromCharCode(i+65);
if (sItm=="MenuA") {
arrMenuMain[i].show(e, "left");
} else {
arrMenuMain[i].close(e);
}
}
} document.getElementById("MenuB").onmousemove = function(e) {
for (var i = 0; i <= 5; i++) {
var sItm = "Menu" + String.fromCharCode(i+65);
if (sItm=="MenuB") {
arrMenuMain[i].show(e, "left");
} else {
arrMenuMain[i].close(e);
}
}
} document.getElementById("MenuC").onmousemove = function(e) {
for (var i = 0; i <= 5; i++) {
var sItm = "Menu" + String.fromCharCode(i+65);
if (sItm=="MenuC") {
arrMenuMain[i].show(e, "left");
} else {
arrMenuMain[i].close(e);
}
}
} document.getElementById("MenuD").onmousemove = function(e) {
for (var i = 0; i <= 5; i++) {
var sItm = "Menu" + String.fromCharCode(i+65);
if (sItm=="MenuD") {
arrMenuMain[i].show(e, "left");
} else {
arrMenuMain[i].close(e);
}
}
} document.getElementById("MenuE").onmousemove = function(e) {
for (var i = 0; i <= 5; i++) {
var sItm = "Menu" + String.fromCharCode(i+65);
if (sItm=="MenuE") {
arrMenuMain[i].show(e, "left");
} else {
arrMenuMain[i].close(e);
}
}
} document.getElementById("MenuF").onmousemove = function(e) {
for (var i = 0; i <= 5; i++) {
var sItm = "Menu" + String.fromCharCode(i+65);
if (sItm=="MenuF") {
arrMenuMain[i].show(e, "left");
} else {
arrMenuMain[i].close(e);
}
}
}
//  问题就出在下面的代码：END//  IE 中的提示是这样的“document.getElementById("...")为空，或不是对象”</script></body>
</html>

Answer 1

标题可能写的会有问题（本人菜鸟一个）：急呀！！！！！！以下只是部分代码，源文件太大了！下面关键部分临时加了注释！（还有，分儿不够 300，我会跟贴补分的！）<script type="text/javascript">// 创建 JSONSTORE
var menuStore =new Ext.data.JsonStore({
    url : 'loadRoleMenus.do',
    root:'records',
    fields:['code','name','jspurl','isLeaf','parentcode'],
    autoLoad : true  
});// 加载数据
menuStore.on('load', function(_store, _records, _options){
    for (var i = 0; i < _records.length; i++) { 
        var parentcode= _records[i].get('parentcode');
        if (Ext.isEmpty(parentcode)){
             addRootMenu(_records[i]);
        }else{
             continue;
        }
    }
});// 添加根菜单
function addRootMenu(node) {
    //Get XmlString
    var sXmlString = "";
    var sBegin = "<root><menu><ul>";
    var sEnd = "</ul></menu></root>";    sXmlString = sBegin + getChildXmlString(node.data.code) + sEnd;
    addMainMenu(node.data.name, sXmlString); // 添加根菜单
}  // 获取单个根菜单下的所有子菜单栏的 XML 字符串
function getChildXmlString(strParent) {
    var sMenuItem = ""
    var sLeft = "<li onclick=";
    sLeft += '"';
    sLeft += "{fnCallJspFuncPage('";
    var sCenter = "')}";
    sCenter += '">';    var sRight = "</li>";
    for (var i = 0; i < menuStore.getCount(); i++) {
        if (menuStore.getAt(i).data.parentcode==strParent) {
            sMenuItem = sMenuItem + sLeft + menuStore.getAt(i).data.jspurl + sCenter +   menuStore.getAt(i).data.name + sRight;
        }
    }
    return sMenuItem;
}
// welcome.js end// 将来想扩展成动态的数组对象，目前数组固定为 6 个元素
var arrMenuMain = new Array(6);
var intMenuIndx = 1;arrMenuMain[0] = new Menu();
arrMenuMain[0].id = "MenuA";
arrMenuMain[1] = new Menu();
arrMenuMain[1].id = "MenuB";
arrMenuMain[2] = new Menu();
arrMenuMain[2].id = "MenuC";
arrMenuMain[3] = new Menu();
arrMenuMain[3].id = "MenuD";
arrMenuMain[4] = new Menu();
arrMenuMain[4].id = "MenuE";
arrMenuMain[5] = new Menu();
arrMenuMain[5].id = "MenuF";// 添加根菜单的处理函数
function addMainMenu(strMenuItemText, strXmlString){
    var tdMnu = document.getElementById("rowMenuMain").insertCell();
    var sID = "Menu" + String.fromCharCode(intMenuIndx+64);
    tdMnu.Id = "TD-" + sID;
  // 产生 LI对象 及其属性串
    var sRes = '<li id="';
    sRes += sID;
    sRes += '" ';
    sRes += 'onmouseover="{this.className = ';
    sRes += "'over'}";
    sRes += '" onmouseout=';
    sRes += '"{this.className = ';
    sRes += "'out'}";
    sRes += '"';
    sRes += " class='out'>";
    sRes += strMenuItemText + "</li>";
    tdMnu.innerHTML = sRes;
    tdMnu.width = 100;
    tdMnu.align = "center";
    arrMenuMain[intMenuIndx-1].width = 180;
    arrMenuMain[intMenuIndx-1].xmlString = strXmlString;
    arrMenuMain[intMenuIndx-1].init();
    intMenuIndx += 1;
}
// 问题就出在下面的代码：BEGIN
document.getElementById("MenuA").onmousemove = function(e) {
    for (var i = 0; i <= 5; i++) {
        var sItm = "Menu" + String.fromCharCode(i+65);
        if (sItm=="MenuA") {
            arrMenuMain[i].show(e, "left");
        } else {
            arrMenuMain[i].close(e);
        }
    }
}                  //  MenuB、MenuC、MenuD、MenuE、MenuF 与 MenuA 中代码相同，此处略掉// 问题就出在下面的代码：END// IE 中的提示是这样的“document.getElementById("...")为空，或不是对象”</script></body>
</html>重发一下吧！

Answer 2

底部？什么地方算是页面加载完哪？是 BODY 的外面啊？我这个代码段下面紧接着就是 BODY 结束符了啊？

Answer 3

就是body下面。
加载菜单的放在head上面

Answer 4

问题已经解决：原因是 JSONSTORE 加载数据的方式是异步的。也就是说，在 JSONSTORE 还没加载（LOAD）完数据以前，下面的 JS 代码已经执行完毕了，，当下面的代码执行到 document.getElementById("MenuA").onmousemove 时 ID 为 MenuA 的对象还没有来得及创建！

Answer 5

arrMenuMain[0] = new Menu();
arrMenuMain[0].id = "MenuA";menu 是什么对象啊？如果是一个dom,可以试试：arrMenuMain[0].onmousemove = function(e) {
    for (var i = 0; i <= 5; i++) {
        var sItm = "Menu" + String.fromCharCode(i+65);
        if (sItm=="MenuA") {
            arrMenuMain[i].show(e, "left");
        } else {
            arrMenuMain[i].close(e);
        }
    }
}

Answer 6

把代码放到window.onload函数中试试