jQuery学习笔记12-绑定及解绑事件

港控/mmm° 2024-04-17 18:40 82阅读 0赞

一、绑定事件

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>jQuery事件绑定</title>
        <script src="jQuery/jquery-1.12.4.js"></script>
        <script>
            $(function () {
                /*jQuery绑定事件的两种方式
                *1. eventName(fn);
                * 可自动联想，编码效率高
                * 不支持JavaScript的部分事件
                *2. on("eventName",fn);
                *不支持自动联想，编码效率低
                * 支持JavaScript的所有事件
                *
                * 注意：jQuery可以同时绑定多个事件，且事件之间不会被覆盖
                *
                * */
                $("button").click(function () {
                    alert("弹框")
                });
                $("button").on("click",function () {
                    alert("弹框2")
                })
    
            })
        </script>
    </head>
    <body>
    <button>我是按钮</button>
    </body>
    </html>

2.解绑事件

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>jQuery事件解绑</title>
        <script src="jQuery/jquery-1.12.4.js"></script>
        <script>
            $(function () {
                /*绑定事件*/
                var test = function () {
                    alert("弹框")
                };
                $("button").click(test);
                $("button").on("click", function () {
                    alert("弹框2")
                });
                /*
                * 解绑事件使用off方法 */
            //    不传入参数,解绑button的所有事件
            //     $("button").off();
            //    传入一个参数，解绑button所有click的事件
            //     $("button").off("click");
            //    出入两个参数，解绑button所有click回调函数为test的事件
                $("button").off("click",test);
    
            })
            
        </script>
    </head>
    <body>
    <button>我是按钮</button>
    </body>
    </html>