jQuery 的基礎事件

在 JavaScript 的學習中，有不少使用的事件，經常使用的事件有：click、dblclick、 mousedown、mouseup、mousemove、mouseover、mouseout、change、select、submit、keydown、 keypress、keyup、blur、focus、load、resize、scroll、error。

1.事件的綁定

jQuery 經過.bind()方法來爲元素綁定這些事件。能夠傳遞三個參數：bind(type,[data],fn)， type 表示一個或多個類型的事件名字符串；[data]是可選的，做爲 event.data 屬性值傳遞一個 額外的數據，這個數據是一個字符串、一個數字、一個數組或一個對象；fn 表示綁定到指 定元素的處理函數。

//使用點擊事件
$('input').bind('click',function(){ //點擊按鈕後執行匿名函數
alert('點擊！');
});

//普通處理函數
$('input').bind('click',fn); //執行普通函數式無須圓括號
function fn(){
alert('點擊！');
}

//能夠同時綁定多個事件
$('input').bind('mouseout mouseover', function(){ //移入和移出分別執行一次
$('div').html(function(index,value){
returnvalue+'1';
});
});

//經過對象鍵值對綁定多個參數
$('input').bind({ //傳遞一個對象

'mouseout':function(){ //事件名的引號能夠省略
alert('移出');
},

'mouseover':function(){
alert('移入');
}
});

//使用 unbind 刪除綁定的事件
$('input').unbind(); //刪除全部當前元素的事件

//使用 unbind 參數刪除指定類型事件
$('input').unbind('click'); //刪除當前元素的 click 事件

//使用 unbind 參數刪除指定處理函數的事件
function fn1(){
alert('點擊 1');
}
function fn2(){
alert('點擊 2');
}

$('input').bind('click',fn1);
$('input').bind('click',fn2);
$('input').unbind('click',fn1); //只刪除 fn1 處理函數的事件

2.複合事件

方法                                                描述

ready（fn）                           當DOM加載完畢觸發事件

hover（[fn1],fn2）                 當鼠標移入觸發第一個fn1,移出觸發fn2

toggle（fn1,fn2[fn3..]）          已廢棄，當鼠標點擊觸發fn1,在點擊觸發fn2...

//背景移入移出切換效果
$('div').hover(function(){
$(this).css('background','black'); //mouseenter 效果
},function(){
$(this).css('background','red'); //mouseleave 效果，可省略
});

注意：.hover()方法是結合了.mouseenter()方法和.mouseleva()方法，並不是.mouseover() 和.mouseout()方法。

.toggle()這個方法比較特殊，這個方法有兩層含義，第一層含義就是已經被 1.8 版廢用、 1.9 版刪除掉的用法，也就是點擊切換複合事件的用法。第二層函數將會在動畫那裏講解到。

既然廢棄掉了，就不該該使用。被刪除的緣由是：以減小混亂和提升潛在的模塊化程度。 但你又很是想用這個方法，而且不想本身編寫相似的功能，能夠下載 jquery-migrate.js 文件，來向下兼容已被刪除掉的方法。

//背景點擊切換效果(1.9 版刪除掉了)
<scripttype="text/javascript"src="jquery-migrate-1.2.1.js"></script>
$('div').toggle(function(){ //第一次點擊切換
$(this).css('background','black');
},function(){ //第二次點擊切換
$(this).css('background','blue');
},function(){ //第三次點擊切換
$(this).css('background','red');
});

注意：因爲官方已經刪除掉這個方法，因此也是不推薦使用的，若是在不基於向下兼容 的插件 JS。咱們能夠本身實現這個功能。 var flag=1; //計數器 $('div').click(function(){ if(flag==1){ //第一次點擊 $(this).css('background','black'); flag=2; }elseif(flag==2){ //第二次點擊 $(this).css('background','blue'); flag=3 }elseif(flag==3){ //第三次點擊 $(this).css('background','red'); flag=1 } });