浅谈jquery之on()绑定事件和off()解除绑定事件
什么是on()和off()方法
在jQuery中，on()和off()是绑定和解除绑定事件的方法。它们是jQuery事件处理的基础方法，使得我们能够对元素进行事件监听和处理。
on()方法
$(selector).on(event, childSelector, data, function);
语法说明
- selector：需要绑定事件的元素。
- event：需要绑定的事件，可以是jQuery封装的标准事件，也可以是自定义事件。
- childSelector：指定了子元素，例如
".child"，只有子元素触发时才会执行函数。 - data：传递给事件处理函数的数据，可以是任意类型的对象。
- function：事件处理函数。
off()方法
$(selector).off(event, childSelector, function);
语法说明
- selector：需要解除事件绑定的元素。
- event：需要解除绑定的事件，可以是jQuery封装的标准事件，也可以是自定义事件。
- childSelector：指定了子元素，例如
".child"，只有子元素触发时才会解除事件绑定。 - function：需要解除绑定的事件处理函数。
on()方法的示例说明
示例一
<html>
<head>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script>
$(document).ready(function () {
$("p").on("click", function () {
alert("Hello world!");
});
});
</script>
</head>
<body>
<p>Click me!</p>
</body>
</html>
在这个例子中，我们绑定了一个点击事件，当<p>元素被点击时，它将弹出一个Hello world!的提示框。
示例二
<html>
<head>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script>
$(document).ready(function() {
$("body").on("click", "a", function(event) {
event.preventDefault();
$(this).hide();
});
});
</script>
</head>
<body>
<a href="#">Click me to hide!</a>
</body>
</html>
在这个例子中，我们首先选择了body元素来绑定事件，然后由于我们想监听<a>标签的事件，所以在这里使用了"a"作为childSelector参数。当<a>标签被点击时，我们调用了event.preventDefault()来阻止点击事件的默认行为，这里既是阻止链接跳转。然后我们使用jQuery的hide()函数隐藏了链接元素。
off()方法的示例说明
示例一
<html>
<head>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script>
$(document).ready(function () {
var hello = function() {
alert("Hello world!");
};
$("p").on("click", hello);
$("button").click(function () {
$("p").off("click", hello);
});
});
</script>
</head>
<body>
<p>Click me!</p>
<button>Cancel Event Listener</button>
</body>
</html>
在这个例子中，我们定义了一个事件处理函数hello，并在<p>元素上绑定了点击事件，当点击<p>元素时，将弹出Hello world!的提示框。我们在按钮上绑定了一个点击事件，这个事件将调用off()方法来解除在<p>元素上的事件监听。
示例二
<html>
<head>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script>
$(document).ready(function () {
var hello = function() {
alert("Hello world!");
};
$("p").on("click", hello);
$("button").click(function () {
$("p").off("click");
});
});
</script>
</head>
<body>
<p>Click me!</p>
<button>Cancel Event Listener</button>
</body>
</html>
在这个例子中，我们使用了off()的简化形式，只传递了一个事件名称而没有传递事件处理函数。这样，所有绑定在<p>元素上的点击事件都会被解除。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：浅谈jquery之on()绑定事件和off()解除绑定事件 - Python技术站
微信扫一扫 
支付宝扫一扫 