jQuery off()方法解除绑定事件

既然存在绑定事件,那肯定也存在对应的解绑事件。绑定事件和解绑事件是相反的操作。在 jQuery 中,我们可以使用 off() 方法来解除元素绑定的事件。jQuery 的 off() 方法,有点类似于 JavaScript 的 removeEventListener() 方法。

语法:

$().off(type)

type 是可选参数,它是一个字符串,表示事件类型。例如单击事件是 "click",按下事件是 "mousedown",以此类推。如果参数被省略,就表示移除当前元素中的所有事件。

off() 方法不仅可以用来解除使用“基本事件”方式添加的事件,还可以用来解除使用“绑定事件”方式添加的事件。

举例:解除使用“基本事件”方式添加的事件

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
        $(function () {
            //添加事件
            $("#btn").click(function(){
                alert("C语言中文网,给你初恋般的感觉")
            })
            //解绑事件
            $("#btn_off").click(function(){
                $("#btn").off("click");
            });
        })
    </script>
</head>
<body>
    <input id="btn" type="button" value="按钮"><br/>
    <input id="btn_off" type="button" value="解除"/>
</body>
</html>

预览效果如图 1 所示。

解除使用“基本事件”方式添加的事件
图 1:解除使用“基本事件”方式添加的事件

当我们点击【解除】按钮后,就会把第一个按钮所绑定的 click 事件解除。

举例:解除使用“绑定事件”方式添加的事件

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        input{margin-bottom: 6px;}
    </style>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
        $(function () {
            //添加事件
            $("#btn").on("click", function(){
                alert("C语言中文网,给你初恋般的感觉")
            })
            //解绑事件
            $("#btn_off").click(function(){
                $("#btn").off("click");
            });
        })
    </script>
</head>
<body>
    <input id="btn" type="button" value="按钮"><br/>
    <input id="btn_off" type="button" value="解除"/>
</body>
</html>

预览效果如图 2 所示。

解除使用“绑定事件”方式添加的事件
图 2:解除使用“绑定事件”方式添加的事件

当我们点击【解除】按钮后,就会把第一个按钮所绑定的 click 事件解除。学了那么多,我们自然而然就会问:解绑事件都有什么用呢?一般情况下我们都是添加完事件就行了,没必要去解除事件啊!其实大多数情况确实如此,但是还有不少情况是必须要解除事件的。

实际开发中,如果想要实现拖曳效果,我们在 mouseup 事件中就必须要解除 mousemove 事件,如果没有解除就会有 bug。当然,实现拖曳效果是比较复杂的,这里不详细展开。对于解绑事件,我们学到后面就会更清楚它的作用。

原创文章,作者:奋斗,如若转载,请注明出处:https://blog.ytso.com/23831.html

(0)
上一篇 2021年7月20日
下一篇 2021年7月20日

相关推荐

发表回复

登录后才能评论