事件冒泡和事件捕获

来源：互联网发布：javascript所有事件编辑：程序博客网时间：2024/04/29 11:07

事件冒泡和事件捕获示意图：

一、事件冒泡

实例：

<!doctype html><html><head><meta charset="utf-8"><title>事件冒泡</title><style>*{margin:0; padding:0;}</style><script type="text/javascript">window.onload = function(){var div1 = document.getElementsByTagName('div')[0];var oSpan = document.getElementsByTagName('span')[0];var oBody = document.getElementsByTagName('body')[0];oSpan.onclick = function(e){this.style.background = 'red';var ev = e || event;alert('red');}div1.onclick = function(e){this.style.background = 'green';var ev = e || event;alert('green');}oBody.onclick = function(e){this.style.background = 'blue';var ev = e || event;alert('blue');}}</script></head><body><div class="div1"> <span>测试事件冒泡</span></div></body></html>

结果依次弹出‘red’，‘green’，‘blue’，所以我们触发span元素，连同父级元素一起触发了，这就是事件冒泡。从里到外。

解决办法：阻止事件冒泡，但是有兼容问题，所以下面提供一个写好的无兼容问题的阻止冒泡函数

function stopBubble(e) {// 如果提供了事件对象，则这是一个非IE浏览器if ( e && e.stopPropagation ) {// 因此它支持W3C的stopPropagation()方法 e.stopPropagation();} else { // 否则，我们需要使用IE的方式来取消事件冒泡window.event.cancelBubble = true;}}

那解决上面span那个事件冒泡的代码，写好的在下面：

<!doctype html><html><head><meta charset="utf-8"><title>阻止事件冒泡</title><style>*{margin:0; padding:0;}</style><script type="text/javascript">window.onload = function(){var div1 = document.getElementsByTagName('div')[0];var oSpan = document.getElementsByTagName('span')[0];var oBody = document.getElementsByTagName('body')[0];oSpan.onclick = function(e){this.style.background = 'red';var ev = e || event;stopBubble(e);alert('red');}div1.onclick = function(e){this.style.background = 'green';var ev = e || event;alert('green');}oBody.onclick = function(e){this.style.background = 'blue';var ev = e || event;alert('blue');}//阻止事件冒泡的兼容性写法function stopBubble(e) {// 如果提供了事件对象，则这是一个非IE浏览器if ( e && e.stopPropagation ) {// 因此它支持W3C的stopPropagation()方法 e.stopPropagation();} else { // 否则，我们需要使用IE的方式来取消事件冒泡window.event.cancelBubble = true;}}}</script></head><body><div class="div1"> <span>测试事件冒泡</span></div></body></html>

这样的话，再点击时，只会触发span的事件，背景颜色变成红色。

有事件冒泡的话，就会有相反的事件捕获~~~~~

二、事件捕获

实例：

<!doctype html><html><head><meta charset="utf-8"><title>事件捕获</title><style>*{margin:0; padding:0;}</style><script type="text/javascript">window.onload = function(){var div1 = document.getElementsByTagName('div')[0];var oSpan = document.getElementsByTagName('span')[0];var oBody = document.getElementsByTagName('body')[0];oSpan.addEventListener('click',function(){this.style.background = 'red';alert('red');},true);div1.addEventListener('click',function(){this.style.background = 'green';alert('green');},true);oBody.addEventListener('click',function(){this.style.background = 'blue';alert('blue');},true);}</script></head><body><div class="div1"> <span>测试事件冒泡</span></div></body></html>

结果依次弹出‘blue’，‘green’，‘red’，所以我们触发span元素，会先触发最外层父级，在一直往里执行，这就是事件捕获。从外到里。

使用addEventListener绑定事件的时候，第三个参数为true表示捕获，为false表示事件冒泡。

阻止事件捕获：

<!doctype html><html><head><meta charset="utf-8"><title>阻止事件捕获</title><style>*{margin:0; padding:0;}</style><script type="text/javascript">window.onload = function(){var div1 = document.getElementsByTagName('div')[0];var oSpan = document.getElementsByTagName('span')[0];var oBody = document.getElementsByTagName('body')[0];oSpan.addEventListener('click',function(e){this.style.background = 'red';var e = e || event;alert('red');},true);div1.addEventListener('click',function(e){this.style.background = 'green';var e = e || event;alert('green');},true);oBody.addEventListener('click',function(e){this.style.background = 'blue';var e = e || event;stopBubble(e);alert('blue');},true);function stopBubble(e) {// 如果提供了事件对象，则这是一个非IE浏览器if ( e && e.stopPropagation ) {// 因此它支持W3C的stopPropagation()方法 e.stopPropagation();} else { // 否则，我们需要使用IE的方式来取消事件冒泡window.event.cancelBubble = true;}}}</script></head><body><div class="div1"> <span>测试事件冒泡</span></div></body></html>

显示结果：背景为蓝色，把往里传递的事件阻止了。

延伸

阻止事件默认行为;（因为像文字、图片等在浏览器中有默认行为，用下面写法去阻止）

无兼容写法：

function stopDefault( e ) {     // 阻止默认浏览器动作(W3C)     if ( e && e.preventDefault ) {         e.preventDefault();     } else {        // IE中阻止函数器默认动作的方式        window.event.returnValue = false;    }    return false;}

0 0