事件绑定问题，知道标准事件模型的进来帮我解决一下

<div id="mz_ico">
编辑器标签


















































// 浮动层字体大小
<div id="mz_font_size" style="display:none">
9px
10px
12px
14px
16px
18px
24px
32px
</div>// 浮动层字体颜色
<table id="mz_font_color" cellspacing="0" cellpadding="0" border="0" style="display:none">
<tbody>
<tr>
<td class="mz_icon_inline">
<td class="mz_icon_inline">
<td class="mz_icon_inline">
<td class="mz_icon_inline">
<td class="mz_icon_inline">
<td class="mz_icon_inline">
<td class="mz_icon_inline">
<td class="mz_icon_inline">
<td class="mz_icon_inline">
<td class="mz_icon_inline">
</tr>
<tr>
<td class="mz_icon_inline">
<td class="mz_icon_inline">
<td class="mz_icon_inline">
<td class="mz_icon_inline">
<td class="mz_icon_inline">
<td class="mz_icon_inline">
<td class="mz_icon_inline">
<td class="mz_icon_inline">
<td class="mz_icon_inline">
<td class="mz_icon_inline">
</tr>
</tbody>
</table>
</div>我现在想通过绑定顶层的 mz_ico ID 然后下面子元素 span table里的td元素可以响应鼠标事件，mousemove，mouseout，mousedown，这3个事件，然后分别执行不同的函数改变当前的样式。比如隐藏浮动层，等等操作。
这个东西折腾我好几天了，不要告诉我在HTML 里加mousemove这样答案，我要DOM 标准模式的

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

提供思路<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style>
#div1{color:blue;}
#div1:hover{color:black;}
</style>
<script>
/**
* 为需要设置的dom添加事件
* @object el
* 需要添加事件的dom对象
* @object listeners
* 需要添加的事件,click mouseover mousedown keydown keypress keyup ……
* @function fun
* 事件调用的方法
*/
function addEvent(el,listeners,fun,scope){
 var tmpFun=function(event){
 event=event||window.event;
 fun(scope||el,event);
 }
 try{
 el.addEventListener(listeners,tmpFun,true);
 }
 catch(ex){
 el.attachEvent('on'+listeners,tmpFun,true);
 }
}
/**
* 以mouseover为例，定义一个事件调用的函数，改函数有两个参数，第一个是触发事件时函数的作用域(一般就是触发事件的dom对象)，第二个是事件对象
*/
var mouseover=function(el,event){
 alert('mouseover '+el.id);
}
/**
* 这个例子用于测试事件函数作用域
*/
var testScope={id:'作用域'};
var mouseout=function(el,event){
 alert('mouseout '+el.id);
}
var mousedown=function(el,event){
 alert('mousedown');
}
</script>
</head><body>
<div id='div1'>右键测试</div>
<script>
addEvent(document.getElementById('div1'),'mouseover',mouseover);
addEvent(document.getElementById('div1'),'mouseout',mouseout,testScope);//这里添加事件时修改了事件函数的作用域
addEvent(document.getElementById('div1'),'mousedown',mousedown);
</script>
</body>
</html>PS：mouseover和mouseout修改样式建议用CSS伪类
var div = document.getElementById('mz_ico');
div.onmouseover = function(event){
var target = event.target || event.srcElement;
if(target.tagName === 'TD'){
// Todo...
}
}mouseout，mousedown事件同理
var div = document.getElementById('mz_ico');
div.onmouseover = function(e){
    var event = e || window.event,
        target = event.target || event.srcElement;
    if(target.tagName === 'TD'){
        // Todo...
    }
}mouseout，mousedown事件同理