绑定事件 - Newbie_小白

绑定事件

HTML：
<!DOCTYPE >
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>无标题文档</title>
    <style type="text/css">
        * {
            margin: 0px;
            padding: 0;
            font-family: "微软雅黑", "arial", " sans-serif";
            font-size: 16px;
        }

        body {
            margin: 20px;
        }

        #content {
            display: none;
            border: 1px solid #060;
            width: 530px;
            height: 130px;

        }

        button {
            margin: 10px;
            background: silver;
            color: #006600;
            border-radius: 5px;
        }
    </style>
    <script type="text/javascript" src="js/jquery-2.2.2.min.js">
    </script>

    <script type="text/javascript">
        $(function() {
            $("#btn1").bind("click", function() {
                $("#content").show(3000);
            });
            $("#btn2").bind("click", function() {
                if ($("#content").is(":visible")) {
                    $("#content").hide(1000, showColor);
                } else {
                    $("#content").show(3000, showColor);
                    $("#content").css("background-color", "yellow");
                }
            });

            function showColor() {
                $("#content").css("background-color", "green");
            }
        });
    </script>
</head>

<body>
<button id="btn1">显示消息</button>
<button id="btn2">特效动画</button>
<div id="content">
         <pre>           设想在处理事件时，我们需要在一个事件函数中考察一个或者
    多个事件属性。这是一个简单的技术，可以使事件处理函数和作为
    参数传入的事件对象协同工作，或者从window.event 属性中读
    取信息。而且，这个技术不必处理不同的浏览器版本之间的细微
    差别。</pre>
</div>

</body>

</html>
result：

点击显示消息：

点击特效动画：





一个按钮绑定多个事件
HTML：

<!DOCTYPE >
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>无标题文档</title>
    <style type="text/css">
        * {
            margin: 0px;
            padding: 0;
            font-family: "微软雅黑", "arial", " sans-serif";
            font-size: 16px;
        }

        body {
            margin: 20px;
        }

        #content {
            display: none;
            border: 1px solid #060;
            width: 530px;
            height: 130px;
        }

        button {
            margin: 10px;
            background: silver;
            color: #006600;
            border-radius: 5px;
        }
    </style>
    <script type="text/javascript" src="js/jquery-2.2.2.min.js">
    </script>

    <script type="text/javascript">
        $(function () {
            $("#btn1").bind({
                click: function () {
                    $("#content").show(3000);
                },
                mouseover: function () {
                    $("#content").css("background", "#EE8A87");
                },
                mouseout: function () {
                    $("#content").css("background", "#fff");
                }
            });
        });
    </script>
</head>

<body>
<button id="btn1">显示消息</button>

<div id="content">
         <pre>           设想在处理事件时，我们需要在一个事件函数中考察一个或者
    多个事件属性。这是一个简单的技术，可以使事件处理函数和作为
    参数传入的事件对象协同工作，或者从window.event 属性中读
    取信息。而且，这个技术不必处理不同的浏览器版本之间的细微
    差别。</pre>
</div>

</body>

</html>
result：

运行：

posted on 2016-05-16 11:19 Newbie_小白阅读(126) 评论(0) 编辑收藏举报