前端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的原因。

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

---

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

Answer 2

http://segmentfault.com/a/1190000002911439?_ea=278770
我之前写过一个js案例，里面有你这几个栗子，其实前几位童鞋写的答案已经很好了，但是我希望你还是能够去全面读读js事件原理，去把结果在console中alert 出来，收获会更大^_^

Answer 3

感谢所有回答的童鞋，但是只能采纳一个答案，谢谢大家的关心，我会继续努力~~~

Answer 4

出题者的意图是：考察绑定事件处理处理程序的两种方式，以及两种方式的区别。
1.on+事件名
2.addEventListener/attachEvent（IE）
第一方式不覆盖已绑定的事件处理程序，第二种方式覆盖，且只覆盖用同种方式绑定的。
第一种方式没有兼容性问题，第二种方式IE8及以前版本的IE不支持addEventListener,使用attachEvent.
一般情况下使用第二种方式，这样避免覆盖已注册的事件处理程序。

Answer 5

第一种方式是在监听队列中增加一次
第二种方式是给方法重新赋值
这样就很好理解了

Answer 6

同意1楼的说法
1 onclick是DOM0中添加事件处理程序的方法，是在老的第四代浏览器中实现的，现在仍然被现代浏览器所支持，不存在兼容性的问题。缺点就是只能注册一个事件处理方法，重复添加会覆盖掉前面添加的。
2 addEventListener是DOM2中添加事件处理程序的方法，可以添加多个，只能通过removeEventListener来移除。问题是这个存在浏览器兼容的问题，就像2楼说的，IE有自己的实现attachEvent,这里还有个坑就是通过addEventListener添加的匿名的事件处理程序将无法移除。