轉載自:http://www.cnblogs.com/ishenghuo/p/4266850.htmljavascript
這兩個方面的知識,在妙味課堂中有聽過,再次複習一下:html
原文來自:【http://www.cnblogs.com/Essence/p/4266618.html】java
在說事件冒泡以前,咱們先說說事件對象(Event)jquery
/* 封裝Event對象 IE:window.event */ function getEvent(event){ return event?event:window.event; }
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>事件冒泡</title> <meta name="description" content=""> <meta name="keywords" content=""> <link href="" rel="stylesheet"> <style> .one{ width:400px; height:100px; border:1px solid #333; } .two{ height:35px; line-height:35px; padding-left:15px; border:1px solid red; } .three{ padding:10px; background-color: green; border:1px solid #999; cursor:pointer; } </style> <script src = "http://code.jquery.com/jquery-1.11.2.min.js"></script> <script> $(function(){ $(".one").click(function(event) { alert($(this).text()); }); $(".two").click(function(event) { alert($(this).text()); }); $(".three").click(function(event) { alert($(this).text()); }); }); </script> </head> <body> <div class="one"> 我是one(div) <p class="two"> 我是two(p) <span class="three">我是three(span)</span> </p> </div> </body> </html>
當在span、p、div元素上各綁定一個click事件,當單擊span元素時,會依次觸發三個事件,即span、p、div元素上的click事件,這就是事件冒泡,按照DOM層次結構像水泡同樣不斷向上直至頂端chrome
/* 封裝事件冒泡函數: document.all:判斷瀏覽器是不是IE IE:cancelBubble Firefox:stopPropagation */ function stopPropagation(e){ var e = window.event || e; if(document.all){ e.cancelBubble = true; }else{ e.stopPropagation(); } }
/* 封裝阻止元素的默認行爲函數 IE:returnValue DOM:preventDefault */ function preventDefaultAction(event){ var event = window.event || event; if(document.all){ //支持IE event.returnValue = false; }else{ //IE不支持 event.preventDefault(); } }