JS事件冒泡

末蓝、 2021-12-24 06:19 284阅读 0赞

**事件冒泡**

**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.οnlοad=function(){
     2     document.getElementById("c").οnclick=function(){
     3         alert("c的事件")
     4     }
     5     document.getElementById("b").οnclick=function(){
     6         alert("b的事件")
     7     }
     8     document.getElementById("a").οnclick=function(){
     9         alert("a的事件")
    10     }
    11 }

**Demo:** 阻止事件冒泡

1 window.οnlοad=function(){
     2     document.getElementById("c").οnclick=function(){
     3         alert("c的事件")
     4     }
     5     document.getElementById("b").οnclick=function(){
     6         alert("b的事件")
     7         //使用内置对象阻止事件冒泡
     8         event.stopPropagation();
     9     }
    10     document.getElementById("a").οnclick=function(){
    11         alert("a的事件")
    12     }
    13 }

**Demo:** 事件绑定的另外方式 : 监听绑定

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

转载于:https://www.cnblogs.com/yslf/p/10797112.html