zoukankan      html  css  js  c++  java
  • bind,unbing,on,live,delegate绑定和解绑事件

    <!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">
    .myred{
    border:4px solid red;
    }
    </style>
    <script src="js/jQuery1.11.1.js"></script>
    <script src="js/jquery-migrate-1.2.0.js"></script>
    <script type="text/javascript">
    $(function() {
    /* $("input").focus(function() {
    $(this).css("background","pink");
    }).blur(function() {
    $(this).css("background", "");
    });*/
    /* $("input").bind('focus', function () {
    $(this).css("background", "pink");
    }).bind('blur', function () {
    $(this).css("background", "");
    });*/
    //5分钟,用一个bind,绑定个事件
    /* $("input").bind('focus', function () {
    $(this).css("background", "pink");
    }).bind('blur', function () {
    $(this).css("background", "");
    });*/

    /*$("input").bind(
    {
    focus: function () {
    $(this).css("background", "pink");
    },
    blur: function () {
    $(this).css("background", "");
    }
    });*/
    $("input").on(
    {
    focus: function () {
    $(this).css("background", "pink");
    },
    blur: function () {
    $(this).css("background", "");
    }
    });

    //卸载所有事件,但是不能用()
    // $("input").unbind("focus blur");
    $("input").off("focus blur");

    //live
    $("ul").delegate("li",{

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

    $("#btnAdd").live('click',function() {
    //深圳
    var $obj = $("<li>深圳</li>");
    $("ul").append($obj);
    }
    );


    });
    </script>
    </head>
    <body>
    用户名:<input type="text"/>
    密码:<input type="password"/>
    <ul>
    <li>北京</li>
    <li>上海</li>
    <li>广州</li>
    </ul>
    <input id="btnAdd" value="添加节点" type="button"/>
    </body>
    </html>

     //JQuery的1.9版本以后不再支持 on , live 的函数事件 , 得 引进相应的 jquery-migrate-1.2.0.js插件包才行。

  • 相关阅读:
    列表方块与格式与布局
    框架与样式表的基本概念
    表单
    内容容器,常用标签
    CSS3
    表单验证
    练习题
    document对象
    windows对象
    函数
  • 原文地址:https://www.cnblogs.com/navyhj/p/5494846.html
Copyright © 2011-2022 走看看