JS事件冒泡

事件冒泡

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 声明则是一个全局变量, 在函数之外还是可以使用