为同一元素对象分别用三种绑定事件方式绑定同一种事件-优快云博客

小菜鸟今天无意之间发现了这个问题，由于我之前用dom0级方式给li元素绑定了onclik事件，然后今天在做一个小test的时候用元素特性再次给这个li元素绑定了onclik事件，然后意外的发现这个事件没有触发，又把这个事件换到其他元素上，alert成功。所以就想起了js中的三种绑定事件的方式，如果分别给同一个元素绑定同一种事件，那么这三种绑定事件方式的执行顺序是什么。然后小菜鸟就做了一个demo来测试一下。代码如下

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
<div id='test' style="width: 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事件处理程序。

好了，更具体的原理是怎样的我就没有花时间去找答案了。如果有大神知道是怎么回事请多多指点指点。

转载于:https://www.cnblogs.com/miss-radish/p/3641938.html