zoukankan      html  css  js  c++  java
  • javascript 事件的一点感悟

    javascript 冒泡事件的理解一般是这样的:

    比方页面上有一个BODY里面包含一个DIV,DIV中包含一个BUTTON。在BODY,DIV,BUTTON中都有一个ONCLICK事件,在BUTTON中又有一个ONCLICK事件。那么我单击BUTTON时会先执行BUTTON中的事件

    然后再执行DIV 的事件再执行BODY中的事件.这就是JAVASCRIPT的事件冒泡了。JQUERY好像就只支持这种事件的冒泡。

    但如果我想先执行BODY中的单击事件再执行BUTTON中的单击事件,应该怎么办呢?

    以下是我的事件监听代码:

    <html>
       <head>
          <title></title>
       </head>
       
       <body id='bodye'>
       <input type="button" value="test" id="test" />
       </body>
       <script type="text/javascript">
           function bodyEvent(){
              alert('body');
           }
           function buttonEvent(){
               alert('button');
           }
           document.body.onclick=bodyEvent;
           document.getElementById("test").onclick=buttonEvent;
                         //按以上的写法,会先弹出BUTTON,再弹出BODY
                       
        
       </script>
    </html>
    document.body.addEventListener("click", function(){
                alert(this.id);
            }, false);
           document.getElementById("test").addEventListener("click",function(){
                alert(this.id);
           },true);
           document.getElementById("div").addEventListener("click",function(){
                alert(this.id);
           },true);

    这里我强行的添加一个事件的监听,注意true与false这个参数,就可以打破原来的事件冒泡流了。TRUE则先执行外层的事件,如果是FALSE则保留原来的
    执行方式。

  • 相关阅读:
    Linux PXE无人值守网络装机
    Linux 自动化部署DNS服务器
    Linux DNS服务配置
    Mysql数据库基础学习笔记
    Linux AIDE(文件完整性检测)
    mysql:[Err] 1068
    sql的date、时间函数、时间戳
    hive之建立分区表和分区
    excel转sql代码
    spark-submit之使用pyspark
  • 原文地址:https://www.cnblogs.com/msql/p/3230065.html
Copyright © 2011-2022 走看看