四种绑定事件

Posted 2020-09-26 颢Blog

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了四种绑定事件相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>New Web Project</title>
    <style type="text/css">
        li{
            float:left;
            margin-left:50px;
            list-style:none;
        }
    </style>
    <script src="js/jQuery1.11.1.js"></script>
    <script src="js/jquery-migrate-1.2.0.js"></script>

    <script type="text/javascript">
        $(function () {
            //dom 2 级注册 bind()

            //live
            $("li").live({
                mouseover:function(){
                    $(this).css("background","pink");
                },
                mouseout:function(){
                    $(this).css("background","");
                }
            });

            $("li").die("mouseout");


            //on　　　　　　　　推荐使用
            /*     $("li").on({　　　　　　　　　　//选择元素
             mouseover:function(){　　　　　　　　　//将li和mouseover事件绑定
             $(this).css("background","pink");
             },
             mouseout:function(){　　　　　　　　　　//复合绑定mouseout
             $(this).css("background","");
             }
             });


             $("li").off("mouseout");　　　　　　//off()用来解除mouseout事件绑定
             */





            //delegate
            /*     $("ul").delegate("li",{
             mouseover:function(){
             $(this).css("background","pink");
             },
             mouseout:function(){
             $(this).css("background","");
             }
             });

             $("ul").undelegate("mouseout"); */




            /*     $("li").bind({
             mouseover:function(){
             $(this).css("background","pink");
             },
             mouseout:function(){
             $(this).css("background","");
             }
             });

             //卸载事件  
             $("li").unbind("mouseout mouseover"); */
        });

    </script>
</head>
<body>
<ul>
    <li>首页</li>
    <li>公司信息</li>
    <li>人才计划</li>
</ul>
</body>
</html>

以上是关于四种绑定事件的主要内容，如果未能解决你的问题，请参考以下文章

jQuery事件绑定的四种方法

jQuery绑定事件的四种方式：bindlivedelegateon