dom 拷贝和移动后事件还在么? 有更新!

  cheney

    为了验证 dom 被拷贝或移动后,绑定的事件还在不在,我写了以下示例。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8"><!--more-->
        <title>测试事件会不会被移动和拷贝</title>
    </head>
    <body>
    
    
    <div id="source">
      <div>
        <button class="btn">btn1</button>
        <button onclick="btn2clk()">btn2</button>
      </div>
    </div>
    
    
    <div id="copy" style="background-color: #8a6d3b"></div>
    
    
    <div id="deepcopy" style="background-color: #9acfea"></div>
    
    
    
    
    <div id="move" style="background-color: #42b983"></div>
    
    
    <script src="jquery.js"></script>
    <script>
    
    
      function btn2clk() {
        alert("btn2clk")
      }
    
    
      $(function () {
    
    
        $("#source .btn").click(function () {
          alert("btn1clk")
        })
    
    
        $("#source div").clone().appendTo($("#copy"))
    
    
        $("#source div").clone(true).appendTo($("#deepcopy"))
    
    
    
    
        $("#source div").appendTo($("#move"))
    
    
    
    
      })
    
    
    </script>
    
    
    </body>
    </html>
    
    
    

    经验证,直接使用 onclick 这种形式定义的事件,移动和 copy 之后还是存在的。

    动态绑定的事件,浅拷贝之后不见了,深拷贝之后还是在的。