dom 拷贝和移动后事件还在么?
札记    javascript    2017-02-19 13:19:46    361    0    0

为了验证 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 之后还是存在的。

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

文档导航