jQuery事件

事件在元素對象與功能代碼中起着很是重要的做用

嚴格來講，事件在觸發以後分爲兩個階段，第一是捕獲階段，而後是冒泡階段，可是遺憾的是，不少瀏覽器都不支持捕獲事件，所以直接執行冒泡事件，所謂的冒泡就是事件執行中的順序

能夠經過stopPropagation()方法阻止冒泡事件

頁面載入事件

jQuery中的頁面載入事件ready()相似於JavaScript中的OnLoad()方法，只是在事件執行時間上有區別。OnLoad()方法必須是頁面中的所有元素徹底加載到瀏覽器後才觸發，在這種狀況下，若是頁面中的元素過多或者過大，那麼要等到OnLoad()方法執行完畢後，用戶才能進行操做。若是使用jQuery中的ready()方法加載頁面，則只要頁面的DOM模型加載完畢，就會觸發ready方法。

ready方法的工做原理：

在jQuery加載頁面時，會設置一個isReday的標記，用於監聽頁面的加載的進度。固然遇到執行ready方法時經過查看isReady值是否被設置，若是未被設置，那麼說明頁面沒有被徹底加載，在此狀況下，將未完成加載的部分用一個數組緩存起來，當所有加載完成後，再將未完成的部分經過緩存一一執行。

ready方法的寫法

<script type="text/javascript">
    //寫法一
    $(function() {
        //代碼部分
    });
    //寫法二
    $(document).ready(function() {
        //代碼部分
    });
    //寫法三
    jQuery(document).ready(function() {
        //代碼部分
    });
    //寫法四
    jQuery(function() {
        //代碼部分
    });
</script>

綁定事件

綁定按鈕的單機事件

<script type="text/javascript">
    //寫法一
    $(function() {
        $("input").click(function(){
            alert("綁定按鈕的單擊事件");
        });
    });     
</script>
<div class="wrapper">
    <input type="button" value="點擊開始" />
</div>

在jQuery中還可使用bind()方法進行事件的綁定

bind()功能是爲每一個選擇元素的事件綁定處理函數。語法：bind(type,[data],fn);

其中type爲一個或多個類型的字符串，如"click",也能夠自定義類型，也能夠是被參數type調用的類型，

data參數是做爲event.data屬性值傳遞給事件對象的額外數據對象。

經過bind方法綁定事件

<script type="text/javascript">
            $(function() {
                $("input").bind("click",function(){
                    alert("bind");
                });
            });
            
        </script>
        <div class="wrapper">
            <input type="button" value="點擊開始" />
        </div>

切換事件

在jQuery中有兩個方法能夠用來切換事件，分別是hover()和toggle(),所謂切換事件，就是兩個以上的事件綁定一個元素，在元素的行爲動做間進行切換，

hover方法是在鼠標懸停和鼠標移出的事件進行切換

該方法所實現的功能，也能夠經過jQuery事件mouseseenter和mouseleave實現

hover方法語法：hover(over,out);

兩個參數over和out，分別是鼠標懸停和鼠標移出的事件代碼段

用hover方法，實現鼠標通過文字變紅色，鼠標移出文字變藍色的功能

<script type="text/javascript">
    $(function() {
        $("p").hover(function(){
            $(this).css('color','red');
        },function(){
            $(this).css('color','blue');
        });
    });
            
</script>
<div class="wrapper">
    <p>hover方法</p>
</div>

toggle方法

該方法能夠依次調用N個指定函數，知道最後一個函數，而後重複對這些函數輪番調用，每次單機後依次調用函數。語法如是：toggle(fn1,fn2...);

用toggle方法，實現鼠標單擊文字，依次改變文字的顏色

<script type="text/javascript">
    $(function() {
        $("p").toggle(function() {
            $("p").css("color", "green");
        }, function() {
            $("p").css("color", "red");
        }, function() {
            $("p").css("color", "yellow");
        });
    });
</script>
<div class="wrapper">
    <p>
        hover方法
    </p>
</div>

移除事件

在DOM對象的操做中，有綁定事件，固然也有解除綁定，在jQuery中，提供unbind()方法移除綁定事件，語法：unbind([type],[fn]);其中type爲移除的事件類型，fn爲須要移除的事件出來函數，若是該方法沒有參數，則移除全部的綁定事件。

點擊按鈕，移除p元素的綁定事件

<script type="text/javascript">
    $(function() {
        $("p").click(function(){
            alert("綁定點擊");
        });
        $("input").click(function(){
            $("p").unbind("click");
        });
    });
</script>
<div class="wrapper">
    <p>
        hover方法
    </p>
    <input type="button" value="移除綁定" />
</div>

其餘事件

one();

該方法是爲所選元素綁定一個僅觸發一次的處理函數，語法：one(type,[data],fn);

其中type爲事件的類型，既要觸發的事件類型。data參數是做爲event.data屬性值傳遞給事件對象的額外數據對象。fn爲綁定事件是所要觸發的函數。

使用one方法爲按鈕綁定一個click事件，點擊按鈕時彈出p元素的文本內容，再次點擊按鈕，再也不彈出

<script type="text/javascript">
    $(function() {
        $("input").one("click",function(){
            alert($("p").text());
        });
    });
</script>
<div class="wrapper">
    <p>
        hover方法
    </p>
    <input type="button" value="one" />
</div>

trigger()方法

在DOM頁面中，有時候須要在頁面加載完成後自動執行如下人性化的操做，好比文本框處於選中的狀態，某個按鈕處於焦點中。jQuery提供trigger方法，能夠很簡單的實現這個功能。
該方法在所選元素上觸發指定事件。語法：trigger(type,[data]);type爲觸發事件的類型，data爲可選參數，表示在觸發事件時傳遞給函數的附加參數。

使用trigger方法，實現文本框在頁面加載完畢處於選中狀態

<script type="text/javascript">
    $(function() {
        $("input").trigger("select");
    });
</script>

<div class="wrapper">
    <input type="text" />
</div>