jQuery 使用 jQuery 将事件从一个元素复制到另一个元素

在本文中，我们将介绍如何使用 jQuery 将事件从一个元素复制到另一个元素。复制事件可以方便地将一个元素上的事件行为复制到另一个元素上，以达到重用事件的目的。

1. 使用 on() 方法复制事件

在 jQuery 中，可以使用 on() 方法来绑定事件。通过将事件绑定到一个元素上，然后将这个元素的事件复制到另一个元素上，就可以实现事件的复制。

<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>

<button id="source">复制此按钮的点击事件</button>
<button id="target">将点击事件复制到此按钮上</button>

<script>
 $(document).ready(function(){$ ("#source").on("click", function(){
        alert("你点击了源按钮！");
    });

     $("#target").on("click", function(){$ ("#source").trigger("click");
    });
});
</script>

</body>
</html>

在上面的例子中，源按钮和目标按钮都绑定了点击事件。当点击目标按钮时，通过调用$("#source").trigger("click")来触发源按钮的点击事件，从而实现了事件的复制。

2. 复制特定的事件

有时候，我们可能只想复制某个特定的事件，而不是复制全部事件，这时可以使用 off() 方法来解除绑定以及使用 on() 方法来绑定事件。

<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>

<button id="source">复制此按钮的点击事件</button>
<button id="copy">复制到此按钮上</button>
<button id="unbind">解除绑定</button>

<script>
 $(document).ready(function(){$ ("#source").on("click", function(){
        alert("你点击了源按钮！");
    });

     $("#copy").on("click", function(){$ ("#copy").on("click", function(){
             $("#source").trigger("click"); }); });$ ("#unbind").on("click", function(){
        $("#copy").off("click");
    });
});
</script>

</body>
</html>

在上面的例子中，当点击复制按钮时，会将源按钮的点击事件复制到复制按钮上。点击解除绑定按钮时，会解除复制按钮上的点击事件。

3. 使用 clone() 方法复制元素

除了复制事件，我们还可以使用 clone() 方法来直接复制一个元素，从而继承该元素上的事件。

<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>

<div id="source">
    <button>点击</button>
</div>
<div id="target"></div>

<script>
 $(document).ready(function(){$ ("#source button").on("click", function(){
        alert("你点击了源按钮！");
    });

     $("#target").append($ ("#source").clone(true));
});
</script>

</body>
</html>

在上面的例子中，源和目标元素都都是 <div> 元素。源元素中包含一个按钮，绑定了点击事件。通过使用 clone() 方法将源元素复制到目标元素中，并设置参数为 true，实现了事件的复制。