回到目錄

上一篇文章主(zhu)要(yao)說的(de)是JQ中(zhong)如何去操作(zuo)HTML標(biao)簽(qian)的(de)樣式，今天主(zhu)要(yao)來學習一下JQ幾個(ge)比(bi)較(jiao)重(zhong)要(yao)的(de)事件，如單擊(ji)click，雙擊(ji)dblclick，鼠標(biao)移(yi)入(ru)mouseover，移(yi)出(chu)mouseout，焦點focus，移(yi)出(chu)焦點blur等等

• 前言

• 單擊

• 雙擊

• 鼠標移入與移出

• 焦點與移出焦點

• JS中的匿名函數

前言

事(shi)件一(yi)(yi)詞，大家應該不會(hui)陌(mo)生(sheng)，我認為可以(yi)(yi)這樣定義事(shi)件，當(dang)某個(ge)或(huo)某幾(ji)(ji)個(ge)操作之后，會(hui)引入一(yi)(yi)個(ge)或(huo)者幾(ji)(ji)個(ge)結(jie)果(guo)的(de)(de)產生(sheng)，而(er)這個(ge)結(jie)果(guo)我們(men)叫它(ta)事(shi)件，即Event,JS世(shi)界(jie)中的(de)(de)事(shi)件與傳統高級語言中的(de)(de)事(shi)件很類似，如對鼠標(biao)的(de)(de)單擊(ji)，雙擊(ji)，鍵盤(pan)的(de)(de)按(an)下，抬起等(deng)等(deng)，而(er)在(zai)JQ的(de)(de)封裝下，我們(men)可以(yi)(yi)為JQ對象（一(yi)(yi)般是(shi)以(yi)(yi)$開(kai)頭的(de)(de)變量，當(dang)然$只是(shi)JQ的(de)(de)標(biao)準寫法(fa)，你可以(yi)(yi)自己去重新定義它(ta)）很容易(yi)的(de)(de)添加事(shi)件，格式一(yi)(yi)般為:

Jq對象.事件(function () {... });

代(dai)碼書寫(xie)方法很友(you)好，其中(zhong)還(huan)使用(yong)JS中(zhong)的匿名方法（函數），稍候我會(hui)繼續介(jie)紹匿名方法。

單擊

$("#test").click(function () {
            alert("單擊事件")
        });

雙擊

   $("#test").dblclick(function () {
            alert("雙擊事件")
        });

鼠標移入與移出

$("#msg").mouseover(function(){$(this).addClass("selected");});
$("#msg").mouseout(function(){$(this).removeClass("selected");});焦點與移出焦點

對(dui)于JQ事(shi)(shi)件，我們(men)可以使用連接串(chuan)的寫(xie)法(fa)，即(ji)將多個(ge)事(shi)(shi)件寫(xie)在一行(xing)中，JQ對(dui)象只在第一個(ge)事(shi)(shi)件前出現即(ji)可，如下代(dai)碼：

$("#msg").mouseout(function(){$(this).removeClass("selected");})
         .mouseover(function(){$(this).addClass("selected");})

JS中的匿名函數

JS中的(de)函(han)數（方(fang)法）有(you)兩(liang)種，實(shi)(shi)名(ming)函(han)數與匿名(ming)函(han)數，實(shi)(shi)名(ming)函(han)數一(yi)般用來干一(yi)件獨立(li)的(de)事，因為匿名(ming)函(han)數一(yi)般對在某個實(shi)(shi)名(ming)函(han)數里出現，起到了(le)返回全局(ju)變量的(de)作(zuo)用，如下代(dai)碼(ma)：

        function zzl() {
             var res = function () {//匿名函(han)數
                return {
                    msg: "OK"
                };
            };
            return res;
        }

         alert((zzl())().msg);

事實上，定義(yi)實名函數(shu)(shu)的(de)第二(er)種(zhong)，即變(bian)量式函數(shu)(shu)也是使用了(le)一(yi)個(ge)匿名函數(shu)(shu)的(de)東西，呵呵，代碼如下：

var log=function(msg){
  alert(msg);
}

有(you)時，在函(han)數中返回一(yi)(yi)個對象與(yu)返回一(yi)(yi)個函(han)數總是讓我們感到(dao)頭病，有(you)時，可能不知道如何去調用一(yi)(yi)個這(zhe)樣的復雜函(han)數，看(kan)代碼：

　　　　　var ReturnObject = function () {
            return { //返回一個對(dui)象(xiang)
                msg: "返回一個對象"
            };
        }
        var ReturnFunction = function () {
            var fun = function () {
                return {
                    msg: "返回一個函數"
                };
            };
            return fun; //返(fan)回一個函數
        }

事(shi)實(shi)上，調用的(de)(de)時候，你(ni)的(de)(de)頭腦是(shi)否清晰(xi)，如果清晰(xi)的(de)(de)活(huo)，還就(jiu)沒什么難的(de)(de)了，返(fan)(fan)回是(shi)對象，直接就(jiu)是(shi)ReturnObject().msg，返(fan)(fan)回的(de)(de)是(shi)函(han)數，當然

你(ni)要加個(ge)（）了，就像(xiang)這樣ReturnFunction()().msg)，當然如(ru)果(guo)你(ni)不()()，這樣的(de)寫法如(ru)果(guo)你(ni)認識可讀性差，可以改為(ReturnFunction())().msg

看上去就清晰一些了，呵呵！

輸出一下吧：

  console.log(ReturnObject().msg);
　console.log(ReturnFunction()().msg);
  console.log((ReturnFunction())().msg);

結果如下：

恩，其(qi)實(shi)所(suo)有的東西(xi)都是相通的，只(zhi)要(yao)你相信你自己，就(jiu)一定可以(yi)成功！

感謝(xie)您的閱讀！晚安！

感謝讓(rang)我找到了寫手的感覺，呵呵！謝謝！

回到目錄