zoukankan      html  css  js  c++  java
  • 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 声明则是一个全局变量, 在函数之外还是可以使用

  • 相关阅读:
    margin:0 auto是什么意思
    CSS border-collapse 属性
    CSS-水平和垂直居中
    jQuery 事件
    移动端Html5控制布局
    CSS :root 测试
    SQL 读取XML到Datatable
    微信小程序 table 简单测试
    微信小程序 JS 获取View 和 屏幕相关属性(高度、宽度等等)
    JavaScript(正则表达式一)
  • 原文地址:https://www.cnblogs.com/yslf/p/10797112.html
Copyright © 2011-2022 走看看