13、jQuery事件处理之事件绑定使用示例

Sian · 发表于 2016-2-21 11:16:16

本帖最后由 Sian 于 2016-2-21 11:50 编辑

[HTML] 纯文本查看 复制代码

<!DOCTYPE html>
<html>
<head>
        <meta charset="utf-8"/>
        <script src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>
        <style type="text/css">
                html,body{
                        text-align: center;
                        font-size: 20px;
                }
                div{
                        margin: 0 auto;
                        border: 1px solid black;
                }
                #cn{
                        float: left;
                        margin: 50px;
                        width: 420px;
                        height: 340px;
                        line-height: 40px;
                }
                #bj{
                        width: 340px;
                        height: 260px;
                }
                #hd{
                        width: 260px;
                        height: 180px;
                }
                #ppc{
                        width: 180px;
                        height: 75px;
                }
                #usa{
                        float: left;
                        margin: 50px;
                        width: 420px;
                        height: 340px;
                }
                
        </style>
        <script>
                $(document).ready(function(){
                /*
                // 事件处理函数绑定（给id为ppc的对象click事件绑定一个匿名函数）
                $('#ppc').click(function(){
                        alert("#####");
                });
                // 使用bind方法同样可以实现上述功能,bind方法为绑定功能
                $('#ppc').bind('click', function(){
                        alert("AAAAA");
                })
                // 同时绑定两个事件方法
                $('#ppc').mouseover(function(){
                        alert("MMMMM");
                }).mouseover(function(){
                        $(this).css('background', 'red');
                });
                // 使用bind同样可以实现多个事件方法绑定
                $('#ppc').bind('mouseover', function(){}).bind('mouseover', function(){});
                // 为事件绑定只执行一次的处理函数one()
                $('#ppc').one('click', function(){
                        alert("one");
                });
                // unbind参数为空则删除所有事件处理方法
                $('#ppc').click(function(){
                        alert("####");
                        $(this).unbind();
                });
                // 绑定多个事件
                $('#ppc').bind('mouseover', function(){
                        $(this).css('background', 'red');
                }).bind('mouseup', function(){
                        $(this).css('background', 'blue');
                }).bind('mousedown', function(){
                        $(this).css('background', 'green');
                });
                // 删除指定的某些事件
                $('#ppc').unbind('mouseover mousedown');
                // 通过命名空间删除一个事件处理函数,事件名后加命名空间
                $('#ppc').bind('click.one', function(){
                        alert("AAAAAA");        
                }).bind('click.two', function(){
                        $(this).css('background', 'red');
                });
                // 在jQuery1.7后使用on() off()代替bind() unbind()
                $('#ppc').unbind('click.two');
                $('#ppc').on('mouseover', function(){
                        $(this).css('background', 'red');
                }).on('mouseover', function(){
                        alert("####");
                });
                */
                });
        </script>
</head>
<body>
        <div id="cn">
                <span>中国</span>
                <div id="bj">
                        <span>北京</span>
                        <div id="hd">
                                <span>海淀</span>
                                <div id="ppc">
                                <span><a href="http://www.baidu.com">[url=http://www.ppc.com]www.ppc.com[/url]</a></span>
                                </div>
                        </div>
                </div>
        </div>
        <div id="usa">
                <span>美国</span>
        </div>
</body>
</html>

帐号		自动登录	找回密码
密码			立即注册

[jQuery] 13、jQuery事件处理之事件绑定使用示例