您的位置：首页 > Web前端 > JavaScript

js事件的冒泡和捕获

2016-01-14 22:37 501 查看

<!DOCTYPE HTML>

<html >

<head>

<meta charset="UTF-8">

</head>
<body>

<div id="b">

<div id="d">

aa

<div>
<div>

<script type="text/javascript">

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的两两组合测试，事件冒泡和捕获的过程和原理。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航