JQuery unbind

最新推荐文章于 2023-07-27 10:01:41 发布

花开不合阳春暮

最新推荐文章于 2023-07-27 10:01:41 发布

阅读量342

点赞数

分类专栏：日常积累文章标签： jquery unbind

本文链接：https://blog.csdn.net/wszcy199503/article/details/78589664

版权

日常积累专栏收录该内容

24 篇文章 0 订阅

订阅专栏

移除所有 p 元素的事件处理器：

$("button").click(function(){
  $("p").unbind();
});

定义和用法
unbind() 方法移除被选元素的事件处理程序。
该方法能够移除所有的或被选的事件处理程序，或者当事件发生时终止指定函数的运行。
ubind() 适用于任何通过 jQuery 附加的事件处理程序。

取消绑定元素的事件处理程序和函数
规定从指定元素上删除的一个或多个事件处理程序。
如果没有规定参数，unbind() 方法会删除指定元素的所有事件处理程序。

语法
$(selector).unbind(event,function)
event 可选。规定删除元素的一个或多个事件由空格分隔多个事件值。如果只规定了该参数，则会删除绑定到指定事件的所有函数。
function 可选。规定从元素的指定事件取消绑定的函数名。

使用 Event 对象来取消绑定事件处理程序
规定要删除的事件对象。用于对自身内部的事件取消绑定（比如当事件已被触发一定次数之后，删除事件处理程序）。
如果未规定参数，则 unbind() 方法会删除指定元素的所有事件处理程序。

示例：

<html>
<head>
    <script type="text/javascript" src="jquery.min.js"></script>
</head>
<body>
<input type="button" id="btn" value="点击我"/>
<input type="button" id="delAll" value="删除全部绑定函数"/>
<input type="button" id="delFun2" value="删除第二个绑定函数"/>
<br/>
<div class="info"></div>
<script type="text/javascript">
    $(document).ready(function () {
        // 为id为btn的按钮添加绑定事件
        $("#btn").bind('click', fun1 = function () {
            $(".info").append('<p>绑定函数1</p>');
        }).bind('click', fun2 = function () {
            $(".info").append('<p>绑定函数2</p>');
        }).bind('click', fun3 = function () {
            $(".info").append('<p>绑定函数3</p>');
        })
        $("#delAll").bind('click', function () {
            $("#btn").unbind(); //删除全部绑定事件
        })
        $("#delFun2").bind('click', function () {
            $("#btn").unbind('click', fun2);  //删除第二个绑定函数
        })
    })
</script>
</body>
</html>

语法
$(selector).unbind(eventObj)
eventObj 可选。规定要使用的事件对象。这个 eventObj 参数来自事件绑定函数。

示例：

<html>
<head>
    <script type="text/javascript" src="jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            var x=0;
            $("p").click(function(e){
                $("p").animate({fontSize:"+=5px"});
                x++;
                if (x>=2)
                {
                    $(this).unbind(e);
                }
            });
        });
    </script>
</head>
<body>
<p style="font-size:20px;">点击这个段落可以增加其大小。只能增加两次。</p>
</body>
</html>