jQuery -- 事件

事件指的是頁面對操作者動作的響應。例如滑鼠的滑過、點選等都屬于動作。

jQuery中常用的事件大體分為滑鼠事件、鍵盤事件、表單事件以及視窗事件這4種，可以說這些類型的事件滿足了大部份的需求。

基本事件

jQuery中最基本的事件就是頁面完全加載時的ready事件了，這基本上是所有函數的起始。

$("document").ready(function)

----------

$("document").ready(function(){

});
           

滑鼠事件

滑鼠事件應該算是應用最頻繁的事件了，包括滑鼠的單擊click、輕按兩下dblclick、按下mousedown、松開mouseup、滑鼠位置mousemove、滑鼠滑入mouseover、滑鼠滑出mouseout以及和滑鼠滑入/滑出相似的mouseenter與mouseleave。

單擊與輕按兩下

$(document).ready(function(){
    $("#ti1").click(function(){ //滑鼠單擊事件
        $(this).html("<h3>Click</h3>");
    });
    $("#ti2").dblclick(function(){ //滑鼠輕按兩下事件
        $(this).html("<h3>Double Click</h3>");
    });
    $(".tc1").mousedown(function(){ //滑鼠按下事件
        $(this).html("<h3>MouseDown</h3>");
    });
    $(".tc1").mouseup(function(){ //滑鼠松開（彈起）事件
        $(this).html("<h3>MouseUp</h3>");
    });
});
           

其它的幾個滑鼠事件應用較少，不再贅述，有興趣的可以去研究一下。

注意一點：mouseover與mouseenter的差別，mouseover在進入被選元素或任意子元素時都會被觸發，而mouseenter隻有在進行被選元素時才會觸發，是以mouseover可能會觸發多次（父子元素之間的over/out），而mouseenter隻會觸發1次。

focus和blur是一對擷取/失去焦點的事件，如下所示：

$("input").focus(function(){
        $(this).css("background-color","red");
    });
    $("input").blur(function(){
        $(this).css("background-color","white");
    })
           

表單事件

表單事件應用最多的是submit送出，即表單送出，在許多需要使用者注冊、填寫送出資訊的地方都存在表單送出。

submit分為兩種，分别是：submit()和submit(function)。使用者在送出表單時，可以使用submit()直接送出，也可以使用submit(function)來進行送出，插入一些在送出時想要做的事情。

submit僅适用于表單form。

$(document).ready(function(){
    $("form").submit(function(){
        var n = $("#i_uname").val();
        var p = $("#i_pwd").val();
        alert(n+":"+p);
    });
});
           

示例使用的是submit(function)，在送出的時候輸出要送出的資料。

視窗事件

視窗事件針對視窗或元素的尺寸改動、滾動條滑動等情況做出響應，resize事件是日常可能會應用到的事件，它是視窗尺寸變化事件。

當視窗的尺寸發生改變時，修改div元素的背景色為綠色：

$(document).ready(function(){
    $(window).resize(function(){
        $("div").css("background-color","green");
    })
});
           

其它事件

on/off：on用來向指定的元素添加事件，而off則用來移除on添加的事件。bind與on的作用是相同的，不過推薦使用on。

$(document).ready(function(){
    $("p").on("click",function(){
        alert('hello');
    });
    $("#hideshow").click(function(){
        $("p").off("click");
    });
});
           

hover：用來指定元素的兩個事件，分别是滑鼠滑入元素、滑鼠滑出元素。需要注意的是，在jQuery 1.7版本前，該方法觸發的是mouseenter和mouseleave事件；而在jQuery 1.8版本後，該方法觸發的是mouseover和mouseout事件。

$(document).ready(function(){
    $("form").hover(function(){
        $("div").hide();
    },function(){
        $("div").show();
    });
});
           

event：event應該算是一個對象，它有許多的屬性，可以使用它來擷取目前的DOM元素、滑鼠位置、事件的值等資訊。

$(document).ready(function(){
    $("div").mousemove(function(event){
        $("span").html(event.pageX+","+event.pageY);
    });
});
           

change：當元素的值發生改變時觸發的事件。

$(document).ready(function(){
    $("input").change(function(){
        $(this).css("background-color","blue");
    });
});