jQuery中事件的绑定和解绑以及事件冒泡和事件冒泡的阻止

一、元素事件的绑定

为按钮绑定鼠标进入,鼠标离开,点击事件

第一种方法

            $("#btn").mouseenter(function () {
    
    
                $(this).css("backgroundColor","red");
            });
            $("#btn").mouseleave(function () {
    
    
                $(this).css("backgroundColor","blue");
            });
            $("#btn").click(function () {
    
    
                alert("你注定是一个与众不同的男人");
            });

第二种方式:链式编程

           $("#btn").mouseenter(function () {
    
    
                $(this).css("backgroundColor","red");
            }).mouseleave(function () {
    
    
                $(this).css("backgroundColor","blue");
            }).click(function () {
    
    
                alert("你注定是一个与众不同的男人");
            });

第三种方式:bind方法绑定事件

            $("#btn").bind("mouseenter",function () {
    
    
                $(this).css("backgroundColor","red");
            });
            $("#btn").bind("mouseleave",function () {
    
    
                $(this).css("backgroundColor","blue");
            });
            $("#btn").bind("click",function () {
    
    
                alert("你依旧这么的出众");
            });

第四种写法:链式编程

            $("#btn").bind("mouseenter",function () {
    
    
                $(this).css("backgroundColor","red");
            }).bind("mouseleave",function () {
    
    
                $(this).css("backgroundColor","blue");
            }).bind("click",function () {
    
    
                alert("你依旧这么的出众");
            });

第五种写法:使用键值对的方式绑定事件

               $("#btn").bind({
    
    "click":function () {
    
    
                    alert("你依旧这么的出众");
                },"mouseenter":function () {
    
    
                    $(this).css("backgroundColor","red");
                },"mouseleave":function () {
    
    
                    $(this).css("backgroundColor","blue");
                }});

为元素绑定多个相同的事件

• bind方法绑定多个相同的事件的时候,如果使用的是键值对的方式,只能执行最后一个

第一种方式，可以

       $(function () {
    
    
            $("#btn").click(function () {
    
    
                console.log("就当他从来都没有来过");
            });
            $("#btn").click(function () {
    
    
                console.log("如果有一天");
            });
        });

第二种方式，可以

        $(function () {
    
    
            $("#btn").click(function () {
    
    
                console.log("就当他从来都没有来过");
            }).click(function () {
    
    
                console.log("雏菊");
            });
        });

第三种方式，可以

        $(function () {
    
    
            $("#btn").bind("click",function () {
    
    
                console.log("也许你我只是彼此的过客");
            });
            $("#btn").bind("click",function () {
    
    
                console.log("或许吧");
            });
        });

第四种方式，可以

       $(function () {
    
    
            $("#btn").bind("click",function () {
    
    
                console.log("也许你我只是彼此的过客");
            }).bind("click",function () {
    
    
                console.log("或许吧");
            });
        });

第五种方式,不可以（只执行最后一个）

元素创建的另一种方式delegate()

        $(function () {
    
    
            $("#btn").bind({
    
    "click":function () {
    
    
                    console.log("或许吧");
                },"click":function () {
    
    
                    console.log("也许你我只是彼此的过客");
                }});
        });

     * 如果先创建元素，再为这个元素绑定事件，后面创建的子元素没有该事件
     * 只有使用.delegate()方法为父元素的子元素添加事件的方法才能实现这个效果    
     * 对象.事件名字(事件处理函数);---$("#btn").click(function(){});
     * 对象.bind("事件名字",事件处理函数);---$("#btn").bind("click",function(){});
     * 父级对象.delegate("子级元素","事件名字",事件处理函数);---->$("#dv").delegate("p","click",function(){});

        $(function () {
    
    
            $("#btn").click(function () {
    
    
                //为父级元素绑定事件,父级元素代替子级元素绑定事件
                //子级元素委托父级绑定事件
                //父级元素调用方法,为子级元素绑定事
                $("#dv").delegate("p", "click", function () {
    
    
                    alert("也许只是一个梦");
                });
            });
        });

     <script>
        $(function () {
    
    
            $("#btn").click(function () {
    
    
                $("#dv").append("<p>梦里花落知多少</p>");
                // $("p").click(function () {
    
    
                //     alert("其实很简单");
                // });
                $("#dv").delegate("p","click",function () {
    
    
                    alert("其实很无奈");
                });
            });

            $("#btn2").click(function () {
    
    
                $("#dv").append("<p>梦里花落知多少</p>");
            });
        });
    </script>

元素创建的另一种方式on()

• 此时on和delegate的作用是一样的,但是参数的顺序是不一样

       $(function () {
    
    
            $("#btn").click(function () {
    
    
                $("#dv").append($("<p>我们之间少了太多空白格</p>"));
                $("#dv").on("click","p",function () {
    
    
                    alert("怎么了，为什么");
                });
            });

            $("#btn2").click(function () {
    
    
                $("#dv").append($("<p>我们之间少了太多空白格</p>"));
            });
        });

元素绑定事件的区别

• • 对象.事件名字(事件处理函数)----普通的写法
  • 对象.bind(参数1，参数2)----参数1:函数名字;参数2:事件处理函数
  • 前面两种方式只能为存在的元素绑定事件，后添加的元素不能
  • 下面的两种方式,可以为存在的元素绑定事件,后添加的元素也有事件
  • 父级元素调用方法,代理子级元素绑定事件[建议用on方法]
  • 对象.delegate(参数1,参数2,参数3)----参数1:选择器[子级元素]
  • 参数2:事件名字;参数3:事件处理函数
  • 对象.on(参数1,参数2,参数3)----参数1:事件名字
  • 参数2:选择器[子级元素];参数3:事件处理函数

元素事件的解绑

bind方法元素的解绑

    * 用什么方式绑定事件，就用什么方式解绑事件
    * unbind()方法中括号内写的事件的名字，会把这个对象的所有该事件都移除
    * 对象.事件名字()这个方式绑定的事件也能用unbind()方法解绑
    * unbind()方法中括号内没有写任何东西，代表解除该对象的所有事件
    * 也可同时解绑多个事件，事件名字之间用空格隔开

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
    
    
            width: 300px;
            height: 200px;
            background-color: green;
        }
        p{
    
    
            width: 100px;
            height: 30px;
            background-color: red;
            cursor: pointer;
        }
    </style>
    <script src="../jquery-1.12.1.js"></script>
    <script>
        $(function () {
    
    
            //第一个按钮绑定事件
            $("#btn").click(function () {
    
    
                $("#dv").bind("click",function () {
    
    
                    alert("做一个只为自己说谎的哑巴");
                })
                //鼠标进入
                $("#dv").bind("mouseenter",function () {
    
    
                    $(this).css("backgroundColor","blue");
                });
                //鼠标离开
                $("#dv").bind("mouseleave",function () {
    
    
                    $(this).css("backgroundColor","yellow");
                });
                $("#dv").click(function () {
    
    
                    alert("越过山丘，却发现无人等候");
                });
            });
            //第二个按钮解绑事件
            $("#btn2").click(function () {
    
    
                //解绑的是点击事件,所有的点击事件全部移除
                //$("#dv").unbind("click");
                //括号中没有任何参数,此时该元素的所有的事件全部解绑
                //$("#dv").unbind();
                //同时解绑多个事件
                $("#dv").unbind("click mouseenter mouseleave");
            });
        });
    </script>
</head>
<body>
<input type="button" value="绑定事件" id="btn"/>
<input type="button" value="解绑事件" id="btn2"/>
<div id="dv"></div>
</body>
</html>

delegate方法元素的解绑

• undelegate()方法括号中没有写内容，说明移除该元素的所有事件
• undelegate(“选择器”,“事件名字”),可用于解绑多个事件，事件名字之间用空格隔开

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
    
    
            width: 300px;
            height: 200px;
            background-color: green;
        }
        p{
    
    
            width: 100px;
            height: 30px;
            background-color: red;
            cursor: pointer;
        }
    </style>
    <script src="../jquery-1.12.1.js"></script>
    <script>
        $(function () {
    
    
            //第一个按钮绑定事件
            $("#btn").click(function () {
    
    
                //为div绑定事件
                $("#dv").click(function () {
    
    
                    console.log("div被点了");
                }).mouseenter(function () {
    
    
                    console.log("鼠标进来了");
                }).mouseleave(function () {
    
    
                    console.log("鼠标离开了");
                });
                //在div中创建一个p,同时绑定点击事件
                $("<p>这是一个p</p>").appendTo($("#dv"));
                //为p绑定事件
                $("#dv").delegate("p","click",function () {
    
    
                    console.log("啊~p被点了");
                });
                $("#dv").delegate("p","mouseenter",function () {
    
    
                    console.log("p的鼠标进入");
                });
            });

            //第二个按钮解绑事件
            $("#btn2").click(function () {
    
    
                //p的点击事件没有了,移除了p的所有的事件
                //$("#dv").undelegate();
                //移除的是p的点击事件
                $("#dv").undelegate("p","click");
                //可以移除多个事件,但是每个事件之间用空格隔开
                //$("#dv").undelegate("p","click mouseenter");
            });
        });
    </script>
</head>
<body>
<input type="button" value="绑定事件" id="btn"/>
<input type="button" value="解绑事件" id="btn2"/>
<div id="dv"></div>
</body>
</html>

on方法元素的解绑

• .off()方法中什么都没写,说明解绑父级元素和子级元素中所有的事件
• .off(“事件名字”),说明解绑父级元素和子级元素中的该事件
• .off(“事件名字 事件名字”),说明解绑父级元素和子级元素的多个事件，中间用空格隔开
• .off(“事件名字”,“选择器”),说明解绑该选择器对应元素的该事件,也可多个，中间用空格隔开
• .off("",“选择器”),说明解绑该选择器对应元素的所有事件
• .off(“事件名字”,"**"),说明解绑父级元素中所有子元素的该事件
• .on(“事件名字”,事件处理函数),也可为元素添加事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
    
    
            width: 300px;
            height: 200px;
            background-color: green;
        }
        p{
    
    
            width: 100px;
            height: 30px;
            background-color: red;
            cursor: pointer;
        }
    </style>
    <script src="../jquery-1.12.1.js"></script>
    <script>
        $(function () {
    
    
            //第一个按钮绑定事件
            $("#btn").click(function () {
    
    
                //为div绑定事件
                $("#dv").click(function () {
    
    
                    console.log("div被点了");
                }).mouseenter(function () {
    
    
                    console.log("鼠标进来了");
                }).mouseleave(function () {
    
    
                    console.log("鼠标离开了");
                });
                //在div中创建一个p,同时绑定点击事件
                $("<p>这是一个p</p>").appendTo($("#dv"));
                //为p绑定事件
                $("#dv").on("click","p",function () {
    
    
                    console.log("啊~,p被点了");
                });
                $("#dv").on("mouseenter","p",function () {
    
    
                    console.log("啊~,进入到p里面来了,哦");
                });
                $("#dv").on("click","span",function () {
    
    
                    console.log("哦,span被点了");
                });
            });

            //第二个按钮解绑事件
            $("#btn2").click(function () {
    
    
                //父级元素和子级元素的所有事件都解绑
                // $("#dv").off();
                //父级元素和子级元素的该事件都解绑
                //$("#dv").off("click");
                //解除父级元素和子级元素的多个事件，事件名字之间用空格隔开
                //$("#dv").off("click mouseenter");
                //解绑p标签的点击事件
                //$("#dv").off("click","p");
                //解绑p标签的多个事件
                //$("#dv").off("click mouseenter","p");
                //解绑标签的所有事件
                //$("#dv").off("","p");
                //解除父级元素中所有子级元素的事件
                $("#dv").off("click","**");
            });
        });
        $(function () {
    
    
            $("#btn3").on("click",function () {
    
    
                alert("深藏心底的爱");
            });
        });
    </script>
</head>
<body>
<input type="button" value="绑定事件" id="btn"/>
<input type="button" value="解绑事件" id="btn2"/>
<input type="button" value="雏菊" id="btn3"/>
<div id="dv">
    <span>这是span</span>
</div>
</body>
</html>

事件冒泡和事件冒泡的阻止

• DOM中:
• 事件冒泡:多个元素嵌套，有层次关系，这些元素都注册了相同的事件，
• 如果里面元素的事件触发了,那么外面元素的该事件就会自动的触发了
• 如何阻止事件冒泡:
• 1.window.event.cancelBubble=true;谷歌支持，IE特有的，火狐不支持
• 2.e.stopPropagation(); 谷歌和火狐支持,IE不支持
• jQuery中:
• 直接在事件处理函数后加return false即可

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #dv1 {
    
    
            width: 300px;
            height: 200px;
            background-color: red;
        }

        #dv2 {
    
    
            width: 250px;
            height: 150px;
            background-color: green;
        }

        #dv3 {
    
    
            width: 200px;
            height: 100px;
            background-color: blue;
        }
    </style>
    <script src="../jquery-1.12.1.js"></script>
    <script>
        $(function () {
    
    
            $("#dv1").click(function () {
    
    
                console.log("第一个div被点击了");
                console.log($(this).attr("id"));
                //console.log(this.id);
            });
            $("#dv2").click(function () {
    
    
                console.log("第二个div被点击了");
                console.log($(this).attr("id"));
            });
            $("#dv3").click(function () {
    
    
                console.log("第三个div被点击了");
                console.log($(this).attr("id"));
                return false;
            });
        });
    </script>
</head>
<body>
<div id="dv1">
    <div id="dv2">
        <div id="dv3">
        </div>
    </div>
</div>
</body>
</html>