jQuery—事件的绑定和解除绑定

最新推荐文章于 2024-05-18 18:58:15 发布

何迟

最新推荐文章于 2024-05-18 18:58:15 发布

阅读量2.8k

点赞数

CC 4.0 BY-SA版权

分类专栏： jQuery

本文链接：https://blog.youkuaiyun.com/qq_42036616/article/details/81904547

jQuery 专栏收录该内容

11 篇文章

订阅专栏

本文介绍了一个使用HTML和jQuery实现按钮点击事件的例子。通过jQuery的on和off方法，演示了如何为同一个按钮绑定和取消绑定多个点击事件。具体展示了三个不同的点击响应函数及其效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

HTML代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>练习</title>
    <script src="jquery-3.3.1.js"></script>
    <script src="text3.js"></script>
    <!--库的引用必须要先于自己的-->
</head>
<body>
      <button>老哥，点我</button>
</body>
</html>

JS代码：

$(document).ready(function () {
    $("button").on("click",clickShow1);
    $("button").on("click",clickShow2);
    $("button").on("click",clickShow3);
    $("button").off("click",clickShow3);
});
//绑定方法，将做出反应的代码封装起来，提升代码的利用率，同时能减少内存的占用

//on表示绑定事件，off表示解除事件，事件绑定不会覆盖，如果一个事件绑定了多个方法，
// 解除默认全部解除，通过逗号隔开指定解除某个方法，老版本on和off用bind和unbind代替

function clickShow1(e) {
    alert("老哥")
}
function clickShow2(e) {
    alert("好玩吗")
}
function clickShow3(e) {
    alert("真有趣")
}

效果：