Jquery真的不難~第四回 JQ也是事件驅動的（匿名函數的使用）

回到目錄

上一篇文章主要說的是JQ中如何去操作HTML標簽的樣式，今天主要來學習一下JQ幾個比較重要的事件，如單擊click，雙擊dblclick，鼠標移入mouseover，移出mouseout，焦點focus，移出焦點blur等等

• 前言

• 單擊

• 雙擊

• 鼠標移入與移出

• 焦點與移出焦點

• JS中的匿名函數

前言

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

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

代碼書寫方法很友好，其中還使用JS中的匿名方法（函數），稍候我會繼續介紹匿名方法。

單擊

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

雙擊

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

鼠標移入與移出

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

對於JQ事件，我們可以使用連接串的寫法，即將多個事件寫在一行中，JQ對象只在第一個事件前出現即可，如下代碼：

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

JS中的匿名函數

JS中的函數（方法）有兩種，實名函數與匿名函數，實名函數一般用來干一件獨立的事，因為匿名函數一般對在某個實名函數里出現，起到了返回全局變量的作用，如下代碼：

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

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

事實上，定義實名函數的第二種，即變量式函數也是使用了一個匿名函數的東西，呵呵，代碼如下：

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

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

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

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

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

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

輸出一下吧：

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

結果如下：

 

恩，其實所有的東西都是相通的，只要你相信你自己，就一定可以成功！

感謝您的閱讀！晚安！

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

回到目錄