jQuery事件绑定与解绑

一、jQuery事件

方法	描述	执行时机
click()	触发或将函数绑定到指定元素的click事件	单击鼠标时
dblclick()	触发或将函数绑定到指定元素的dblclick事件	双击鼠标时
mouseover()	触发或将函数绑定到指定元素的mouseover事件	鼠标移过时
mouseout()	触发或将函数绑定到指定元素的mouseout事件	鼠标移出时
hover()	当鼠标移动到元素上时，会触发指定的第一个函数(mouseenter); 当鼠标移出这个元素时，会触发指定的第二个函数(mouseleave)	鼠标移入移出

二、事件绑定

bind绑定事件

语法：

//第一个参数：事件类型
//第二个参数：事件处理程序
$("p").bind("click",function(){
//事件响应方法
)

缺点：不支持动态事件绑定

 // 第一种 bind（事件类型，事件处理函数）
             $("div").bind("click", function () {
                $(this).css("background-color", "green")
             })
             $("div").bind("mouseover", function () {
                 $(this).css("background-color", "pink")
             })
             $("div").bind("mouseout", function () {
                 $(this).css("background-color", "red")
             })

on绑定事件

语法：

//第一个参数: events，绑定事件的名称可以是由空格分隔的多个事件（标准事件或者自定义事件)
//第二个参数: selector，执行事件的后代元素（可选)，如果没有后代元素，那么事件将有自己执行。
//第三个参数: data，传递给处理函数的数据，事件触发的时候通过event.data来使用（不常使用)
//第四个参数: handler，事件处理函数
$(selector).on(events[,selector] [,data] , handler) ;

 //第二种  一次绑定多个事件.on进行事件绑定时可以实现动态绑定
            $("div").on({
                "click": function () {
                    $(this).css("background-color", "green")
                },
                "mouseover": function () {
                   $(this).css("background-color", "pink")
                },
                "mouseout": function () {
                     $(this).css("background-color", "red")
                 }
             })

三、事件解绑

unbind方式(不用)与bind对应

$(selector). unbind();//解绑所有的事件
$(selector). unbind("click");//解绑指定的事件

undelegate方式(不用)与delegate对应

$( selector ).undelegate();//解绑所有的delegate事件
$( selector) .undelegate( "click”);/ /解绑所有的click事件

off方式(推荐)与on对应

//解绑匹配元素的所有事件$(selector). off();
//解绑匹配元素的所有click事件
$(selector). off("click ");