您的位置: 首页  >  IT文章  >  jQuery事件

jQuery事件

分类: IT文章 • 2023-11-17 08:10:55

加载DOM

    <script type="text/javascript">
        function one() {
            alert("one");
        }

        function two() {
            alert("two");
        }
        /*
        jQery加载DOM就绪后就能注册事件，而JS加载DOM完成后才能注册事件
        jQuery加载DOM就绪注册事件
        */
        //方式一
        $(document).ready(function () {
            one();
        })
        $(document).ready(function () {
            two();
        })
        方式二
        $(function () {
            one();
        })
        $(function () {
            two();
        })
        //方式三
        $().ready(function () {
            one();
        })
        $().ready(function () {
            two();
        })
    </script>
View Code

绑定事件

<script type="text/javascript">
        //绑定单击事件
//        $(function () {
//            $("#panel h5.head").bind("click", function () {  //给<h5>绑定click事件
//                //$(this).next("div.content").show();  //点击后显示文本内容

//                if ($(this).next("div.content").is(":visible")) {  //判断是否显示
//                    $(this).next("div.content").hide();
//                } else {
//                    $(this).next("div.content").show();
//                }
//            });
//        });
        //绑定鼠标事件()
//        $(function () {
//            $("#panel h5.head").bind("mouseover", function () {  //给<h5>绑定click事件
//                $(this).next("div.content").show();
//                    }).bind("mouseout",function(){
//                        $(this).next("div.content").hide();
//                        });
//                });
        //简写上述事件
//        $(function () {
//            $("#panel h5.head").mousemove(function () {
//                $(this).next("div.content").show();
//            }).mouseout(function () {
//                $(this).next("div.content").hide();
//            });
//        })
        //合成事件
        //hover(function1(),function2()) //模拟光标悬停事件，移动到元素时触发第一个函数，移除元素时触发第二个函数
//        $(function () {
//            $("#panel h5.head").hover(function () {
//                $(this).next("div.content").show();
//            }, function () {
//                $(this).next("div.content").hide();
//            });
//        });

        //toggle(fn1,fn2,fn3) //第一次单击触发第一个函数，第二次触发第二个，依次。。。
//        $(function () {
//            $("#panel h5.head").toggle(function () {
//                $(this).next("div.content").show();
//            }, function () {
//                $(this).next("div.content").hide();
//            });
//        });
        //toggle() 点击切换元素的可见状态
        $(function () {
            $("#panel h5.head").toggle(function () {
                $(this).addClass("highlight"); //添加class为"highlight"的样式
                $(this).next("div.content").toggle();
            }, function () {
                $(this).removeClass("highlight"); //移除class为"highlight"的样式
                $(this).next("div.content").toggle();
            })
        });

        //one()绑定事件，点击以后自动移除，只能点击一次
        $(function () {
            $("#button").one("click", function () { 
                //执行操作
            })
        })

        //绑定多个事件
        $(function () {
            $("div").bind("mouseover mouseout", function () {
                $(this).toggleClass("over"); //切换样式
            });
        });


    </script>
View Code

事件冒泡（事件对象）

    <%--事件冒泡 --%>
    <script type="text/javascript">
        //点击内层绑定事件 外层也被触发
//        $(function () {
//            $("span").bind("click", function () {
//                var txt = $("#msg").html() + "<p>内层span元素被单击</p>";
//                $("#msg").html(txt);
//            });
//            $("#content").bind("click", function () {
//                var txt = $("#msg").html() + "<p>外层div元素被单击</p>";
//                $("#msg").html(txt);
//            });
//            $("body").bind("click", function () {
//                var txt = $("#msg").html() + "<p>body元素被单击</p>";
//                $("#msg").html(txt);
//            });
//        });
        //停止冒泡事件
        $(function () {
            $("span").bind("click", function (event) {
                var txt = $("#msg").html() + "<p>内层span元素被单击</p>";
                $("#msg").html(txt);
                //事件对象
                event.stopPropagation();  //停止冒泡事件 可用return false 替换
                event.preventDefault(); //组织默认行为(提交表单) 可用return false 替换
                event.type();  //获取事件类型
                event.target(); //获取触发事件的元素
                event.relatedTarget(); //获取mouseover和moveout的触发元素
                event.pageX(); //获取光标相对于页面X的坐标
                event.pageY(); //获取光标相对于页面Y的坐标
                event.which(); //获取点击鼠标的按键：1=左，2=中，3=右
                event.metaKey(); //获取Ctrl键
                event.originalEvent(); //获取原始的事件对象
            });
            $("#content").bind("click", function () {
                var txt = $("#msg").html() + "<p>外层div元素被单击</p>";
                $("#msg").html(txt);
            });
            $("body").bind("click", function () {
                var txt = $("#msg").html() + "<p>body元素被单击</p>";
                $("#msg").html(txt);
            });
        });
        
        
    </script>
View Code

移除事件

 <%--移除事件 --%>
    <script type="text/javascript">
        //同一个元素绑定多个事件
        $(function () {
            $("#button").bind("click", function () {
                //绑定函数1
            }).bind("fous", function () {
                //绑定函数2 
            })
        })
        
        //为绑定的click事件指定变量
        $(function(){
            $("#button1").click(myFun=function(){
                //执行操作
            })
        })

        //b移除按钮上以前注册的事件
        $("#delAll").click(function () {
            $("#button1").unbind(); //点击id为delAll的按钮移除id为button1按钮的事件 移除全部事件

            $(#button1).unbind("click",myFun) ; //删除绑定的myFun事件
        })
    </script>
View Code

模拟事件（自动触发）

  <%--模拟事件(自动触发) --%>
    <script type="text/javascript">
        $(function () {
            $("#panel h5.head").click(function () {
                $(this).next("div.content").show();
            });
            $("#panel h5.head").trigger("click");  //自动点击
        });
        
    </script>
View Code

添加事件的命名空间

 <%--添加事件的命名空间 --%>
    <script type="text/javascript">
        $(function () {
            $("div").bind("click.plugin", function () {
                $("body").append("<p>click事件</p>");
            }).bind("mouseover.plugin", function () {
                $("body").append("<p>moveover事件</p>");
            }).bind("mouseout", function () {
                $("body").append("<p>mouseout事件</p>");
            })

            $("#button1").click(function () {
                $("div").unbind(".plugin"); //移除命名空间是.plugin的事件

                $("div").unbind("click!"); //移除不包含命名空间的click
            })
        });
    </script>
View Code

相关推荐