谁能解释下,为何这段代码的弹出结果是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>
test1 和 test2 是DOM 2级事件绑定,考察的主要有两点:
1)事件捕获和事件冒泡
2)DOM 2级规定可以为同一个元素绑定多个事件处理程序,绑定的事件处理程序会按照它们添加的先后顺序依次触发。而 DOM0 级只能添加一个事件处理程序,后添加的会覆盖先添加的。这也是test4会覆盖掉test3的原因。
写过一篇关于事件的文章,可以看看哈~ [学习笔记] 事件
PS. 虽然 test2 是在事件捕获阶段触发的,但事件处理程序是按绑定顺序执行的,所以是先 test1 后 test2