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);