Javascript中的事件冒泡

这是一个基础性的文章，使用Javascript观察DOM中的事件冒泡机制，并介绍如何阻止默认行为和如何组织事件冒泡的方法。

1. 第一个例子可以在Firefox下运行

< div  id ="container1"  onclick ="alert('click container1');" >
     < div  id ="container2"  onclick ="alert('click container2');" >
         < a  href ="http://www.google.com"  target ="_blank"  onclick ="fn1(event);" > Google </ a >
         < a  href ="http://www.google.com"  target ="_blank"  onclick ="fn2(event);" > Google </ a >
         < a  href ="http://www.google.com"  target ="_blank"  onclick ="fn3(event);" > Google </ a >
         < a  href ="http://www.google.com"  target ="_blank"  onclick ="fn4(event);" > Google </ a >
     </ div >
</ div >

 

function  fn1(event) {
    alert( ' click google ' );
}

function  fn2(event) {
    alert( ' click google ' );
    event.preventDefault();
}

function  fn3(event) {
    alert( ' click google ' );
    event.stopPropagation();
}

function  fn4(event) {
    alert( ' click google ' );
    event.preventDefault();
    event.stopPropagation();
}

 

点击第一个链接，alert_google -> alert_container2 -> alert_container1 -> open_google_page

点击第二个链接，alert_google -> alert_container2 -> alert_container1

点击第三个链接，alert_google -> open_google_page

点击第四个链接，alert_google

 

可以看到，事件冒泡是从最初引发事件的HTML节点开始，一步步向上引发父节点的相同事件。

在Firefox中，我们可以通过 preventDefault 函数阻止默认的行为（比如这个例子中，点击链接的默认行为是打开链接地址）

通过 stopPropagation 函数阻止事件冒泡。

 

相同的过程在IE下的实现有点不同，一是事件对象（event）在IE下是作为 window 对象的一个属性，

二是阻止事件的默认行为或阻止事件冒泡的做法也有所不同，请看：

2. 观察IE下的事件冒泡

 

< div  id ="container1_ie"  onclick ="alert('click container1');" >
     < div  id ="container2_ie"  onclick ="alert('click container2');" >
         < a  href ="http://www.google.com"  target ="_blank"  onclick ="fn1_ie();" > Google </ a >   < a
             href ="http://www.google.com"  target ="_blank"  onclick ="fn2_ie();" > Google </ a >
         < a  href ="http://www.google.com"  target ="_blank"  onclick ="fn3_ie();" > Google </ a >   < a
             href ="http://www.google.com"  target ="_blank"  onclick ="fn4_ie();" > Google </ a >
     </ div >
</ div >

 

function  fn1_ie() {
    alert( ' click google ' );
}

function  fn2_ie() {
    alert( ' click google ' );
    event.returnValue  =   false ;
}

function  fn3_ie() {
    alert( ' click google ' );
    event.cancelBubble  =   true ;
}

function  fn4_ie() {
    alert( ' click google ' );
    event.returnValue  =   false ;
    event.cancelBubble  =   true ;
}

 

同样：

点击第一个链接，alert_google -> alert_container2 -> alert_container1 -> open_google_page

点击第二个链接，alert_google -> alert_container2 -> alert_container1

点击第三个链接，alert_google -> open_google_page

点击第四个链接，alert_google

 

代码下载