前端Js基础面试题

Question

谁能解释下，为何这段代码的弹出结果是test1,test2,test4，以及出题者的意图是什么，涉及的知识面是哪些。为何 test4会覆盖 test3test2却不会覆盖test1注册事件和下面的区别是啥.......希望能得到深刻的回答。<div id="test">test</div><script type="text/javascript">    var btn = document.getElementById("test");    btn.addEventListener("click",function(e){        alert("test1");    },false);    btn.addEventListener("click",function(e){        alert("test2");    },true);    btn.onclick=function(e){        alert("test3");    }    btn.onclick=function(e){        alert("test4");    }</script>

Answer 1

test1 和 test2 是DOM 2级事件绑定，考察的主要有两点：
1）事件捕获和事件冒泡
2）DOM 2级规定可以为同一个元素绑定多个事件处理程序，绑定的事件处理程序会按照它们添加的先后顺序依次触发。而 DOM0 级只能添加一个事件处理程序，后添加的会覆盖先添加的。这也是test4会覆盖掉test3的原因。

写过一篇关于事件的文章，可以看看哈~ [学习笔记] 事件

---

PS. 虽然 test2 是在事件捕获阶段触发的，但事件处理程序是按绑定顺序执行的，所以是先 test1 后 test2