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