小菜鸟今天无意之间发现了这个问题，由于我之前用dom0级方式给li元素绑定了onclik事件，然后今天在做一个小test的时候用元素特性再次给这个li元素绑定了onclik事件，然后意外的发现这个事件没有触发，又把这个事件换到其他元素上，alert成功。所以就想起了js中的三种绑定事件的方式，如果分别给同一个元素绑定同一种事件，那么这三种绑定事件方式的执行顺序是什么。然后小菜鸟就做了一个demo来测试一下。代码如下
<!DOCTYPE html> <html> <head> <title></title> </head> <body> <div id='test' style=" 100px; height: 100px; background-color: red;" onclick="testFun()"></div> <script> addEventListener('click',testFun1,false); function testFun1(){ alert('dom2'); } var obj=document.getElementById('test'); obj.onclick=function(){ alert('dom0'); } function testFun(){ alert('html'); } </script> </body> </html>
之后alert结果顺序为：dom0 dom2
如果注释掉这段代码
var obj=document.getElementById('test'); obj.onclick=function(){ alert('dom0'); }
alert结果顺序为：html dom2
之后就请教了别人，原来这是由于html是顺序执行的，解析到哪儿就执行到哪儿，整个dom都完成之后，dom0级事件处理程序就覆盖掉了html事件处理程序。
好了，更具体的原理是怎样的我就没有花时间去找答案了。如果有大神知道是怎么回事请多多指点指点。