jQuery事件篇---基礎事件

寫在前面：

　　有一段時間未更新博客了，利用這段時間，從新看了《jQuery基礎教程 第四版》和《鋒利的jQuery 第二版》，這兩本書絕對是jQuery入門很是好的書，值得多讀幾遍，並將上面的代碼逐個敲一下來體會jQuery的魅力！

　　利用接下來一段時間結合這兩本書對jQuery基礎知識作個梳理，算是讀書筆記吧，方便他人，方便本身，不足之處，但願讀者多多指教！

發文不易，轉載註明出處！

 

內容摘要：

1.綁定事件

2.簡寫事件

3.複合事件

一．綁定事件

jQuery 經過.bind()方法來爲元素綁定這些事件。 

形式：

bind(type, [data], fn)

參數：

type 表示一個或多個類型的事件名字符串；

[data]是可選的，做爲 event.data 屬性值傳遞一個額外的數據，這個數據是一個字符串、一個數字、一個數組或一個對象；

fn 表示綁定到指定元素的處理函數。

//使用點擊事件

$('input').bind('click', function () {              //點擊按鈕後執行匿名函數

　alert('點擊！');

});

 

//普通處理函數 

$('input').bind('click', fn);                  　　//執行普通函數式無須圓括號 

function fn() {

　　alert('點擊！'); 

}

 

//能夠同時綁定多個事件 

 1 $('input').bind('mouseout mouseover', function () {     //移入和移出分別執行一次
 2 
 3 
 4     $('div').html(function (index, value) {
 5 
 6 
 7         return value + '1';
 8 
 9 
10     });
11 
12 
13 });

//經過對象鍵值對綁定多個參數

 1 $('input').bind({　　　　　　　　　　　　　　 //傳遞一個對象
 2 
 3 
 4 　　'mouseout' : function () {            //事件名的引號能夠省略
 5 
 6 　　　　alert('移出');
 7 
 8 　　},
 9 
10 　　'mouseover' : function () {
11 
12 
13 　　　　alert('移入');
14 
15 　　}
16 
17 });

 

//使用 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 處理函數的事件

 

二．簡寫事件

爲了使開發者更加方便的綁定事件，jQuery 封裝了經常使用的事件以便節約更多的代碼。 咱們稱它爲簡寫事件。

 

上述簡寫形式大部分都很好理解，這兒只挑選幾個容易迷惑的進行說明：

 1.    .mouseover()和.mouseout() && .mouseenter()和.mouseleave()

.mouseover()和.mouseout()表示鼠標移入和移出的時候觸發。而.mouseenter()和.mouseleave()表示鼠標穿過和穿出的時候觸發。

那麼這兩組本質上有什麼區別呢？

手冊上的說明是：.mouseenter()和.mouseleave()這組穿過子元素不會觸發，而.mouseover()和.mouseout()則會觸發。看下面的實例：

//HTML 頁面設置

1 <div style="width:200px;height:200px;background:green;">
2 
3     <p style="width:100px;height:100px;background:red;"></p>
4 
5 </div>
6 
7 <strong></strong> 

//mouseover 移入

1 $('div').mouseover(function () {                //移入 div 會觸發，移入 p 再觸發
2 
3     $('strong').html(function (index, value) {
4 
5         return value+'1';
6     
7     });
8 
9 });

 

 //mouseenter 穿過

1 $('div').mouseenter(function () {     //穿過 div 或者 p，在這個區域只觸發一次
2 
3     $('strong').html(function (index, value) {   
4 
5         return value+'1';
6 
7     });
8 
9 });

同理mouseout和mouseleave。

  

 2.   .keydown()、.keyup() && .keypress()

.keydown()、.keyup()返回的是鍵碼，而.keypress()返回的是字符編碼。

 

$('input').keydown(function (e) {

alert(e.keyCode);            //按下 a 返回 65

});

 

$('input').keypress(function (e) {

alert(e.charCode);                   //按下 a 返回 97

});

注意：e.keyCode 和 e.charCode 在兩種事件互換也會產生不一樣的效果，除了字符還有一些非字符鍵的區別。更多詳情能夠查看個人 JavaScript事件處理的博客。

 

 3.   .focus()和.blur() && .focusin()和.focusout()

.focus()和.blur()分別表示光標激活和丟失，事件觸發時機是當前元素。而.focusin()和.focusout()也表示光標激活和丟失，但事件觸發時機能夠是子元素。

 

//HTML 部分

 1 <div style="width:200px;height:200px;background:red;">
 2 
 3     <input type="text" value="" />
 4 
 5 </div>
 6 
 7 <strong></strong>
 8 
 9 
10  

 

//focus 光標激活

$('input').focus(function () {     //當前元素觸發

$('strong').html('123');

});

 

//focusin 光標激活 

$('div').focusin(function () {      //綁定的是 div 元素，子類 input 觸發激活（用focus不行）

$('strong').html('123'); 

});

同理，.blur()和.focusout()表示光標丟失，和激活相似，一個必須當前元素觸發，一個能夠是子元素觸發。

 

三．複合事件

 

jQuery 提供了許多最經常使用的事件效果， 組合一些功能實現了一些複合事件， 好比切換功 能、智能加載等。

 

 

 

示例：

//背景移入移出切換效果

 

1 $('div').hover(function () {
2 
3     $(this).css('background', 'black');     //mouseenter 效果
4 
5     }, function () {
6 
7     $(this).css('background', 'red');      //mouseleave 效果，可省略
8 
9 }); 

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

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

既然廢棄掉了，就不該該使用。被刪除的緣由是：以減小混亂和提升潛在的模塊化程度。

但你又很是想用這個方法，而且不想本身編寫相似的功能，能夠下載 jquery-migrate.js文件，來向下兼容已被刪除掉的方法。

 

示例：

//背景點擊切換效果(1.9 版刪除掉了，首先要引入jquery-migrate.js文件)

 1 <script type="text/javascript" src="jquery-migrate-1.2.1.js"></script>
 2 
 3 
 4 $('div').toggle(function () {      　　　　  //第一次點擊切換
 5 
 6     $(this).css('background', 'black');
 7 
 8     }, function () {                   　　 //第二次點擊切換
 9 
10     $(this).css('background', 'blue');
11 
12     }, function () {                       //第三次點擊切換
13 
14     $(this).css('background', 'red');
15 
16 });

  

注意：因爲官方已經刪除掉這個方法，因此也是不推薦使用的，若是在不基於向下兼容的插件 JS。咱們能夠本身實現這個功能。

 1 var flag = 1; //計數器
 2 
 3 $('div').click(function () {
 4 
 5     if (flag == 1) {                      //第一次點擊
 6 
 7         $(this).css('background', 'black');
 8 
 9         flag = 2;
10 
11     } else if (flag == 2) {           //第二次點擊
12 
13         $(this).css('background', 'blue');
14 
15         flag = 3
16 
17     } else if (flag == 3) { //第三次點擊
18 
19         $(this).css('background', 'red');
20 
21         flag = 1
22 
23     }
24 
25 });

For my lover,

and thank you Mr.Lee!