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

最新推荐文章于 2023-05-10 23:00:17 发布

约德尔蒙

最新推荐文章于 2023-05-10 23:00:17 发布

阅读量1.2k

点赞数

分类专栏： JQuery（以及源码解读）

本文链接：https://blog.csdn.net/gyq04551/article/details/53262495

版权

JQuery（以及源码解读）专栏收录该内容

23 篇文章 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>

约德尔蒙

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jquery事件的绑定解绑触发对象

//------------------------事件绑定与解绑的几种方法------------------------------------------ //这种绑定事件的方法是不会层叠的。 // $(document).click(function () { // alert(1
复制链接

扫一扫