JQ中事件常见的事件绑定方法

为元素绑定事件的多种方法

第一种

        //为按钮绑定鼠标进入,鼠标离开,点击事件
        $("#btn").click(function () {
            console.log("点击事件");
        });
        $("#btn").mouseenter(function () {
            $(this).css("backgroundColor", "red");
        });
        $("#btn").mouseleave(function () {
            $(this).css("backgroundColor", "green");
        });
        // 链式编程
	   $("#btn").mouseenter(function () {
	            $(this).css("backgroundColor", "red");
	        }).mouseleave(function () {
	            $(this).css("backgroundColor", "green");
	        }).click(function () {
	            console.log("点击事件");
	        });

第二种

  bind绑定方法
		$("#btn").bind("click", function () {
             console.log("点击事件");
        });
        $("#btn").bind("mouseenter", function () {
            $(this).css("backgroundColor", "red");
        });
        $("#btn").bind("mouseleave", function () {
            $(this).css("backgroundColor", "green");
        });
		//链式编程
		$("#btn").bind("click", function () {
            console.log("点击事件");
        }).bind("mouseenter", function () {
            $(this).css("backgroundColor", "red");
        }).bind("mouseleave", function () {
            $(this).css("backgroundColor", "green");
        });
        //键值对的绑定方式
         $("#btn").bind({
            "click": function () {
                console.log("点击事件");
            }, "mouseenter": function () {
                $(this).css("backgroundColor", "red");
            }, "mouseleave": function () {
                $(this).css("backgroundColor", "green");
            }
        })

为元素绑定多个相同时间的问题

    		$("#btn").click(function () {
                console.log("点击事件1");
            }).click(function () {
                console.log("点击事件2");
            }).click(function () {
                console.log("点击事件3");
            });

 			$("#btn").bind("click", function () {
                console.log("点击事件1");
            }).bind("click", function () {
                console.log("点击事件2");
            });
			//bind方法绑定多个相同的事件的时候,如果使用的是键值对的方式,只能执行最后一个
		      $("#btn").bind({"click":function () {
		        console.log("点击事件1");
		      },"click":function () {
		        console.log("点击事件2");
		      }});

  	     $("#btn").bind("click", function () {
                $("#dv").delegate("p", "click", function () {
                    console.log("点击事件1");
                })
            });

新创建的元素绑定事件

1、 第一种方式

 		$("#btn").click(function () {
                $("<p>我是一个p</p>").appendTo($("#dv"));
                // $("p").click(function () {
                //     alert("哈哈");
                // });
                // $("p").bind("click",function () {
                //     alert("哈哈");
                // });
                $("#dv").delegate("p", "click", function () {
                    alert("哈哈");
                });
            })
            // 后创建的 p标签事件 只有delegate 绑定的方法p标签才有事件
            $("#btn2").click(function () {
                //后添加的
                $("<p>这是一个p2</p>").appendTo($("#dv"));
            });

        })

第二种

      //此时on和delegate的作用是一样的,但是参数的顺序是不一样
      $("#btn").click(function () {
        $("<p>这是一个p</p>").appendTo($("#dv"));
        //和delegate是一样,都是在为子元素绑定事件
        $("#dv").on("click","p",function () {
          alert("p被点击了");
        });
      });
      $("#btn2").click(function () {
        $("<p>这是一个p2</p>").appendTo($("#dv"));
      });

总结

    * 对象.事件名字(事件处理函数);--->普通的写法
    * 对象.bind(参数1,参数2);---->参数1:事件的名字,参数2:事件处理函数
    * 前两种方式只能为存在的元素绑定事件,后添加的元素没有事件
    *
    * 下面的两种方式,可以为存在的元素绑定事件,后添加的元素也有事件
    * 对象.delegate("选择器","事件名字",事件处理函数);
    * 父级元素调用方法,代理子级元素绑定事件
    * 对象.on("事件名字","选择器",事件处理函数);
    * 父级元素调用方法,代理子级元素绑定事件
    *
    * 因为delegate方法中是调用的on的方法
    * 所以,以后直接用on就可以了