事件的冒泡
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> <!-- 事件的冒泡,对象激活事件,会向上传递给父元素。 如果不终止冒泡,则会一直向上传递。 使用event.stopPropagation();阻止继续向上冒泡。 如果我们想阻止对象的默认行为,如<a>标签中的超链接 我们可以使用event.preventDefault() --> <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>