动态添加行为元素解绑事件 delegate的解绑事件 off的解绑事件

最新推荐文章于 2021-04-06 17:02:44 发布

Leon_Jinhai_Sun

最新推荐文章于 2021-04-06 17:02:44 发布

阅读量306

点赞数

本文链接：https://blog.csdn.net/Leon_Jinhai_Sun/article/details/86559468

版权

动态添加行

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
      * {
        padding: 0;
        margin: 0;
        font-size: 14px;
        font-family: Century Gothic;
      }
      .wrap {
        width: 410px;
        margin: 100px auto 0;
      }
      table {
        border-collapse: collapse;
        border-spacing: 0;
        border: 1px solid #c0c0c0;
        width: 400px;        
      }
      tr,td {
        /*width: 25%;*/
        height: 25px;
      }
      .btnAdd {
        width: 110px;
        height: 29px;
        font-size: 20px;
        font-weight: bold;
        margin-bottom: 20px;
      }
      .form_add_title span {
        width: auto;
        height: 18px;
        font-size: 20px;
        font-family: Century Gothic;
        font-weight: bold;
        color: rgb(102,102,102);
        text-indent: 12px;
        margin-right: 10px;
        display: block;
        text-align: center;
        padding: 8px 0px 10px;
        overflow: hidden;
        background-color: #F5F5F5;
      }
      .form_add {
        position: fixed;
        top: 29%;
        left: 50%;
        margin-left: -197px;
        padding-bottom: 20px;
        background-color: #fff;
        display: none;
        border: 1px solid #080;
        text-align: center;
      }
      .form_item > .txt {
        width: 299px;
        height: 32px;
      }
      .form_add_title div {
        width: 16px;
        height: 20px;
        position: absolute;
        right: 10px;
        top: 6px;
        font-size: 29px;
        line-height: 16px;
        cursor: pointer;
      }
      .form_submit input {
        margin-top: 20px;
        width: 169px;
        height: 32px;
      }
  </style>
  <script src="jquery-1.8.3.js"></script>
  <script>
     // 页面加载的事件
     $(function(){
        // 显示对话框
        $("#addData").click(function(){
            // 显示对话框
            $("#formAdd").show();
            // 显示遮挡层
            $("#j_mask").show();
        });
        function closeKuang(){          
            // 隐藏对话框
            $("#formAdd").hide();
            // 隐藏遮挡层
            $("#j_mask").hide();
        }
        // 点击x关闭对话框
        $("#j_hideFormAdd").click(function(){
            closeKuang();
        });

        // 添加数据的按钮
        $("#j_btnAdd").click(function(){
            // 先获取课程的文本框对象
            var j_txtLesson = $("#j_txtLesson");
            // 获取学院文本框的对象
            var j_txtBelSch = $("#j_txtBelSch");

            // 创建行和列并直接加入到tbody中
            $("<tr><td>"+j_txtLesson.val()+"</td><td>"+j_txtBelSch.val()+"</td><td><a href='javascript:;' class='get'>GET</a></td></tr>").appendTo($("#j_tbody"));
            // 关闭对话框
            closeKuang();
            // 清空课程的文本框
            j_txtLesson.val("");
            j_txtBelSch.val("前端与移动开发学院");
        });

        // 页面加载后就为a注册点击事件,使用的是on的方式
        $("#j_tbody").on("click",".get",function(){
            $(this).parent().parent().remove();
        });

     });
  </script>
</head>
<body>
<div class="wrap">
  <div>
    <input type="button" value="添加数据" id="addData" class="btnAdd">
  </div>
  <table border="1" cellpadding="0" cellspacing="0">
      <thead>
        <th>课程名称</th>
        <th>所属学院</th>
        <th>已学会</th>
      </thead>
      <tbody id="j_tbody">
        <tr>
          <td>JavaScript</td>
          <td>前端与移动开发学院</td>
          <td><a href="javascript:;" class="get">GET</a></td>
        </tr>
        <tr>
          <td>jQuery</td>
          <td>前端与移动开发学院</td>
          <td><a href="javascript:;" class="get">GET</a></td>
        </tr>
        <tr>
          <td>HTML5</td>
          <td>前端与移动开发学院</td>
          <td><a href="javascript:;" class="get">GET</a></td>
        </tr>
        <tr>
          <td>CSS</td>
          <td>前端与移动开发学院</td>
          <td><a href="javascript:;" class="get">GET</a></td>
        </tr>
      </tbody>
  </table>
</div>
<!-- 遮挡的div -->
<div id="j_mask" class="mask"></div>
<div id="formAdd" class="form_add">
    <div class="form_add_title">
        <span>添加数据</span>
        <div id="j_hideFormAdd">x</div>
    </div>
    <div class="form_item">
      <label class="lb" for="j_txtLesson">课程名称:</label>
      <input class="txt" type="text" id="j_txtLesson" placeholder="请输入课程名称">
    </div>    
    <div class="form_item">
      <label class="lb" for="j_txtBelSch">所属学院:</label>
      <input class="txt" type="text" id="j_txtBelSch" value="前端与移动学院">
    </div>
    <div class="form_submit">
      <input type="button" value="添加" id="j_btnAdd">
    </div>
</div>
  
</body>
</html>

为元素解绑事件

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
      div {
        width: 400px;
        height: 200px;
        background-color: green;
        cursor: pointer;
      }
  </style>
  <script src="jquery-1.12.1.js"></script>
  <script>
      $(function(){

          // 用什么方式绑定事件,最好用对应的方式解绑事件
          // unbind括号中写什么事件的名字就会把这个事件解绑,会把这个元素的
          // 这个点击的多个事件都会解绑
          // 对象.click()这种方式添加的事件也可以使用unbind解绑
          // 括号中没有任何参数,此时该元素的所有的事件全部解绑
          // 同时解绑多个事件----每个事件的名字中间用空格即可

          // 第一个按钮为div绑定事件
          $("#btn").click(function(){
              // div的点击事件
              $("#dv").bind("click",function(){
                  console.log("div被点了");
              }).bind("click",function(){
                  console.log("div点两次了");
              });
              // 鼠标进入
              $("#dv").bind("mouseenter",function(){
                  $(this).css("backgroundColor","blue");
              });
              // 鼠标离开
              $("#dv").bind("mouseleave",function(){
                  $(this).css("backgroundColor","pink");
              });
          });

          // $("#dv").click(function(){
          //     console.log("哈哈");
          // });

          // 第二个按钮为div解绑事件
          $("#btn2").click(function(){
              // 解绑的是点击事件
              // 解绑的是点击事件,所有的点击事件全部移除
              // $("#dv").unbind("click");
              // 括号中没有任何参数,此时该元素的所有的事件全部解绑
              // $("#dv").unbind();
              // 同时解绑多个事件
              $("#dv").unbind("mouseenter mouseleave");
          });
      });
  </script>
</head>
<body>
<input type="button" value="绑定事件" id="btn">
<input type="button" value="解绑事件" id="btn2">
<div id="dv"></div>
  
</body>
</html>

delegate的解绑事件

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
      div {
        width: 400px;
        height: 200px;
        background-color: green;
        cursor: pointer;
      }
      p {
        background-color: red;
        width: 80px;
      }
  </style>
  <script src="jquery-1.12.1.js"></script>
  <script>
      $(function(){
          // delegate绑定事件对应的方式的解绑方式

          // 点击第一个按钮,div有自己的点击事件,有鼠标进入和鼠标离开事件
          // 同时为p绑定点击事件

          $("#btn").click(function(){
              // 为div绑定事件
              $("#dv").click(function(){
                  console.log("div被点了");
              }).mouseenter(function(){
                  console.log("鼠标进来了");
              }).mouseleave(function(){
                  console.log("鼠标离开了");
              });
              // 在div中创建一个p,同时为p绑定点击事件
              $("<p>这是一个p</p>").appendTo($("#dv"));
              // 为p绑定事件
              $("#dv").delegate("p","click",function(){
                  console.log("啊,p被点了");
              });
              $("#dv").delegate("p","mouseenter",function(){
                  console.log("p的鼠标进入");
              });
          });

          // 第二个按钮解绑事件
          $("#btn2").click(function(){
              // p的点击事件没有了,移除了p的所有的事件
              // $("#dv").undelegate();
              // 移除的是p的点击事件
              // $("#dv").undelegate("p","click");
              // 可以移除多个事件,但是每个事件之间用空格隔开
              $("#dv").undelegate("p","click mouseenter");
          });

      });
  </script>
</head>
<body>
<input type="button" value="绑定事件" id="btn">
<input type="button" value="解绑事件" id="btn2">
<div id="dv">
  
</div>
  
</body>
</html>

off的解绑事件

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
      div {
        width: 400px;
        height: 200px;
        background-color: green;
        cursor: pointer;
      }
      p {
        background-color: red;
        width: 80px;
      }
  </style>
  <script src="jquery-1.12.1.js"></script>
  <script>
      $(function(){
          // delegate绑定事件对应的方式的解绑方式

          // 点击第一个按钮,div有自己的点击事件,有鼠标进入和鼠标离开事件
          // 同时为p绑定点击事件

          $("#btn").click(function(){
              // 为div绑定事件
              // 点击事件
              $("#dv").click(function(){
                  console.log("div被点了");
                  // 鼠标进入
              }).mouseenter(function(){
                  console.log("鼠标进来了");
                  // 鼠标离开
              }).mouseleave(function(){
                  console.log("鼠标离开了");
              });
              // 在div中创建一个p,同时为p绑定点击事件
              $("<p>这是一个p</p>").appendTo($("#dv"));
              // 为p绑定事件
              $("#dv").on("click","p",function(){
                  console.log("啊,p被点了");
              });
              $("#dv").on("mouseenter","p",function(){
                  console.log("啊,进入到p里面来了");
              });
              $("#dv").on("click","span",function(){
                  console.log("哦,span被点了");
              });
          });

          // 第二个按钮解绑事件
          $("#btn2").click(function(){
              // 解绑事件
              // 父级元素和子级元素的所有的事件全部解绑
              // $("#dv").off();
              // 把父级元素和子级元素的点击事件解绑
              // $("#dv").off("click");
              // 父级元素和子级元素的多个事件,中间用空格
              // $("#dv").off("click mouseenter");
              // 解绑p标签的点击事件
              // $("#dv").off("click","p");
              // p的两个事件都没了
              // $("#dv").off("click mouseenter","p");
              // p的所有的事件全部解绑
              // $("#dv").off("","p");
              // 干掉div中所有的子元素的点击事件
              $("#dv").off("click","**");
          });

          // 页面加载
          $(function(){
              // 为按钮绑定点击事件
              $("#btn1").on("click",function(){
                  console.log("哈哈,我又变帅了");
              });
          });

      });
  </script>
</head>
<body>
<input type="button" value="哈哈,我是按钮" id="btn1">
<input type="button" value="绑定事件" id="btn">
<input type="button" value="解绑事件" id="btn2">
<div id="dv">
  <span>这是span</span>
</div>
  
</body>
</html>

Leon_Jinhai_Sun

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
动态添加行为元素解绑事件 delegate的解绑事件 off的解绑事件

动态添加行<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> * { padding: 0; margin: 0;...
复制链接

扫一扫