谁能解释下，为何这段代码的弹出结果是test1,test2,test4，以及出题者的意图是什么，涉及的知识面是哪些。
希望能得到深刻的回答。
6
545
<p id="test">test</p>
<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>
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
![ThinkPHP5快速开发企业站点[全程实录]](https://img.php.cn/upload/course/000/000/068/6253d918a3ce7278.png)
收藏
test1 和 test2 是DOM 2级事件绑定，考察的主要有两点：
1）事件捕获和事件冒泡
2）DOM 2级规定可以为同一个元素绑定多个事件处理程序，绑定的事件处理程序会按照它们添加的先后顺序依次触发。而 DOM0 级只能添加一个事件处理程序，后添加的会覆盖先添加的。这也是test4会覆盖掉test3的原因。
写过一篇关于事件的文章，可以看看哈~ [学习笔记] 事件
PS. 虽然 test2 是在事件捕获阶段触发的，但事件处理程序是按绑定顺序执行的，所以是先 test1 后 test2
http://segmentfault.com/a/1190000002911439?_ea=278770
我之前写过一个js案例，里面有你这几个栗子，其实前几位童鞋写的答案已经很好了，但是我希望你还是能够去全面读读js事件原理，去把结果在console中alert 出来，收获会更大^_^
感谢所有回答的童鞋，但是只能采纳一个答案，谢谢大家的关心，我会继续努力~~~
出题者的意图是：考察绑定事件处理处理程序的两种方式，以及两种方式的区别。
1.on+事件名
2.addEventListener/attachEvent（IE）
第一方式不覆盖已绑定的事件处理程序，第二种方式覆盖，且只覆盖用同种方式绑定的。
第一种方式没有兼容性问题，第二种方式IE8及以前版本的IE不支持addEventListener,使用attachEvent.
一般情况下使用第二种方式，这样避免覆盖已注册的事件处理程序。
第一种方式是在监听队列中增加一次
第二种方式是给方法重新赋值
这样就很好理解了
同意1楼的说法
1 onclick是DOM0中添加事件处理程序的方法，是在老的第四代浏览器中实现的，现在仍然被现代浏览器所支持，不存在兼容性的问题。缺点就是只能注册一个事件处理方法，重复添加会覆盖掉前面添加的。
2 addEventListener是DOM2中添加事件处理程序的方法，可以添加多个，只能通过removeEventListener来移除。问题是这个存在浏览器兼容的问题，就像2楼说的，IE有自己的实现attachEvent,这里还有个坑就是通过addEventListener添加的匿名的事件处理程序将无法移除。