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 () {
   
            $(