<!DOCTYPE HTML>
<html >
<head>
<meta charset="UTF-8">
</head>
<div id="d">
aa
<div>
var a=document.getElementById("d");
c.addEventListener("click",function(){alert('4')},false) //3
c.addEventListener("click",function(){alert('1')},true) //4
<html >
<head>
<meta charset="UTF-8">
</head>
<body>
<div id="d">
aa
<div>
<div>
var a=document.getElementById("d");
a.addEventListener("click",function(){alert('2')},true) //1
a.addEventListener("click",function(){alert('3')},false) //2
var c=document.getElementById("b");c.addEventListener("click",function(){alert('4')},false) //3
c.addEventListener("click",function(){alert('1')},true) //4
</script>
</body></html>
输出为1,2,3,4类似一个u形状。
测试环境是在IE11和火狐上，据说IIE8不支持捕获并且也不支持以上两个函数，大部分浏览器一开始只支持冒泡，现在连IE都支持捕获和这两个函数了。
利用这个程序更好地理解了事件的捕获和冒泡，重点在于addEventListener的第三个参数，可以通过1,2,3,4的两两组合测试，事件冒泡和捕获的过程和原理。
272
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
