jQuery 事件绑定

1. 事件绑定

jquery事件的简单操作：

       $().事件类型(function事件处理);

       $().事件类型();

1.1 jquery事件绑定

       $().bind(事件类型，function事件处理);

       $().bind(类型1 类型2 类型3，事件处理);   //给许多不同类型的事件绑定同一个处理

       $().bind(json对象);              //同时绑定多个不同类型的事件

       (事件类型：click  mouseover  mouseout  focus  blur 等等)

       事件处理：有名函数、匿名函数

1.2 取消事件绑定

       ① $().unbind();                               //取消全部事件

       ② $().unbind(事件类型);                //取消指定类型的事件

       ③ $().unbind(事件类型，处理);      //取消指定类型的指定处理事件

注意：第③种取消事件绑定，事件处理必须是有名函数。

/*****************************************************************************/

//① bind()事件绑定使用
//同一个对象绑定多个click事件
$(function(){
$('div').bind('click',function(){
console.log('谁在碰我？');
});
$('div').bind('click',function(){
console.log('谁又在碰我？');
});
$('div').bind('mouseover',function(){
//给div设置背景色
$(this).css('background-color','lightgreen');
//$('div').css('background-color','lightgreen');
});
$('div').bind('mouseout',function(){
//给div设置背景色
$(this).css('background-color','lightblue');
//$('div').css('background-color','lightgreen');
});
});

//② bind()事件绑定简单使用

//为多个不同类型事件绑定同一个处理
//注意：事件彼此通过“一个”空格分隔
$(function(){
$('div').bind('click mouseover mouseout',function(){
console.log('hello');
});
});

//③ bind()事件绑定简单使用
//通过一个json对象同时绑定多个不同事件
$(function(){
var jn = {
click:function(){
console.log('谁敢碰我？')
},
mouseover:function(){
console.log('轻轻地小明来了')
},
mouseout:function(){
console.log('轻轻地又走了');
}
}

$('div').bind(jn); //类似attr(json) css(json)
});

//unbind()取消事件绑定操作
//以下f1和f2要定义到最外边，使用没有任何影响

function cancel(){
//取消事件绑定
//$('div').unbind(); //取消全部事件
//$('div').unbind('click'); //把指定事件类型的全部处理都给取消
$('div').unbind('click',f1); //把指定事件类型的具体处理给取消掉(要求：事件处理是"有名函数")
}

/*****************************************************************************/

事件绑定是丰富事件操作的形式而已。

从dom2级事件操作开始，同一个对象可以绑定多个同类型的事件，具体如下：

dvnode.addEventListener(‘click’,fn);

dvnode.addEventListener(‘click’,fn);

$(‘div’).click(function);

$(‘div’).click(function);