jquery事件绑定和解绑

jquery事件绑定和解绑

  • 事件的绑定和解绑

    <input id="btnId" type="button" onclick="clickFn()" value="点我,弹框"/>

  • 方式1:在标签中写死

    • function clickFn(){}
  • 方式2:在程序中动态绑定,但是不能解绑

    • $("#btnId").click(function(){});
  • 方式3:在程序中动态绑定,可以解绑

    • $("#btnId").on(“click”,function(){});

    • $("#btnId").on(“mouseover”,function(){});

  • 这种绑定事件的方式可以解绑

    • $("#btnId").off(“click”);

    • $("#btnId").off(“mouseover”);jQuery元素对象.off(事件名称);//如果off不加参数,表示解除所有事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="js/jquery-3.3.1.js"></script>
</head>
<script type="application/javascript">
    $(function () {
     
     
        $("#btnId3").on("click", function () {
     
     
            alert("jquery绑定");
        });

        $("#btnId4").on("click", function () {
     
     
            //解绑
            /*
               如果off加参数,表示解绑的是某一个事件,
               如果off不加参数,表示解除所有事件
             */
            alert("jquery解绑");
            $("#btnId3").off("click");
        })
    });

</script>
<body>

<input id="btnId3" type="button" value="点我-jquery绑定"/>
<input id="btnId4" type="button" value="点我-解绑"/>

</body>
</html>

运行效果:

在这里插入图片描述

在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/qq_37924905/article/details/108659650
今日推荐