JQuery

jquery事件绑定和解绑

2020-12-29 11:52发布

站内文章 / jQuery
924 0 0

  • 事件的绑定和解绑

     <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>1234567891011121314151617181920212223242526272829303132

运行效果：

在这里插入图片描述

在这里插入图片描述


作者：水巷石子

链接：https://libolin.blog.csdn.net/article/details/108659650

来源：CSDN
著作权归作者所有，转载请联系作者获得授权，切勿私自转载。