前端Js基础面试题

Question

谁能解释下，为何这段代码的弹出结果是test1,test2,test4，以及出题者的意图是什么，涉及的知识面是哪些。

• 为何 test4会覆盖 test3

• test2却不会覆盖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的原因。写过一篇关于事件的文章，可以看看哈~&nbsp;[学习笔记] 事件PS. 虽然 test2 是在事件捕获阶段触发的，但事件处理程序是按绑定顺序执行的，所以是先 test1 后 test2