jquery事件的绑定解绑触发对象

谁借莪１个温暖的怀抱￠ 2022-07-14 00:40 189阅读 0赞

<!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
        <script>
    //------------------------事件绑定与解绑的几种方法------------------------------------------
    
                //这种绑定事件的方法是不会层叠的。
                //        $(document).click(function () {
                //            alert(1);
                //        });
                //        $(document).click(function () {
                //            alert(2);
                //        });
    //                   解绑
    //                     $(document).unbind("mouseenter");
    
    
                //第二种绑定：bind
                //        $(document).bind("click mouseenter", function () {
                //            alert(1);
                //        })
                //        $(document).bind("click mouseenter", function () {
                //            alert(2);
                //        });
    
                //第三种
                //        $(document).delegate(".box","click mouseenter", function () {
                //            alert(1);
                //        });
    
            //            解绑
            //           $(document).undelegate(".box","mouseenter",fn)
    
                //第四种(重点)
                //        $(document).on("click mouseenter",".box",{"name":111}, function (event) {
                //            alert(event.data.name);
                //        });
                //        $(document).on("click",".box", function () {
                //           alert(1);
                //        });
    
    //                       解绑
    //                      $(document).off("mouseenter",".box");
    
    
    //------------------------------事件触发-------------------------------------------------
    
                $(function () {
                //            $(document).on("click mouseenter", function () {
                //                alert("页面被点击了");
                //            });
    
                    //事件触发(1)(触发浏览器行为)
                //            $(document).click();
                //            $(document).mouseenter();
    
                    //事件触发(2)(触发浏览器行为)
                //            $(document).trigger("mouseenter");
                //            $(document).trigger("click");
    
                    //事件触发(3)(不触发浏览器行为)
                //            $(document).triggerHandler("mouseenter");
                //            $(document).triggerHandler("click");
    
                    $("input").on("focus", function () {
                        alert("我获取了焦点！");
                    });
    
                    //事件触发(2)(触发浏览器行为)(执行程序，触动事件)
                //            $(document).click(function () {
                //                $("input").trigger("focus");
                //            });
    
    
                    //事件触发(3)(不触发浏览器行为)(只执行程序，不触动事件)
                    $(document).click(function () {
                        $("input").triggerHandler("focus");
                    });
                });
    
    
    //------------------------------------事件对象-------------------------------------------------
    
                $(function () {
                    $(document).on("click", {},function (e) {
                        console.log(e.data);
                        console.log(e.currentTarget );
                        console.log(e.target );
                        console.log(e.pageX );
                        console.log(e.type );
                        console.log(e.which );
                        console.log(e.keyCode);
                    });
                })
        </script>
    </head>
    <body>
    
        <input type="text"/>
    </body>
    </html>