事件冒泡
Demo: 冒泡现象
html:
1 <script src="index.js"></script> 2 <style> 3 #c{ 4 background-color:pink; 5 height:100px; 6 width:100px; 7 } 8 #b{ 9 background-color:black; 10 height:200px; 11 width:200px; 12 } 13 #a{ 14 background-color:blue; 15 height:300px; 16 width:300px; 17 } 18 </style> 19 </head> 20 <body> 21 <div id="a"> 22 <div id="b"> 23 <div id="c"> 24 25 </div> 26 </div> 27 </div> 28 </body>
js:
1 window.onload=function(){ 2 document.getElementById("c").onclick=function(){ 3 alert("c的事件") 4 } 5 document.getElementById("b").onclick=function(){ 6 alert("b的事件") 7 } 8 document.getElementById("a").onclick=function(){ 9 alert("a的事件") 10 } 11 }
Demo: 阻止事件冒泡
1 window.onload=function(){ 2 document.getElementById("c").onclick=function(){ 3 alert("c的事件") 4 } 5 document.getElementById("b").onclick=function(){ 6 alert("b的事件") 7 //使用内置对象阻止事件冒泡 8 event.stopPropagation(); 9 } 10 document.getElementById("a").onclick=function(){ 11 alert("a的事件") 12 } 13 }
Demo: 事件绑定的另外方式 : 监听绑定
1 window.onload=function(){ 2 document.getElementById("c").addEventListener("click", function(){ 3 alert("c的事件") 4 }) 5 document.getElementById("b").addEventListener("click", function(){ 6 alert("b的事件") 7 }) 8 9 document.getElementById("a").addEventListener("click", function(){ 10 alert("a的事件") 11 }) 12 }
Demo: var 关键字的使用
若果在函数中使用 var 声明变量则是一个局部变量
如果不适用 var 声明则是一个全局变量, 在函数之外还是可以使用