js 事件冒泡和事件捕获
原创js 事件冒泡和事件捕获
原创
事件冒泡：
事件冒泡由IE团队提出来的，即事件开始由最具体的元素（文档中嵌套层次最深的那个节点）接收，然后逐级向上传播。
IE9，chrome，Firefox，Opera，Safari都支持事件冒泡，并将事件冒泡到window对象。
如下，点击obj3，依次弹出obj3、world、hello。
<body>
<div id="obj1">welcome
<div id="obj2">hello
<div id="obj3">world</div>
</div>
</div>
<script type="text/javascript">
var obj1 = document.getElementById('obj1');
var obj2 = document.getElementById('obj2');
var obj3 = document.getElementById('obj3');
obj1.addEventListener('click', function () {
alert('hello');
});
obj2.addEventListener('click', function () {
alert('world');
})
obj3.addEventListener('click', function () {
alert('obj3');
})//依次弹出obj3、world、hello
</script>
</body>阻止事件冒泡的方法：
方式一：event.stopPropagation();
方式二：return false;
return false 不仅阻止了事件往上冒泡，而且阻止了事件本身。event.stopPropagation() 则只阻止事件往上冒泡，不阻止事件本身。
事件捕获：
事件捕获是由Netscape Communicator团队提出来的，是先由最上一级的节点先接收事件，然后向下传播到具体的节点。
如下，点击obj3，依次弹出hello、world、obj3。
<body>
<div id="obj1">welcome
<div id="obj2">hello
<div id="obj3">world</div>
</div>
</div>
<script type="text/javascript">
var obj1 = document.getElementById('obj1');
var obj2 = document.getElementById('obj2');
var obj3 = document.getElementById('obj3');
obj1.addEventListener('click', function () {
alert('hello');
},true);
obj2.addEventListener('click', function () {
alert('world');
},true)
obj3.addEventListener('click', function () {
alert('obj3');
},true)//依次弹出hello、world、obj3
</script>
</body>
removeEventListener() 删除DOM2级事件处理程序，采用removeEventListener()，删除时传入的参数必须和绑定时传入的参数相同，不能传入匿名函数。
ps：IE8和IE8以下的版本不支持addEventListener()，而是采用attachEvent()来实现事件绑定。目前只有IE和Opera支持attachEvent()。IE9支持addEventListener()，同时也兼容IE8的attachEvent()方法，但是IE9和IE8对attachEvent()的实现有点不同。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
腾讯云开发者
