js基础-事件的冒泡

事件的冒泡

div
百度

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>js基础-事件的冒泡</title> <style type="text/css"> </style> </head> <body> <span>事件的冒泡</span> <hr> <div id="div1" >div<br> <a href="http://baidu.com" id="a1">百度</a><br> <button id="btn1">按钮</button> </div>  <hr/> <script type="text/javascript"> var div1 = document.getElementById("div1"); var btn1 = document.getElementById("btn1"); var a1 = document.getElementById("a1"); div1.addEventListener("click",divgo); btn1.addEventListener("click",btngo); a1.addEventListener("click",showA); //document.getElementById('sp1').innerHTML='sp1内容被替换'; function btngo(){ alert("button"); event.stopPropagation();//阻止冒泡 } function divgo(){//替换图片 alert("div"); } function showA(event){ event.stopPropagation();//阻止冒泡 event.preventDefault();//阻止默认动作 //超链接在离开页面前，会先冒泡。 } </script> </body> </html>